Animate Page Color on Scroll in Webflow

[@conordolman1]

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

[@_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.

[@kaiinthewild]

This is my exact question too. I'm struggling to figure this out since I'm also using the latest Lumos update. Would love for this to work with data-theme!

[@kaiinthewild]

Came back to say I found Timothy's solution with Lumos! The video is titled "Lumos Color System" and he applies the same principle. Good luck with your project!

[@_pausinh]

@@kaiinthewild Thanks!!

[@tomsdesign_]

Amazing tutorial Timothy, thanks for sharing!

[@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?

[@davidschaer]

i need all of my braincells to perform at hyperlevel to follow along. t.ricks: no mercy for mouthbreathers

[@SocialboutMedia]

At least it's not just me.. good lord.. haha I love the guy but, he's flying 😂🖤 (I still can't quite figure it out yet and I've tried this on two different projects already) lol

[@davidschaer]

@@SocialboutMedia of course he tailored all his courses to his own framework. many hours passed before i realized that. maybe thats why its not working for you. i can't use his tutorials anyway - no custom code and no lumos

[@jo69123]

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

[@MichaelJohnBurns]

Always on point Tim. Thank you!

[@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!

[@GabrielLeFrancois]

thanks Timmy. Always helpful.

[@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.

[@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 ?

[@AndrewE8001]

This is amazing, thank you Timothy! 🤩

[@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!😊

[@AdamBradley-w5q]

Great video bro! american british spelling of colour had me stumped for a good 45 minutes as to why this wouldn't work

[@saraga94]

Great content man! Thanks alto

[@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.

[@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.

[@TomasYepes-do7ji]

What a leyend

[@vojtahasalik]

Hi Timothy, thanks for all the great stuff you do. I have a problem here with longer pages - sometimes the page spontaneously changes theme when scrolled (I suspect this has something to do with the page and images etc. not being fully loaded). But after you scroll all the way down, and you refresh the page, it works flawlessly. It's just the first experience that is a little too chaotic. Weird, maybe blame lazy loading?

[@timothyricks]

Hi, have you tried applying an aspect-ratio to each photo?

[@vojtahasalik]

@@timothyricks thanks for getting back to me Timothy, no, I haven't tried applying aspect-ratio to photos. Since the theme switches randomly in few very specific spots (I did check for random forgotten custom attributes), could defining aspect-ratio help?

[@vojtahasalik]

ugh, having 80+ uniquely sized images (scans of historical documents etc) on that page, I wonder if aspect-ratio is the way forward

[@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

[@davidnaftalin2128]

@@timothyricks Hi Timothy! Know this is an old video but I wondered how you might do this with the Lumos color variable system? I have my project set up with a dark and a light theme but the variables-color-scroll.js is requiring me to use the index number of my themes for my custom attribute trigger on the sections that I want the background color animation. I guess this would make custom attributes like invert not work, and also complicate having a dark/light toggle. Let me know if you have advice.

[@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.

[@72grey]

Hello Tim, This might be bit of a stupid question but how did you get the code inside the body tag? I've only seen an insert code before the body tag option. How can I access this?

[@timothyricks]

Hi, adding an embed into the page allows us to have css inside the body. That css can run without us having to publish the site. Here’s also a "Before closing body tag" code block in page settings and site settings, or a Head code block in the same places. But code added there only runs on the published site.

[@chadonielsmith]

Incredible! 🔥

[@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.

[@johnniefromwebflow]

This is great stuff!

[@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!

[@valdiszhvaginsh]

Thanks!

[@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 😇

[@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.

[@jensv8859]

love it

[@alpaca_studio]

Nice!

[@killabtw8185]

🔥

[@dimka_tregubov]

💪