Get the cloneable for this project (affiliate link) webflow.grsm.io/tricks?path=t... Join my Webflow Wizards Community / timothyricks
Пікірлер: 102
@timothyricks3 ай бұрын
I added a second page to the cloneable for triggering these on scroll with javascript. Get the cloneable for this project (affiliate link) webflow.grsm.io/tricks?path=tricks-css-animation
@KRK_Rocks3 ай бұрын
Hi Timothy, I am new to Webflow. Is there a path I can follow on your Patreon link that can take me from beginner to advanced?
@timothyricks3 ай бұрын
@@KRK_Rocks Oh, good question! I don’t have anything like that currently
@user-bs4ck1cn4l3 ай бұрын
Is there a noticeable difference in performance using your method here vs using one of webflows premade animations (like slide) and setting it to trigger on scroll?
@KRK_Rocks3 ай бұрын
@@timothyricks Do you have anything in the works or would you consider making a sequential playlist for beginners?
@iamsomewhere3 ай бұрын
@@user-bs4ck1cn4l Yes, because css animations are handled directly by the GPU instead of potentially being bottlenecked by the single-thread that JavaScript has to run everything through.
@tioass3 ай бұрын
If the Tim Awards existed, this would be the video of the year! Congratulations!
@timothyricks3 ай бұрын
Thank you so much! I'm really glad this helps
@melimaislau14373 ай бұрын
It’s not helping, it is life changing
@lifipp3 ай бұрын
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 KZbin ever! 😃
@timothyricks3 ай бұрын
Haha, perfect timing! I saw your comment right when I finished recording. 😂
@james83563 ай бұрын
Your channel is like the Hogwarts of Webflow! Always amazing content!
@qiaoya663 ай бұрын
Awesome. It feels like the webflow I use and the webflow you use are not the same thing.
@mindfulmilligan3 ай бұрын
Tim!! You are an absolute wizard.. true icon and I look up to you man. This was very helpful. Good bless!
@timothyricks3 ай бұрын
Thank you so much for the kind words! God bless!
@AurelienSchibli3 ай бұрын
This is exactly what I was looking for. After finsweet did a livestream on css animations I was super curious.
@HarshitAgrawalOfficial3 ай бұрын
Taking custom CSS to next level! Amazing content Timothy really enjoyed this ❤
@timothyricks3 ай бұрын
Thanks so much, Harshit!
@austinandriese3 ай бұрын
Love this video Tim. Super powerful and simple. Going to try it out today!
@timothyricks3 ай бұрын
Thank you, Austin! I really appreciate you requesting this one!
@timdaff2 ай бұрын
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!
@timothyricks2 ай бұрын
An :in-viewport native to css would be awesome! CSS scroll() is coming but not supported in Safari or Firefox yet. caniuse.com/?search=scroll() I would see :focus-within being used alongside :hover to maybe create a css-only nav menu.
@SepulvedaCarlos3 ай бұрын
Just shipped in time !! I was having some marquee issues! I love you man! 😊
@totallyempty3 ай бұрын
This is absolute gold! So sick of glitching webflow interactions
@FloNocode3 ай бұрын
This is so incredible ! Gamechanger !
@johanvanwambeke7233 ай бұрын
I see custom properties and I think Oh nice! But nothing really happens untill I see you make the magic happen! Thanks Timothy!
@timothyricks3 ай бұрын
I’m still slowly discovering the different use cases also. 😂 I’m really glad this helps!
@benvsantos3 ай бұрын
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.
@timothyricks3 ай бұрын
Thank you so much for the kind words! I'm really glad this is helping :)
@mucmuc38493 ай бұрын
this is so amazing!THX
@jo691233 ай бұрын
Holy fuc**g sh*t Timothy, this is awesome. So insightful! and it’s impressive, how optimized your workflow is, thanks for sharing
@FloNocode3 ай бұрын
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
@hezychasta3 ай бұрын
Tim!!! my mind has just blow :) thx:)
@timothyricks3 ай бұрын
Haha! 😄Thanks so much
@hoaithuong80883 ай бұрын
OMG I love this video so much !!!!!
@turaluix3 ай бұрын
Webflow king hits again!
@timothyricks3 ай бұрын
Thank you! So glad this helps
@coreymoen3 ай бұрын
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?!
@timothyricks3 ай бұрын
Thank you, Corey! Great idea!
@rehankhurshid3 ай бұрын
ONE WORD: EPIC ⚡️
@SergiyHavriluk8 күн бұрын
Realy Cool!
@zarkodimitric63392 ай бұрын
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?
@divonci-worldАй бұрын
MY DARG TIMOTHY BLUDCLART RICKS - effin GEEZA!!!
@joergfrank3 ай бұрын
amazing
@samueluebersax85283 ай бұрын
This is awesome! 😮 Does it work with a scroll into view function? All your settings seem to load on page load.
@timothyricks3 ай бұрын
Thank you! Yes, it can. I just added a second page to the cloneable showing how the css animations can be triggered on scroll with JavaScript.
@denniedarko3 ай бұрын
Cool ❤
@bilalwho34903 ай бұрын
subscribed and liked and commented
@shivarathrianil3 ай бұрын
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.
@JulianOrtler3 ай бұрын
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!
@filippovaragnolodesign3 ай бұрын
Amazing video, thanks Timonthy! Is there any way to trigger these animation with the page scroll?
@timothyricks3 ай бұрын
Thank you! Yes, there is. I just added a second page to the cloneable showing how the css animations can be triggered on scroll with JavaScript.
@filippovaragnolodesign3 ай бұрын
Amazing! Thanks!!!@@timothyricks
@andresochoa30402 ай бұрын
Hey @timothyricks, how can I make the same split out animation apply to text when I hover over it?
@stewber3 ай бұрын
This is genius! Any plans to add to Lumos?
@timothyricks3 ай бұрын
Thank you! I’m not sure yet, but possibly! I could see an optional cdn link working really well like Corey mentioned.
@heyderekj3 ай бұрын
Imagine Webflow Interaction 3.0 using this PLUS having a timeline view
@timothyricks3 ай бұрын
That would be awesome!
@afiuza17183 ай бұрын
🤯🤯🤯 the webflow master
@khalidbirawi8989Ай бұрын
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
@ettkanal3 ай бұрын
Great video! But will this really reduce the size of the huge webflow.js file?
@timothyricks3 ай бұрын
Yes, for sure! Every interaction is included in the Webflow JS file even if it’s not used on that page. The same interactions can often be done in css with significantly less lines of code
@iamsomewhere3 ай бұрын
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).
@timothyricks3 ай бұрын
Thank you! I actually added a second page to the cloneable already with code and documentation for using intersection observer through data attributes. It definitely seems like it can replace GSAP and Webflow IX in a lot of cases. I can’t wait for the native css scroll to be better supported
@iamsomewhere3 ай бұрын
@@timothyricks I just saw it and actually have an implementation similar, but I think even more streamlined if you’re interested in seeing how I handled this.
@weezyf7753 ай бұрын
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.
@vierlessDE3 ай бұрын
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.
@timothyricks3 ай бұрын
They all start on page load in this case. For now, triggering them on scroll requires JS until css scroll gets decent browser support.
@CrewdFrost2 ай бұрын
how do I make the css animations only start animating when fully in viewport? anyone??
@davidgoult86943 ай бұрын
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. 🙏
@timothyricks3 ай бұрын
Hi, yes that should be possible with css only. .your-card:hover .child-text {color: red;}
@davidgoult86943 ай бұрын
@@timothyricks thanks so much for the reply
@pilot3413 ай бұрын
I know have website performance is checked. I understand.
@zenitwal3 ай бұрын
Does it work only on page load or there any way to make it work when element comes into view?
@zenitwal3 ай бұрын
Found the answer in the comments
@jsphbngrnd88473 ай бұрын
I'm curious how this can be triggered only when elements are in view? I assume these all happen on page load?
@timothyricks3 ай бұрын
Good question! I just added a second page to the cloneable showing how the css animations can be triggered on scroll with JavaScript.
@tioass3 ай бұрын
Is it possible to run the animations when scrolling?
@timothyricks3 ай бұрын
It is, but it's not supported in Safari or Firefox yet. caniuse.com/?search=scroll()
@gargulec60853 ай бұрын
You can use jquery to create while scrolling animations. If you want to create scroll into view animation you can check with jquery whether an element entered the viewport, and once it does add class with assigned animation made in CSS :)
@appleestrada68103 ай бұрын
Newbie question. What coding languange do I need to learn to know all these custom properties? Thanks
@timothyricks3 ай бұрын
Hi, just css. W3 Schools is one of my favorite resources. Here’s a list of all the css animation properties and values. www.w3schools.com/css/css3_animations.asp
@appleestrada68103 ай бұрын
@@timothyricks Appreciate it! Thanks Tim!
@jo691233 ай бұрын
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
@interveste8842 ай бұрын
Does not work here either. It's back to ScrollTrigger and GSAP for me then.
@gamalieljustinflores51093 ай бұрын
Are you able to add these to CMS items?
@timothyricks3 ай бұрын
Yes, the staggering and everything still works on collection items.
@gamalieljustinflores51093 ай бұрын
@@timothyricks legendddddd
@gamalieljustinflores51093 ай бұрын
Would you also be able to do this on other elements below the hero? Like when you scroll in view some sections?
@TheKnowledgeToolbox3 ай бұрын
My transform: translateY is not working at all any Ideas?
@timothyricks3 ай бұрын
If the element you’re animating is set to inline, try setting it to inline block instead. Otherwise, check for any missing punctuation or errors in the code.
@JaredK0003 ай бұрын
@@timothyricks And it was punctuation.. Thank you for taking time to answer me. I want to use this so bad but browsers won’t let me.😢
@ihajo2 ай бұрын
ok I guess I have to back to learning CSS again :(
@asheemshrestha3 ай бұрын
It would be awesome if someone could come up with converter plugin to convert js animation to css animation. I would pay for it.
@timothyricks3 ай бұрын
That would be super useful
@davidfitcher29533 ай бұрын
Why don't webflow do this?
@timothyricks3 ай бұрын
I’d definitely love to see Webflow revamp their interactions