animated.css in RFF - Post ID 270139

User 2846109 Photo


Ambassador
341 posts

I've just been testing using the animate.css https://daneden.github.io/animate.css/ animation in RFF. I'm trying to use them without the wow js code. Many of them work as expected but there are a few that don't work at all. Not sure if anyone else has tried using them at all. On this page you can see how the fadeIn and zoomIn effects don't do anything. http://exploration.coffeecup.com/

Also, has anyone been able to get the extra attributes to work? I've tried adding a custom attribute for each of these but they don't seem to affect anything. When we were testing the wow js features a few weeks ago the data attributes for that seemed to work fine.

data-animation-duration
data-animation-delay
data-animation-iteration-count

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

thanks!
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2846109 Photo


Ambassador
341 posts

This is how the extra attributes are referenced on github:

#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}


Is there a specific way we would add the attributes?
I just added a "data-animation-duration" and a value of "5s" but that didn't work.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Have you tried in Attributes to select 'custom' and then add them manually?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2846109 Photo


Ambassador
341 posts

Do you mean for the animations that are not working? or for the attributes that are not working.

For the attributes that is how I'm trying to add them; with a custom.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

OK. I wasn't quite sure actually what was not working...

Could the animation be dependent on some script that is lacking? (just shooting in the blind...)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2846109 Photo


Ambassador
341 posts

I appreciate the help.:) Some animations are not working other are. Which is weird because all you should need to do is put in the correct class on the object.

I can't get any of the attributes to take effect though.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2846109 Photo


Ambassador
341 posts

Here's my rff file in case anyone would care to test this or check out the animations in it.

you can download animate.css here: https://daneden.github.io/animate.css/
Attachments:
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 244626 Photo


Registered User
811 posts

http://www.josebrowne.com/open/tutorial … nimate-css

This is a good starting point. As far as delays and duration I am still learning that and looking for answers too.
I believe we will have to use javascript to communicate between custom attributes we create and the callouts animate.css uses as well as start and stop listeners but have not figured it out in Foundation yet.

Have you tried to add the infinite as a class because I believe that will work ?
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Jeff wrote:
This is how the extra attributes are referenced on github:

#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}


Is there a specific way we would add the attributes?
I just added a "data-animation-duration" and a value of "5s" but that didn't work.


So I had some time to explore and now understand that the tutorials explain how to add the class animate to the element and remove it using javascript using some event like a click, hover or I suppose a scroll detect.

The duration, delay and iteration values are css and need to be added to the element css. If you go in to your exported main.css file and find the first element animated and add
animation-delay: 10s;
animation-duration: 15s;
animation-iteration-count: infinite
you can save and then load the exported html and see the effect with the new css values applied.

Probably be overwritten on the next export though.....

Putting this all together is another story for a later date.
Bootstrap 5 CSS Grid.
User 2846109 Photo


Ambassador
341 posts

Do you think there is a way to add those values inside of RFF somehow? like in a custom data attribute? I don't see why we can't do that. It works when we use the wow.js library so I can't understand why this would be any different???

I'm in the process of working up custom animated elements based off of animate.css. I don't really need the wow library except that I can't get these attributes to work when I don't use the wow library and use their attributes. hmmm....
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.