animated.css in RFF - Post ID 270237

User 2846109 Photo


Ambassador
341 posts

maybe I'll try adding those attributes directly into the animate.css file to see if that will work.... I'll report back
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

I really just need to alter the offset and the duration...
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

I am pretty sure wow is taking the data attributes and using js to change the css. By the way, change the main.css file that has the element you are looking to animate.
I have a working bootstrap carousel that uses animatecss and was able to add attributes delay and dur but again they were parsed and converted by js to change the stylecss of the element. You might try a custom attribute "style" and then for the data value put animation-delay: 10s. And so forth...
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

http://codepen.io/anon/pen/BNLOGG

Take a look at this....

Data attributes are passed to css by js.

This keeps us in FF and will not overwrite the main.css on export because js loads it for us. (Use the inspector to see codepen live)
Bootstrap 5 CSS Grid.
User 188640 Photo


Registered User
895 posts

I have been following this thread and wanted to add, why don't you use a custon.css for your changes so they don't get overwritten? Just a thought.
A Rose is Just a Weed in a Corn Patch!
User 2846109 Photo


Ambassador
341 posts

That's a good idea, Ernie.

Actually, I've been just trying to edit the actual animate.css file to get exactly what I need now so that works as well.

I've figured everything out at this point but still need to get the custom offset to work so the animations occur when the item is X pixels from the bottom of the screen.
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

Jeff wrote:
That's a good idea, Ernie.

Actually, I've been just trying to edit the actual animate.css file to get exactly what I need now so that works as well.

I've figured everything out at this point but still need to get the custom offset to work so the animations occur when the item is X pixels from the bottom of the screen.


I suppose the animate.css file contains all the default values so editing that works also ?

Here is a trigger on offset if it helps. You could actually change the css using this method as well for the element to add the duration value in. Adding the animate and type of animation class to the element at the same time would complete everything needed to occur.

http://jsfiddle.net/babumxx/hpXL4/
Bootstrap 5 CSS Grid.
User 2846109 Photo


Ambassador
341 posts

Twinstream wrote:


I suppose the animate.css file contains all the default values so editing that works also ?

Here is a trigger on offset if it helps. You could actually change the css using this method as well for the element to add the duration value in. Adding the animate and type of animation class to the element at the same time would complete everything needed to occur.

http://jsfiddle.net/babumxx/hpXL4/


Thanks for that. I'm not really sure how to adjust that if I just wanted it to affect a specific class for the animation event to occur at X px or X% from the bottom of the screen. I'll keep on looking into it though. I'm trying to see how wow.js is doing it also but not having any luck right now. I'm totally fine if I can just add this new code to the modified version of animate.css that I'm working on right now. Actually that would be ideal for me.
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://codepen.io/benske/pen/yJoqz

Again, just thrown out ideas. I know CC uses revealOnScroll on some pages.
Bootstrap 5 CSS Grid.
User 2846109 Photo


Ambassador
341 posts

boy, I wish I could simply add a animation-offset value to the css and be done with it, lol

It's so easy to adjust all the other things directly in the animate.css file when I see all the code to figure out how to simply adjust the animation start positions it makes me want to pay to use wow.js for the project. kind of frustrating... :|
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.