Jump to content
Search Community

Problem with ScrollTrigger in animated block

yaroslav_asu test

By yaroslav_asu
in GSAP

Moderator Tag
 Share
Go to solution Solved by GreenSock,

Recommended Posts

yaroslav_asu test

yaroslav_asu

Posted
Posted

Hello everyone, I'm new in Gsap and ScrollTrigger. I'm trying to make scroll animation in block that firstly animates with gsap, but I have an issue with it.

Strict order of animation is:  first-screen moves from bottom, after it, when person scrolling that first-screen sticky-block pins to the screen and moves to the end of long-block.

When I'm changing first-screen position in move from bottom animation, sticky-block doesn't pins (it just teleports to end of animation with pinning), but if I will change opacity instead of position, sticky-block will magickly pin and everything works like I wanted. I'm trying to fix it for 2 days, but I wasn't much succeed in it. May be someone could help me to fix that bug, or tell how to make this animation correctly. 

See the Pen abVOdLX by yaroslav-asu (@yaroslav-asu) on CodePen

Link to comment
Share on other sites
  • Solution
GreenSock test

GreenSock

Posted
  • Solution
Posted

I read your post a few times but I'm still pretty fuzzy on what exactly you're trying to do. I can tell you for sure, though, that it's not a good idea to animate the container of an element you're pinning. Remember, when ScrollTrigger does its calculations to figure out the start/end scroll values on each one, it takes transforms into consideration. So if your container is shifted way down on the screen initially due to yPercent: 100, that's where ScrollTrigger is gonna calculate from. 

 

If I understand your goal correctly, this is one of those very rare cases when you'd need to set pinReparent: true to make the pinned element get reparented to the <body> because you've got it inside container elements that are scrolling and/or have transforms. 

See the Pen ExbjvWe?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Typically I'd recommend structuring your HTML so you wouldn't need to do that because it's somewhat expensive to reparent things like that. But in very rare situations, it's the only option. 

 

Does that help? 

  • Like 1
Link to comment
Share on other sites
yaroslav_asu test

yaroslav_asu

Posted
  • Author
Posted
2 hours ago, GreenSock said:

I read your post a few times but I'm still pretty fuzzy on what exactly you're trying to do. I can tell you for sure, though, that it's not a good idea to animate the container of an element you're pinning. Remember, when ScrollTrigger does its calculations to figure out the start/end scroll values on each one, it takes transforms into consideration. So if your container is shifted way down on the screen initially due to yPercent: 100, that's where ScrollTrigger is gonna calculate from. 

 

If I understand your goal correctly, this is one of those very rare cases when you'd need to set pinReparent: true to make the pinned element get reparented to the <body> because you've got it inside container elements that are scrolling and/or have transforms. 

 

 

 

Typically I'd recommend structuring your HTML so you wouldn't need to do that because it's somewhat expensive to reparent things like that. But in very rare situations, it's the only option. 

 

Does that help? 

Yes, that helped pretty sure, thank you very much and sorry for inaccurate goal. Next time I'll try impress my goals better

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...