Jump to content


ScrollTriger Pin Change Background

Go to solution Solved by mvaneijgen,

Recommended Posts

Hello, the problem I'm facing is that when I scroll pin, the top part gets darker and smaller slowly. I made it smaller, but I couldn't center the beginning in the darkening part, you will see other markers. When I do " start: "center center , end: center center"," the markers do not appear.


When the site is first opened, it is not actually white, but actually a very slightly dark color. This should not happen with white > and then > dark tone with scroll... I would appreciate it if you could help.


I am sharing the test link I made in this project.




See the Pen wvXErpo by sukruemanet (@sukruemanet) on CodePen

Link to comment
Share on other sites

Can you maybe make a minimal demo with just the part you're struggling with? I can't make heads or tails of this pen. There are eight ScrollTriggers on this page and I can't figure out which one is doing what. Having a reduced test case with just the issue really help us help you. 


Also keep in mind that best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

Link to comment
Share on other sites

I'm still not completely sure what should happen, but I've modified your pen a bit. Personally I like to always start with a timeline when working with ScrollTrigger, even if it is just a simple animation. This way I can test the animation and the ScrollTrigger independent from each other and when developing I can just remove ScrollTrigger all together and focus on my animations at first. 


There where some margins in your CSS that where trowing off the markers within ScrollTrigger, so I have disabled them. I had no idea what the .forEach() loop was doing, so I disabled that for now.


I've add the ScrollTrigger trigger to the .content element and have moved the triggers to the top of the page, minus some spacing, so now when the top of the .content elements hit the top of the page (+=500px) the .start-bg will change color. I've made the page background the dark color by default, so that the page doesn't flash white when it is loaded.


In your example the triggers where really close to each other because they all started in the center, so there was no time to animate, as soon as it hit the trigger it was already done, also the margin I'd disabled was making it so your pinned container would stop pinning before the .content could hit its trigger. 


Hope it helps and happy tweening! 


See the Pen XWYPqYR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen


If this is not what you're looking for could you maybe explain your issue a bit like the example bellow:

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • Like 2
Link to comment
Share on other sites

@mvaneijgen Thanks you, actually partially yes, but I want the color change when the scroll movement starts, not at a certain point. And I don't quite understand why it is based on the "content" class. Doesn't it have an effect if the scroll moves simultaneously with the pin?

Link to comment
Share on other sites



I'm having a few issues trying to get exactly what you want. Is something like this?:

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


If not please be as specific as you can about what issue you are having and what you need to happen.


Happy Tweening!

  • Like 1
Link to comment
Share on other sites

  • Solution
13 hours ago, Sukru said:

And I don't quite understand why it is based on the "content"

Ah, I see. I was not sure what your first ScrollTrigger was doing, I thought maybe you wanted something else to happen also, That is why I hooked it to the content, but now I understand you more clearly. If what @Rodrigo has made is what you want. You can even simplify it further and this is why I personally always like to start with a timeline instead of having separate ScrollTrigger instances on the page. 


There are no rules on where you should put your trigger element of where to have it start or end, this is something you'll have to tweak to find what works for your animation. (The only thing is, never animate the trigger element, but that is not the case here)


I've merged your two ScrollTriggers and modified @Rodrigo's pen, to have scrub enabled, so it changes color based on the visitors scroll and have moved the end trigger a bit down, to have the "header" text stick at the last second (no idea if you want that, but I found it look good and shows you what some little tweaks can do to your animation). Hope it helps and happy tweening! 


Be sure to check the video on the docs if you want to learn more, it really walks you through all the possibilities and really kickstarts your learning. https://greensock.com/docs/v3/Plugins/ScrollTrigger 


See the Pen KKeGPry?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
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.