I got the animation to work - except for the offsets in a easy way.

Just give the actual image element class names. Just type in "fadeIn" as a class, and done. Then add "animated" as a class. Then give it another class name, I gave it superd (can also add "infinite if you want). You were in some way giving the animation classed to "responsive-picture" and not the div or the image element. I think responsive-picture is a class in the framework.

for the other part create and then add as a resource to the header a style sheet containing this:


That takes care of everything except the offset stuff. Will also have to add other vendor prefixes, the "-moz-" just takes care of firefox. I think it is suggessted for the prefixes, but all newer browsers should be getting standard.

Thanks Bill,

That's pretty much where I'm now too. I can add any of the duration, delay or iterations easily enough (I've just been adding it to the animate.css file) but adding the offset value is where I'm getting stuck. Hopefully with a few of us looking into it we can figure it out!

If we figure it out you could change your Avatar image to a happy Bill!

I have duplicated revealOnScroll in FF from http://codepen.io/anon/pen/BpeXeg/

It does not have the offset though.....

I added a custom.css sheet as per Ernie and Bill suggested. I was not able to duplicate the data-timeout on revealOnScroll but who needs it as its just a delay and that's in the custom.css.

Overall this could be a basic workable template but I would still love to see if we could load the data attributes into the css file while we add the animated class.

As far as the offset, I did make this work however its a one shot only and will not repeat the animation after scroll up or down. But has some info on adding the css attributes....
https://github.com/harconst/scroll-animations

That looks great! All the animations start as soon as they enter the window for me. Was there supposed to be an offset in the RFF file?

I understand the scroll offset setting to be the distance the element travels once it enters the bottom of the screen. So as the user scrolls the element up to the middle of the screen you might have a offset of 50%. There are some scrolls out there that have this feature.

There seems to be a bug in revealOnScroll where the center slide is visible before it starts to animate. I read the tutorial responses and someone indicated a fix but I have not figured out if its related or not. Shows up on smaller hand held devices....
Also I forgot to update the code to another users comment that some of the animations were hard coded (the jscript) to be removed and so if you change the animation name it might not be removed. If you read the tutorial you will see the fix for that also.

There is not a offset in revealOnScroll. (The ff project I uploaded)

In this example and also the setting in wow have offsets. http://jsfiddle.net/harconst/4FNFW/

It was the second link I gave above but I think I linked to the html file (https://github.com/harconst/scroll-animations)

waypoints look interesting....

Ok, I'll definitely look through the http://jsfiddle.net/harconst/4FNFW/ code a bit more! thanks again!

This site is loaded with scroll activators...check it out. (scripts.js)

http://seev.dutchmotorbikes.nl/onderdelen

Here is this one in raw form as a example of using waypoints. It also uses the animate.css and has the option of delay as a attribute. Offset too...

What I am finding out there is a lot of different scroll triggers that use different methods. Using custom css file and adding a custom js file works ok but am I wrong in saying that I have to import those files back into resources everytime I need to do a edit or update ? If so it would be nice to be able to edit those files in resources at least since html, css, and js are all interwoven?

SO much to learn about animation....as now I see keeping things simple and small is a cosmetic advantage too. Using animate.css may be overkill for a simple paragraph.

For instance here is one called Scrolltrigger that does not use animate.css. It has some really nice soft subtle css effects and some customization on repeats. Its unfinished (demonstration setup) so go at it and let me know how to add the "counter thing" in as I do not understand how to put a <span> 0 <span> inside a heading ?

https://terwanerik.github.io/ScrollTrigger/
https://github.com/terwanerik/ScrollTrigger