Jump to content
Search Community

Can't lock section with ScrollTrigger

Joshua Harmon test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi,

 

So I have a quite simple animation where an iPhone mockup comes up from the bottom of the screen and gets pinned after that an image sequence  animation is supposed to play.

 

But my I can't seem to figure out why the iPhone won't stay pinned and play the image sequence animation.

 

I tried changing the iPhone scroll trigger to .main-container but that only made it worse.

 

Any guide or help is appreciated.

 

Thanks.

 

 

Codepen url: (Please open in new tab)

 

https://codepen.io/joshuah46/full/vYeKdoV

See the Pen vYeKdoV by joshuah46 (@joshuah46) on CodePen

Link to comment
Share on other sites

  • Solution

Hey Joshua!

 

You can trigger an animation in an onComplete - but you can't really add a scrollTriggered animation in an onComplete. It's a bit at odds with each other.

 

You're saying 'Hey GSAP - start this animation when this one ends - but also start it when the scroll starts and tie it directly to the scroll progress'

 

You need to choose one approach. I would go with one scrollTriggered timeline. 

 

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

  • Like 3
Link to comment
Share on other sites

Hey,

 

Interesting, I didn't think of a timeline initially because both the animations where inside the same section. (I'm very new to GSAP).

 

Anyways, thanks for taking the time to reply really appreciate it.

 

36 minutes ago, Cassie said:

Hey Joshua!

 

You can trigger an animation in an onComplete - but you can't really add a scrollTriggered animation in an onComplete. It's a bit at odds with each other.

 

You're saying 'Hey GSAP - start this animation when this one ends - but also start it when the scroll starts and tie it directly to the scroll progress'

 

You need to choose one approach. I would go with one scrollTriggered timeline. 

 

 

 

 

  • Like 1
Link to comment
Share on other sites

Ah ok, whether something's in the same section or not shouldn't really have anything to do with choosing to use a timeline.

A timeline is useful when you need to create a sequence of animations - a scrollTrigger is useful for triggering an animation (or sequence of animations) on scroll.

Glad I could help!

 

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