Animate Page Color on Scroll in Webflow

แชร์
ฝัง

ความคิดเห็น • 55

  • @conordolman1
    @conordolman1 5 หลายเดือนก่อน +1

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

  • @tomsdesign_
    @tomsdesign_ 7 หลายเดือนก่อน +1

    Amazing tutorial Timothy, thanks for sharing!

  • @MichaelJohnBurns
    @MichaelJohnBurns 7 หลายเดือนก่อน +1

    Always on point Tim. Thank you!

  • @AndrewE8001
    @AndrewE8001 7 หลายเดือนก่อน

    This is amazing, thank you Timothy! 🤩

  • @GabrielLeFrancois
    @GabrielLeFrancois 7 หลายเดือนก่อน +1

    thanks Timmy. Always helpful.

  • @chadonielsmith
    @chadonielsmith 7 หลายเดือนก่อน +1

    Incredible! 🔥

  • @saraga94
    @saraga94 3 หลายเดือนก่อน +1

    Great content man!
    Thanks alto

  • @johnniegomezalzaga4667
    @johnniegomezalzaga4667 7 หลายเดือนก่อน

    This is great stuff!

  • @valdiszhvaginsh
    @valdiszhvaginsh 7 หลายเดือนก่อน +1

    Thanks!

  • @jo69123
    @jo69123 7 หลายเดือนก่อน +1

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

  • @jensv8859
    @jensv8859 7 หลายเดือนก่อน +1

    love it

  • @Diego_Cabrera
    @Diego_Cabrera 7 หลายเดือนก่อน +10

    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
      @timothyricks  7 หลายเดือนก่อน +9

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

    • @Diego_Cabrera
      @Diego_Cabrera 7 หลายเดือนก่อน +2

      @@timothyricks Great to hear!

    • @thetestgarden
      @thetestgarden 7 หลายเดือนก่อน +1

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

    • @felipedeamaral
      @felipedeamaral 7 หลายเดือนก่อน

      @@timothyricks 🎯

    • @VetlyApp
      @VetlyApp 7 หลายเดือนก่อน

      @@timothyricksare these updates that are planned?

  • @_pausinh
    @_pausinh 2 หลายเดือนก่อน +1

    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.

  • @alpaca_studio
    @alpaca_studio 7 หลายเดือนก่อน +1

    Nice!

  • @andresesquivel342
    @andresesquivel342 21 วันที่ผ่านมา

    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.

  • @MrPellican
    @MrPellican 7 หลายเดือนก่อน +5

    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
      @timothyricks  7 หลายเดือนก่อน +8

      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
      @MrPellican 7 หลายเดือนก่อน

      @@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
    @killabtw8185 7 หลายเดือนก่อน +1

    🔥

  • @SocialboutMedia
    @SocialboutMedia 6 หลายเดือนก่อน

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

  • @user-hr8ld6id3k
    @user-hr8ld6id3k 5 หลายเดือนก่อน

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

  • @Sam_Barnes
    @Sam_Barnes 4 หลายเดือนก่อน

    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 ?

  • @dimka_tregubov
    @dimka_tregubov 7 หลายเดือนก่อน +1

    💪

  • @baraniraja8372
    @baraniraja8372 7 หลายเดือนก่อน

    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
      @timothyricks  7 หลายเดือนก่อน +1

      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.

  • @sebdiable
    @sebdiable 6 หลายเดือนก่อน

    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
      @reecewatt4212 5 หลายเดือนก่อน

      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.

  • @lukasschorn
    @lukasschorn 5 หลายเดือนก่อน

    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
      @timothyricks  4 หลายเดือนก่อน

      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. th-cam.com/video/SfhjbsqEQA0/w-d-xo.htmlsi=EOHnhkeDhtRFUrb-

    • @lukasschorn
      @lukasschorn 4 หลายเดือนก่อน

      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
    @FernandoComet 7 หลายเดือนก่อน

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

    • @timothyricks
      @timothyricks  7 หลายเดือนก่อน +3

      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.

  • @jellyholler6197
    @jellyholler6197 6 หลายเดือนก่อน

    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
      @timothyricks  6 หลายเดือนก่อน

      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

  • @wmcreed
    @wmcreed 6 หลายเดือนก่อน

    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
      @wmcreed 6 หลายเดือนก่อน

      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
      @timothyricks  6 หลายเดือนก่อน

      @@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
      @wmcreed 6 หลายเดือนก่อน

      @@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
      @timothyricks  6 หลายเดือนก่อน

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

    • @wmcreed
      @wmcreed 6 หลายเดือนก่อน

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

  • @alexhornak8129
    @alexhornak8129 6 หลายเดือนก่อน

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

    • @timothyricks
      @timothyricks  6 หลายเดือนก่อน

      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
      @alexhornak8129 6 หลายเดือนก่อน

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

  • @maggotinc
    @maggotinc 7 หลายเดือนก่อน

    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
      @timothyricks  7 หลายเดือนก่อน +2

      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
      @maggotinc 7 หลายเดือนก่อน

      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
      @sphered73 2 หลายเดือนก่อน

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

  • @petigubi
    @petigubi 5 หลายเดือนก่อน

    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
      @timothyricks  5 หลายเดือนก่อน

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

    • @petigubi
      @petigubi 5 หลายเดือนก่อน

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