Animate Page Color on Scroll in Webflow

Get the cloneable for this project (affiliate link)
webflow.grsm.io/tricks?path=v...
Project code
github.com/timothydesign/scri...
Join my Webflow Wizards Community
/ timothyricks

[@conordolman1]

Fantastic tutorail Timothy! Such an effective way to deal with the scroll animation.

[@tomsdesign_]

Amazing tutorial Timothy, thanks for sharing!

[@MichaelJohnBurns]

Always on point Tim. Thank you!

[@AndrewE8001]

This is amazing, thank you Timothy! 🤩

[@GabrielLeFrancois]

thanks Timmy. Always helpful.

[@saraga94]

Great content man! Thanks alto

[@johnniegomezalzaga4667]

This is great stuff!

[@chadonielsmith]

Incredible! 🔥

[@jo69123]

Timothy, could you talk about your tips on how to improve a website’s loading performance?

[@valdiszhvaginsh]

Thanks!

[@jensv8859]

love it

[@alpaca_studio]

Nice!

[@andresesquivel342]

Hey Timothy, love this. Been struggling to animate this manually so this is really a game changer. How would you structure the HTML embed for horizontal scrolling? I tried it but because it’s animating considering a vertical scroll, it doesnt look that good.

[@SocialboutMedia]

I really appreciate this one Tim.. thanks eh. The attributes/value shenanigans throw me off sometimes 😅

[@_pausinh]

Hi Timothy! Thanks for your videos!! I'm building a site using Lumos last update, for dark and light modes using [data-theme: light] or dark, how do I apply this animation using that? I'm a bit confused at the moment.

[@Diego_Cabrera]

I recently discovered your CSS framework. Do you plan to link Webflow variables to the framework? Also please keep updating it/maintaining it, its awesome. Coming from tailwind, this framework is what has made the most sense to me.

[@timothyricks]

Thank you! Yes, I’m planning to connect it to native variables. Just waiting on a few updates from Webflow

[@Diego_Cabrera]

@@timothyricks Great to hear!

[@thetestgarden]

@@timothyricks had the same question. thank you so much for your work.

[@felipedeamaral]

@@timothyricks 🎯

[@VetlyApp]

@@timothyricksare these updates that are planned?

[@MrPellican]

I always love your quick tutorials and clean presentation of the steps needed to achieve the result! Thank you so much! However, I have a question: I'm a no-code web designer, meaning I have a good understanding of HTML/CSS but not deep enough like a developer, and I know nothing of Javascript. And when I use custom code, I always feel like I'm losing control and not delivering something truly "mine," you know? Kind of an impostor syndrome, perhaps.... Would you recommend that I learn more about coding? I don't even know where to begin... Sorry for the long comment. As I said, thank you for posting such valuable content. Cheers from Brazil! ;)

[@timothyricks]

Thank you for the kind words and good question! If you’ve mastered the fundamentals of Webflow, learning CSS and JavaScript is a great next step. ChatGTP can help you learn as you go since it can explain anything step by step. Having full control over every part of a project is a good desire, but I focus more on finding the best solution regardless of who built it. I have almost no knowledge of the inner workings of scripts like Swiper.js, Lenis Smooth Scroll, or GSAP. But I rely on them weekly because it’s a faster and better result than trying to build those solutions myself.

[@MrPellican]

@@timothyricks thank you so much for the reply, Tim! I got more confident knowing how you see and use the tools you mentioned; I guess trying to control everything can get in the way, and using what's already been built (and works) is a more intelligent use of our time. thanks again!

[@killabtw8185]

🔥

[@Sam_Barnes]

Is there any easy way to make this transition progressive ? Instead of going from light to dark based on a section, it would follow a percentage of the page scrolled, like at 50% of the page it would be a 50% mix between light and dark ?

[@user-hr8ld6id3k]

Having trouble getting the animation to work across all the different mobile versions! Help!

[@sebdiable]

Hey Timothy! As usual, amazing job. This is much better than fighiting with those scrolling animations. However, I've noticed when implementing that the smoothness of the transition when scrolling down is not the same when scrolling up. What could be the reason? I've played a bit with the ease and duration functions but I've had no luck identifying the cause. Thanks!

[@reecewatt4212]

Second this. My issue seems to be specific to the sections where my videos appear. The transition is instant down the page but smooth back up the page.

[@jellyholler6197]

Thanks for all that you do, Timothy! I have a quick question-should we be able to add additional variables to the embed code, like "--color--paragraph: var(--light--paragraph);" and "--color--paragraph: var(--dark--paragraph);" for themes 1 and 2, respectively? I've done this to no avail...

[@timothyricks]

