Jump to content
Search Community

BEST SOLUTION TO ACHIEVE MULTIPLE SCROLLTRIGGER ELEMENT

Dennyno test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

4 hours ago, OSUblake said:

I would make the entire animation a timeline. Once you have your animation looking the way you want, just add a ScrollTrigger to your timeline and you should be good to go.

 


Thanks so much. :)
I did.
Now how to make the iphone image and the triggered elements pinned till the animation ends?

Actually gsap ends after the container is outside from the viewport... so sad!

Link to comment
Share on other sites

I tried setting "pin:true" but the grid stays a bottom.
Also 1 other thing: the result (even if we are talking about different transitions and animations) if slightly different: elements have like a overflow:y before starting animations, while on the demo.. elements are visible even before starting the animation (outside from the iphone screen).

Which could the the problem? My markup?

Thanks

Link to comment
Share on other sites

  • Solution
10 hours ago, Dennyno said:

Now how to make the iphone image and the triggered elements pinned till the animation ends?

 

You can make your timeline longer by adding some dummy tweens to the end of it.

 

...
tl.fromTo(".div26",{y:50,autoAlpha: 0}, {duration: .5, y: 0,autoAlpha: 1});

// add 1 second to the timeline
tl.set({}, {}, "+=1");

 

46 minutes ago, Dennyno said:

I tried setting "pin:true" but the grid stays a bottom.

 

It's going to start pinning when start passes the scroller-start bar. To pin it higher, you need to set the start to be higher.

 

image.png

 

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