Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Rinku Samanta

Background

Recommended Posts

Hello I would like to create a animation where there are three section on a main container. Now whenever each section enter the viewport I would like to transition the background color of main container. For example when section 1 enter background color for main container is red, for section 2 it is rebecca and for section 3 it will be aqua. How should I implement this using scroll triggers? The  reference for this animation can be found on https://www.yalantis.com website.

See the Pen YzqxXda?__cf_chl_jschl_tk__=d37136b939b9c9f3f6435b6933ecb2a0ca843436-1598862308-0-AdKYFHiy0NSALqIrEa1AtTeHPeezUrzgYJahcJQWRDAYVX7T1W5wJLHPZxuUIN7UfMOPGn6oGDRg0tzkgSrOLHObsJyN34a3uda6kHSfLBLyYxzYbdTY6OifKHvsof3QjCS8fiGK5gh by rinkusam12 (@rinkusam12) on CodePen

Link to comment
Share on other sites

Hi Rinku,

that's a very interesting reference site. I think that you might be interested in a recent post that I made on a similar question

 

 

  • Like 3
Link to comment
Share on other sites

2 minutes ago, mikel said:

Hey @Rinku Samanta,

 

Welcome to the GreenSock Forum.

 

How about this option?

 

 

 

 

Happy tweening ...

Mikel

 

Hi Mikel, this option is exactly what I was looking for but I want to smooth out the color transition effect. Right now its abruptly changes from red to blue and blue to aqua. I think scrub might help in this but I would like to know whats your take on this.

Link to comment
Share on other sites

Hey @Rinku Samanta,

 

You could use

 

onEnter: () => gsap.to('main', {backgroundColor:color}), 

 

  • Like 3
Link to comment
Share on other sites

19 minutes ago, Richard1604 said:

Hi Rinku,

that's a very interesting reference site. I think that you might be interested in a recent post that I made on a similar question

 

 

Hi Richard, Thank you very much for the discussion reference. It is exactly what I am trying to achieve right now.

  • Like 1
Link to comment
Share on other sites

  • 10 months later...

Hey @mikel, I can't get this to work properly:

 

See the Pen dyWRELw by jillianadriana (@jillianadriana) on CodePen

 

onEnter works but it seems that the others do not. I have used this code before and it worked great but suddenly it isn't working. In my external code editor, the code shows that something isn't right but I can't figure out what's going on.

 

Do you have any insight?

 

Screen Shot 2021-07-22 at 6.27.10 PM.png

Link to comment
Share on other sites

I'm not sure exactly what you're asking, but those callbacks are indeed being called properly. You can add a console.log() to verify. I wonder if you're just using the wrong color. At every point, you're animating to exactly the same color, so it would make sense that you don't notice anything changing after the first time. 

Link to comment
Share on other sites

10 hours ago, GreenSock said:

I'm not sure exactly what you're asking, but those callbacks are indeed being called properly. You can add a console.log() to verify. I wonder if you're just using the wrong color. At every point, you're animating to exactly the same color, so it would make sense that you don't notice anything changing after the first time. 

Sometimes I surprise myself with how silly my mistakes are after 8 hours of coding all day long 🤦🏼‍♀️

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