Sure thing! Yes, it's totally possible! Here's an example. variables-color-scroll-70c5397714abbb3d.webflow.io/ preview.webflow.com/preview/variables-color-scroll-70c5397714abbb3d?preview=4ea16faab391bc272977fd14b20bb414&workflow=preview

[@baraniraja8372]

I think this can be done even by following the scroll into page view animations right ? What’s your thought on this. By adjusting background colour at each percentages of scroll levels.

[@timothyricks]

These color interactions work best when played at a set duration instead of being scrubbed by the scroll bar. When using Webflow's While Scrolling interaction, the user could stop scrolling halfway between the start and end points and get stuck on a weird color. Webflow's Scroll Into View interaction doesn't work for this either because the scroll out of view state applies to both directions. Meaning scrolling down into section 3 also plays the scroll out of view created for going from section 2 back to section 1.

[@dimka_tregubov]

💪

[@lukasschorn]

Hi Tim! Thanks for another great resource! ❣I have one question: How would I implement this color change in Lumos 2.0? Do I have to re-create the all the variables like you did in this video, or is there a better more efficient way? Please let me know, thank you so much! 🙏

[@timothyricks]

Thank you! For something simple / plug & play, I would recreate the variables from this video and use the script in this video. There’s also another script in this other video for animating the default Lumos themes with GSAP. kzbin.info/www/bejne/iZfLm5WppqqEd5Isi=EOHnhkeDhtRFUrb-

[@lukasschorn]

Thank you@@timothyricks! As I already had the Lumos 2.0 set-up running correctly, I just had to add the script from this video, and it worked perfectly fine! 💪Again, thanks a lot, GOAT! Keep doing such a great job, we all love it!😊

[@FernandoComet]

Interesting, what do you think is better: Doing it with variables and attributes or doing it with GSAP Scrolltrigger?

[@timothyricks]

Well this is using GSAP ScrollTrigger to animate the variable values on the body element. Using variables is best for this type of interaction since we only have to animate the body instead of every element on the page.

[@alexhornak8129]

Anyone running into an issue where the color change animation is triggering to soon on mobile but works fine on desktop?

[@timothyricks]

Hi Alex, do all of your images have aspect ratios applied? If not, sometimes the images loading in can offset the scroll start positions

[@alexhornak8129]

@@timothyricks thanks! It ended up being something similar where I had a section with a bunch of images offset on yPercent and animating up with scroll trigger so on load that section was much smaller than it should be after the animation happens throwing everything off.

[@wmcreed]

Thank you so much for this! I was wondering if I could rename the themes to "light", "dark" vs "1", "2", etc. but it seems that breaks the code?

[@wmcreed]

One other question if you happen to see this.. is there any way to preview the correct colors in the designer? Having a hard time designing in a single theme vs seeing how things will actually look.

[@timothyricks]

@@wmcreed Hi, so glad this helps! No, the theme values aren't renameable. The code relies on the numbers to get the correct theme. To preview a different theme in the designer, we can give the body an element-theme="1" or element-theme="2" attribute. Those attributes can also be applied to individual sections if a section has a background color and font color set.

[@wmcreed]

@@timothyricks ok so the "animate-body-to" will overwrite the "element-theme" setting on the published page? Or do I need to remove the element-theme attribute before publishing?

[@timothyricks]

@@wmcreed The element-theme would need to be removed before publishing

[@wmcreed]

@@timothyricks thanks for the reply. Keep doin the Lord's work out here.

[@petigubi]

It's great, but not reliable on my website. The color sometimes changes too soon. If I do a refresh, it gets fixed. I don't know why...:/

[@timothyricks]

Do all of your images have aspect ratios defined? GSAP calculates the page height before the images load

[@petigubi]

@@timothyricks Ah, I didn't know that. Thank you very much for the reply!

[@maggotinc]

Hello Tim, your Technique is awesome and simple explained, I like it a lot! However: For me ocasionally the animation ist not working. it just animates back to the other state without trigger. I can't wrap my head around, how this could happen. Any chance to discuss my problem with you? 🙂

[@timothyricks]

Thank you! I'm sorry you're running into this issue. We need to make sure all images have aspect ratios applied. Otherwise when the images load in, they change the page height and offset the trigger positions. It can make things feel like the interactions aren't triggering in the right place or are triggering randomly.

[@maggotinc]

Hello Timothy, thanks for the fast reply. I checked for Issues with pictures. Unfortunately thats not it. Can you point me to some other place I could get help? Since you have offered your own script, I probably won't get help at green-socks forum.@@timothyricks

[@sphered73]

@@timothyricks I had a similar issue, especially after scrolling the whole page back and forth very fast. I found the solution, and it’s not about the image aspect ratio. Adding ‘preventOverlaps: true’ and ‘fastScrollEnd: true’ to ScrollTrigger settings made the whole thing work like a charm 😇