Share Posted January 27 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 More sharing options...
Solution Solution Share Posted January 28 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? 1 Link to comment Share on other sites More sharing options...
Author Share Posted January 28 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 More sharing options...
Share Posted January 28 No problem. Glad it helped! Good luck with the project. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now