CSS Animations in Webflow

Realy Cool!

MY DARG TIMOTHY BLUDCLART RICKS - effin GEEZA!!!

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!

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?

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

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

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

Are you able to add these to CMS items?

subscribed and liked and commented

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

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.

You should do a follow-up video taking this concept one step further... by adding a JavaScript intersection observer to the site settings custom code area. This lets you apply all those cool custom CSS animations, but triggered in the viewport as you scroll through the page. I started doing this and won’t go back to interactions (for a multitude of reasons).

My transform: translateY is not working at all any Ideas?

OMG I love this video so much !!!!!

I am grateful that i chose to watch one last video before bedtime, I am still learning to the last minute. Thank you for sharing your knowledge, this is Gold. Thank you Tim you are such a great teacher.

Great and very useful tutorial as always with Timothy. It's kind of sad that native interaction on Webflow affects the performance so much; that was one of the main reasons for me to use Webflow 🥲

Hi Tim,
Thank you so much, that's fantastic! I've been trying to add the JavaScript code for triggering on scrolling, but it's not working at my clients site. I've spent three hours going through the code snippet, checking the attributes and classes. Everything seems to be exactly the same as in the cloneable, but still, it's not working. I even copy pasted my clients section to your cloneable. There it works. Do you have any idea why this might be happening at my clients site, probably hard to tell? Could I send you a read-only-link? Thanks in advance!

🤯🤯🤯 the webflow master

amazing

I love so much this approach ! wee need to make a massive live with aron in webflow channel , this trick is a BIGGEST GEM I ever seen ! i hope to see more in a live build in you channel. Thank You ! Want to see more on this way

This is so incredible ! Gamechanger !

I'm curious how this can be triggered only when elements are in view? I assume these all happen on page load?

Webflow king hits again!

right off the bat, things like the benefits of ccs vs javascript are stuff i know NOTHING about. i know it's impossible to cover EVERYTHING, but as someone who's comfortable with native webflow capabilities, I'd love to learn more about these niche details to take my abilities to the next level.

Alas, until webflow offers free plugins (apps) for ecommerce and memeberships I can't rationalize investing my time into learning this stuff..as much as I'd like to.

Tim!!! my mind has just blow :) thx:)

Amazing video, thanks Timonthy! Is there any way to trigger these animation with the page scroll?

This is awesome! 😮 Does it work with a scroll into view function? All your settings seem to load on page load.

Imagine Webflow Interaction 3.0 using this PLUS having a timeline view

I know have website performance is checked. I understand.

I see custom properties and I think Oh nice! But nothing really happens untill I see you make the magic happen! Thanks Timothy!

Why don't webflow do this?

Newbie question. What coding languange do I need to learn to know all these custom properties? Thanks

Does it work only on page load or there any way to make it work when element comes into view?

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

This is absolute gold! So sick of glitching webflow interactions

Cool ❤

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

this is so amazing!THX

This is genius! Any plans to add to Lumos?

Taking custom CSS to next level! Amazing content Timothy really enjoyed this ❤

Holy fuc**g sh*t Timothy, this is awesome. So insightful! and it’s impressive, how optimized your workflow is, thanks for sharing

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

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

ONE WORD: EPIC ⚡️

Hi Tim I have a question it’s kind of adjacent to animations. In Webflow I would like to have a parent like a card in a slider and on hover change the colour of the link text. But currently what seems to happen is when you set the parent Div block to hover and change the text colour it does not apply to the anchor tag at all. It completely ignores it. Do you have to do this with CSS only? Or is there another way? The parent div we are talking about is inside a native web slider. 🙏

Do the animations only start when entering the viewport or on page load? It would be super practical if they "wait" until you can see them.

Love this video Tim. Super powerful and simple. Going to try it out today!