Noob vs. Pro Webflow Interactions

0:17 Noob Card Hover State
3:40 Noob Looping Icons
5:37 Noob BG Color Change on Scroll
7:27 Pro Interaction Thought Process
8:17 Pro Card Hover State
11:52 Pro Looping Icons
14:12 Pro BG Color Change on Scroll
Watch part one of building this lander live at • 🔴 LIVE - Building a He...
Watch part two of building out this lander at • Part Two - Building a ...
Join my Webflow Wizards Community
/ timothyricks
Follow me on Instagram at / timricks
Get the cloneable for this project at webflow.grsm.io/noob-vs-pro
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

[@themanwhocando]

Thanks so much for another awesome video! Definitely going to use the on-scroll colour change, it's awesome 🙌🏻

[@mostwantedsol]

Hey Timothy, Man you're providing so much incredible value to folks, i'm learning Webflow so much faster now after watching and *attemping* to recreate a bunch of what you do in your videos! I got this colour-change scroll implemented as a surprise for my client, it looks damn epic! Can't wait to see their reaction :) You're making a huge difference to our lives - thanks dude!

[@timothyricks]

This is so awesome to hear! I'm glad the color change interaction worked for your client, and that these videos are helpful. Excited for the upcoming tutorials this year

[@itspraveensharma]

Very nice bro...I have a suggestion though, its always good to show in the beginning what is going to be the end result.

[@g__hz]

+1

[@thewebart]

Thank you Timothy!

[@akseltech]

infinite gratitude !! you're appreciated!

[@googlechromedurak3831]

thx so much. Your guides are amazing

[@jo69123]

Thank you for the dataset Timothy

[@ktoya..]

Love your channel

[@pauljohn3898]

Good job

[@Sergy_Kondrashin]

Thank you!!!

[@joergfrank]

so cool. you are a magician :)

[@AndresGutierrez-sz2oc]

Super!!

[@Vimalanvijay]

Love these tips! Really useful. Just a quick question, is it possible to trigger a webflow interaction using code? I thought of one way where the interaction is applied to a div and we "click" it using code wen we want it trigger it. But is there a better way? Thanks Tim! :)

[@timothyricks]

Thanks so much! Yeah, I usually trigger them with click through custom code. I think that’s the best way WebFlow gives us access to.

[@OliRancidTen]

How do card interactions like this work on mobile? Does hover change to tap or scroll?

[@roeldekkers7451]

Great tutorial! i've only got one question: what do you do with the visibilty of the is---dark div's, because i can't seem to find them back in the project file?

[@timothyricks]

Thank you! I deleted those divs because they’re only used to create the global classes. They can be accessed again by adding any div to the page and giving it one of those classes.

[@RosinaP]

Hey! Thanks for the video. Can you make one to explain more I’m detail how do you build a responsive website? Cheers

[@timothyricks]

Happy to help! This tutorial covers step by step of building a responsive site in WebFlow. kzbin.info/www/bejne/bmLZq5SFaJVqaJI

[@jimsonpalace4389]

Hi Tim, love your tutorials, just wanted to tell you to buy a spider for your microphone. I use good quality speakers and theres tapping infra sounds due to you typing on your keyboard or foot maybe i dunno but it's disturbing.

[@vkatasonov]

And how do you hide divs that you applied to the body?

[@mehbuburrahman4128]

Do you have any short tutorial for passing underline hover? I mean While hovering out the underline will move left to right...

[@erickmuller]

Random question. Do you change the card interaction for mobile, since there is no hovering? If so, in what way do you change it? Just make it expand on click?

[@timothyricks]

For an accordion, expanding on click would be perfect. Since there’s nothing visually in this card to indicate you can tap to open, I’d just leave it open on mobile to give users quicker access to the button. If you’d like, feel free to check out the cloneable in the video description to see how mobile was handled.

[@moses5407]

Just a comment: You're usually very clear and give context for the tips. In this case, you dive right into detail without giving a framework for what's good and what's bad and then going into the details. IMHO, hard to follow at the ripping speed without context.

[@easyenglishpro]

ur amazing

[@ass45sin0]

Would you be able to do a video on getting assets like photos & illustrations for sites? Thanks!

[@timothyricks]

Thanks for the great tutorial idea!

[@ass45sin0]

@@timothyricks thanks for making awesome Webflow content. I’m just starting out and your tutorials are invaluable.

[@SALAMANDA435]

@@timothyricks even better yet how to correctly optimize images and assets for webflow

[@peterpbrown]

Hey Timothy great channel, thanks for all the videos. Helping alot. I was wondering if you could help. What's the best way to have a video playing automatically but when clicked you also have the option to play it with sound and make fullscreen.

[@ickorling7328]

Great studio, just turn down the pink LED by about half!

[@walizenlegrand9040]

I'm new to webflow where should I start?

[@Frank004]

Gold

[@matthew9536]

The audio for this video is way too low! good content though

[@AntonyNorthcutt]

Maybe just a tad slower perhaps (pretty pleaseeee)

[@trucker1278]

First