Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ladybytez

How to remove scrolltrigger animation when we've scrolled past the section?

Go to solution Solved by GreenSock,

Recommended Posts

I managed to get the square to change colour on scroll to a specific section. What's the best way to get the square to revert colour when respective section is scrolled to? Do I have to do a scrolltrigger for each section?

See the Pen dyWKXKp by ladybytez (@ladybytez) on CodePen

Link to comment
Share on other sites

I think I figured this out! Leaving it here if anyone wanna improve / refer to this :) 

Link to comment
Share on other sites

Hi there! I decided to update the code and now I am stuck trying to change the square colour on the last section (section3) to another colour. Is it possible to do something like this with ScrollTrigger since we can't scroll anymore when we're on section 3?

 

section 1- pink square

section 2- white square

section 3- orange square

 

See the Pen dyWKXKp by ladybytez (@ladybytez) on CodePen

 

Link to comment
Share on other sites

  • Solution

This is how I would recommend doing it: 

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

 

That way, you can add as many sections as you want. Significantly less code.  You could even add the color as a data-attribute in the HTML instead of using an Array. 

 

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