Another good source of animation is

https://wowjs.uk/ which I guess foundation use wowjs

https://wowjs.uk/
https://github.com/graingert/wow

or animate.css
https://daneden.github.io/animate.css/
https://github.com/daneden/animate.css

How to use animate.css
https://www.youtube.com/watch?v=CBQGl6zokMs
or
https://www.youtube.com/watch?v=QYQ0I1mvFDE

Haha don't assume anything here!

I didn't put that into the head but I just tried putting it in head section in RFF and it didn't work, and also tried just adding it to the html in chrome in the head and that didn't seem to work either.

Thanks for those links, Mansour! I'll look at them. I must admit that as a non-coder integrating many of these elements into RFF can be quite daunting but I'm going to keep on pushing/learning.

Great links and video(s) Mansour !

Learning lots !

Does anyone have a RFF project they've build that has any of the 'wow' or 'animate' elements in it that they could share? I still can't get any of those to work in RFF.

Thanks!

Really if you just want the animation like "tada" on a heading you first make sure you link to the animate.css file in your header. I download it and add it to a folder in resources I create named css. Then I choose it and link. (When exported then the folder is the same as the other css so it is added without destruction. I do the same with JS too....

After that it is simply creating a class "animated" and "tada" on your heading class and thats it.

Now adding additional control of that is another story. If you want duration, delay, and all the other deep diving stuff in animate.css you are going to have to use javascript to pass the FF attribute you create to the correct name of the control effect. I started to do that but found out some info for BB that showed me how to apply that to a slideshow. There was not anything I could find for FF but always thought of coming back and advancing it. I will see if I have a FF slideshow with the animate.css to share or the codpen for the BB carousel with duration and delay with the javascipt code. You might be able to transfer the same logic.

Please keep in mind I have no idea what i am talking about....just learning as I go.

I think we're on the same page and we're learning as we go here... and I'm totally good with that! lol

I'll post what I have so far a little later today and maybe upload the current one to my sdrive. But I have the js and css min files downloaded and imported into my resources in my RFF file. I think I have all the classes needed but I'm sure I'm missing something. Just not sure what.

Not sure if we should start a new thread for these wow and animate.css questions??

to be continued....

Ok I should apologize. I was trying to answer something I did not even know the question to. I downloaded Masour's project file and see the animation. I went to the container with the class "callout" and the data attributes data animate and data toggle. I went to transitions and selected ease-in. I adjusted to duration to 2 seconds and the delay to 1 and it controls the animation. Is this what you are looking to do ?

Here is an old file I created for a orbit slideshow with animate css. No duration or delay though but has all the animate effects available.

Thanks Twinstream, yes that's what I'm trying to do. I can get an element to animate in. And when I apply a transition to the element I can get the delay to work but any change in the duration value does not affect it at all. Can you try on your end and put in a duration of 5 sec to see if actually changes it? It's not on my end.

Yes it is duration.....5 sec or 10 seconds it slowly takes to become flipping downward and stop. 0 delay.
Try redownloading the project ? Container with "callout"