Jump to content
GreenSock

djdnl13

ScrollTrigger Layered Pinned with animations inside

Go to solution Solved by akapowl,

Recommended Posts

Hi there, 

 

I was wondering if it is possible to add GSAP animations between these other animations that have ScrollTrigger. I mean the run some animations inside the first section, finish this animations and then animate the overlap transition to the next section. The same with all the following sections.


I'm kind of new in these animations and couldn't find more examples to try. I was trying with disable method on ScrollTrigger but nothing so far.


Thanks in advance.

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

Link to comment
Share on other sites

  • Solution

 

Welcome to the forum @djdnl13

 

5 hours ago, djdnl13 said:

I was wondering if it is possible to add GSAP animations between these other animations that have ScrollTrigger.

 

Sure, there are actually multiple approches you could use.

Here is one example that makes the whole thing a timeline.

 

You'd probably want to read up on how durations and the position paremeter work with tweens/timelines that have a ScrollTrigger with scrub applied to tweek everything to your liking.

 

I also added some non scrubbing animations on the header in the top left corner, calculating when to trigger them based on the body as the trigger, triggering when each of the panels hits the top. Hope this is a bit helpful.

 

See the Pen 5d5c54eb5dd09c9a4322f108b8708acb by akapowl (@akapowl) on CodePen

 

  • Like 4
Link to comment
Share on other sites

Thanks @akapowl !

This is the solution, I will read the link to have everything clear.

 

Daniel

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