Jump to content
Search Community

Scrolltrigger horizontal animation help

Winslow test
Moderator Tag

Recommended Posts

I am trying to animate the position of background gradient while horizontally going thru panels. No matter how I try it "seems" to apply the tween to all  the panels at once not each individually as they occur.  Of course the first one is perfect. The gradient is supposed to kick in as the current panel is leaving and the new panel is arriving. I am trying to animate the gradient position at about the 50% mark as the panel leaves. Like I stated the first one works well but all the rest have their gradient at 100% when they arrive. I have tried several scrollTrigger configuration, with a timeline, just tweens without a timeline,  scrollAnimation, without scrollAnimation. I just can't seem to get the each to work. Can someone point me in the right direction or point out my problem (I have this feeling its elementary and will be sorely embarrassed) .

 

Regards

 

Win

See the Pen rNzXwMy by B0nef1sh (@B0nef1sh) on CodePen

Link to comment
Share on other sites

Hello @B0nef!sh

 

You were on the right track there with the (commented out) containerAnimation property, you would just have to use it a bit different.

 

I'm not 100% sure I understand it is what you are going for. If you want the gradient to start tweening, when the panel has finished coming in, I don't think it would make much sense to hook it up to a scrubbing scrollTrigger, as the coming-in of the panels are time-based tweens, so you could never really achieve a seemless chain between those.

 

Here is what I mean visualized, with the containerAnimation hooked up to the fake-horizontal scrolling tl (notice it is the variable tl not inside of "..")

 

See the Pen 814c7c64ec925110e1c909986c4231b9 by akapowl (@akapowl) on CodePen

 

 

If you want the gradient to start tweening right after each panel has come in, it would probably be best to convert the coming-in tweens into timelines and add tweens on the gradients to those timelines (and thus make them time-based too), so you can achieve a seemless chain. Or do it the other way around; instead of having the coming-in be timebased, make the coming in part of a timeline that is being scrubbed and add the gradient tweening to that tl. But maybe I'm just misinterpreting what it is you are really going for here?

 

  • Like 3
Link to comment
Share on other sites

Nope your right on point!! My each loop tween seemed to be tweening all sections at once and not for each so after the first panel the remaining 5 entered the viewpoint at position 100%.  I play with this and the other ideas you stated above.  Thanks.

 

Appreciate the help !!!!

 

 

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