CSS Animations in Webflow

Get the cloneable for this project (affiliate link)

Join my Webflow Wizards Community

[timothyricks]

I added a second page to the cloneable for triggering these on scroll with javascript.

Get the cloneable for this project (affiliate link)

[tioass]

If the Tim Awards existed, this would be the video of the year! Congratulations!

[timdaff]

This is such a great video. It’s amazing that CSS animation has not gotten more love from Webflow and the community in general, especially considering how long it has been around!

I’d love to hear if there are any new trigger options or you have ideas for triggers using css only, outside of common pseudo classes.
Imagine a pseudo class for :in-viewport or something similar!

[shivarathrianil]

I have several sections in Home page. How to reveal the elements while scrolling the page to the next section. Can you make a separate video on that.

[heyderekj]

Imagine Webflow Interaction 3.0 using this PLUS having a timeline view

[zarkodimitric]

Hey Rick, awesome tutorial! My question is related to infinite marquee. I am trying to set it up for logos, but I guess since they are all different sizes, the marquee is all messed up. Is it possible to keep the smooth marquee using only CSS?

[lifipp]

I swear to god - I just asked in the comment under your video about Webflow's new custom CSS properties, whether It's possible to add custom CSS animations through it and few hours later you upload a video about it! That's the fastest fulfilled video request on YouTube ever! 😃

[CrewdFrost]

how do I make the css animations only start animating when fully in viewport? anyone??

[james]

Your channel is like the Hogwarts of Webflow! Always amazing content!

[tioass]

Is it possible to run the animations when scrolling?

[coreymoen]

This is SOOOO epic!! Definitely a bit of effort to get it setup, but I love that it’s all performant CSS.

Wondering if you could even package all of the embed stuff into a library to serve over JSDelivr for people? Like CSS GSAP to a point?!

[hiworldadv]

👍Great video. Could you add some CSS scroll-driven-animation examples to your template?

[khalidbirawi]

Hi, firstly brilliant content.

I am stuck on something and have tried for several hours to resolve; I wonder if you could help... I have done something similar to your loop-move-left example (8:57) but I have been trying for hours to figure out how to reverse the text direction on page scroll. So as a user scrolls down the page, the direction of the looping text reverses and as they scroll back it goes back to normal.

Your input would be greatly appreciated. Happy to share a video/images/link of the exact example. Thanks in advance

[qiaoya]

Awesome. It feels like the webflow I use and the webflow you use are not the same thing.

[mindfulmilligan]

Tim!! You are an absolute wizard.. true icon and I look up to you man. This was very helpful. Good bless!

[divonci-world]

MY DARG TIMOTHY BLUDCLART RICKS - effin GEEZA!!!

[andresochoa]

Hey @timothyricks, how can I make the same split out animation apply to text when I hover over it?

[ihajo]

ok I guess I have to back to learning CSS again :(

[jo]

I have followed all steps by the T, but the scroll into view javascript function still doesn't work. CSS animations happen only on pageload, or they appear in their final state, and then the animation gets triggered (?) since this is uncharted territory, I'm lost here. I'd recommend to anyone trying this out to make a backup first, because it just doesn't work

[SepulvedaCarlos]

Just shipped in time !! I was having some marquee issues! I love you man! 😊