Hi all~

I'm looking for initial refreshers on animation for text and photo. Would I place the animation starting in out of view, and then place the animation i want on regular? Is there a way to animate text as if it is typing itself like it shows on the main coffee cup page?

would I have to make gifs of animations i prefer to use before adding these things?

Thanks in advance !

Animating text like it's been typed is a custom bit of CSS , otherwise you would have to give each letter a span attribute which nowadays gives an error in HTML validation.

Doing Out of View requires you to assign the position/opacity/ timing etc etc to 'OUT OF VIEW,, then on REGULAR,, back to where you want it to be seen.

Normally OUT OF VIEW within Site Designer happens every time somebody scrolls down or back up which can get a bit annoying for some folk.
Frank did a splendid workaround to stop that using a bit of JS but for the moment I can't find it, or you could use some custom CSS also and then put a CSS property to animate just the once,or twice or thrice up to you
Or you could use JS intercept observer which is similar to CSS but for me a little bit nicer and cleaner, uses less class names etc but requires a lot more code than the CSS way.

Giffs not necessary unless you want the actual image to animate rather than the container it's in.

Okay Wayan, what about when I want to add animation within a photo? is there a way to highlight the background of the photo more than the photo without losing opacity? I've tried it, but I am not sure if it will work without reducing opacity of the background as well.

I don't understand your question

Do you mean you want to animate an overlay over the photo (Text. H1,2,3 etc )
how can a background of a photo be more than the photo ?? unless it has multiple layers, in which case you would do that in a photo editor.
If you mean a containers background brighter that the image then simply give the parent container some padding and the a background colour of your choice all around.

I can't find it in these forums either, but I guess it was the the item attached.

Frank

Yes that's it Frank

It's quite a while ago that you posted it I had the code and it worked wonderfully, but still can't find it, on the test SD that I tried.
A brilliant simple solution if you ask me, nice one.