Jump to content
Search Community

tweening background color with ScrollTrigger

Richard1604 test
Moderator Tag

Recommended Posts

i've been admiring another  award winning site https://elephant.is/ and managed to get a fairly decent transition using ScrollToPlugin (once I solved the state issue by wrapping the code in a javascript document.onload function).

 

ScrollTrigger seems a bit less successful.

There is an problem reversing the sequence going from red (section 3) back to purple (section 2) and the general "feel" isn't quite right. 

Not sure whether I should try using a "smooth scroll" so advice and feedback welcome please.

See the Pen zYqKeJb by rb1604 (@rb1604) on CodePen

Link to comment
Share on other sites

Hey Richard. I'm having trouble understanding exactly 1) what effect from that site you're trying to recreate (can you please be more specific and perhaps include a screenshot of the relevant section?) and 2) what the issue is in your pen. Can you try to be more clear what it is you're wanting our help with? 

Link to comment
Share on other sites

Hi Zach, thanks for getting back, I will try to explain it more clearly.

elephant.is has a very nice background transition effect which I would describe as being ScrollTrigger-like: the background colour changes with each section and appears to be triggered by the end of the image in the previous section coming off the bottom of the screen.

I have coded this in the example and as you scroll down the page it works ok with a transition from grey-> purple-> red.

The issue comes when you scroll back up to the top of the screen in the at the expected transition from red->purple is not triggered when expected or goes to grey without a proper transition via purple.

Hope this helps,

Richard.

Link to comment
Share on other sites

Evidently one of my extensions is causing issues on that page - when I open it in incognito I can see the effect that you're describing but in normal Chrome I can't 🤔  Not sure what's going on there. Thanks for the description.

 

I would approach this situation differently. Instead of creating a bunch of tweens and attaching ScrollTriggers to them, I'd use the callbacks that ScrollTrigger gives you to create new tweens. That way if a user scrolls quickly through the page you'll never have an issue because the tweens can use the current value at that time as the starting value.

See the Pen ExKNKNe?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi Zach,

I've updated my pen (above) to include your expert changes and taken out the extraneous nonsense and the final data-scroll which is unrequired.

It is now working perfectly except that the very first transition is accompanied by a FOUC.

I have tried various combinations of visibility and autoAlpha (on the body element) to no avail and even replaced the second colour to white in the hope that the flash is lost but to no avail. 

Ideally it would be fantastic if I can make that first transition smooth but I am now at  a loss for further suggestions and wonder if there is a solution.

 

Link to comment
Share on other sites

thanks zach, yes that post is the basis of what I have been working on to remove the FOUC.

Updated codepen here:

 

See the Pen WNwogem by rb1604 (@rb1604) on CodePen

 

the animation is wrapped in a window.addEventListener("load") function and I added  visibility: hidden to the body element and used autoAlpha on the tween..

it now animates smoothly from beginning to the end of the page and back again until it gets back to the first section where there is a *big flash* on the transition from indigo back to the first section.

 

Link to comment
Share on other sites

GSAP doesn't support the color names that you are using. Switch them out for their hex, RGB, or HSL values and it will work. 

 

Side note: I highly recommend the "tidy" button for your code sections. It helps a lot with readability and will aid you debugging, like figuring out where your HTML is broken.

  • Like 2
Link to comment
Share on other sites

  • 2 years later...

Hey guys, I'm a definite beginner and I was wondering how to actually source this part of GSAP. I see that you used gsap.registerPlugin(ScrollTrigger); to get the GSAP to run there, but it's not working for me still. How do I get the GSAP to run on my HTML document?

Link to comment
Share on other sites

Hi @jeek90 welcome to the forum!

 

I advise you to start your own topic instead of opening up a topic from 2 years ago. 

 

We have a really handy pen on Codepen that loads all the GSAP plugins where you can just check them all out and use them freely (even the paid once!). See the JS tab settings. 

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you want to work locally, we have a really handy installation guide over at https://greensock.com/docs/v3/Installation with even a visual installer helper! If you're just testing things out I advise you to use the CDN tab and just check the plugins you want to use, here is a selection with the core and ScrollTrigger selected https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger, just paste this somewhere in your HTML and they will.

 

If you're just starting out Codepen is a great place for that! No weird gotchas, just jump in to the code directly and you can share everything you make with anyone! Hope it helps and happy tweening! 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...