AsKadir Posted July 3, 2021 Share Posted July 3, 2021 Hello, I have a block, when user scrolls it becomes pinned and elements inside of it start to move to top with scrub, it's kind of smooth scroll only for this block. So it's working good, but now I have an issue, because I can't understand how can I implement ScrollTrigger animation for elements that inside of this pinned block. I understand why it's not working right now because I move this elements with tween and the trigger position changed. Can you give me advice, please? Thanks in advance! See the Pen PomqKPe by ChicagoJostik (@ChicagoJostik) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted July 4, 2021 Share Posted July 4, 2021 Hi pal. Not sure what you're trying to achieve but this demo is doing exactly what you're asking of it. Can you step back a bit and explain what the end goal is? (markers added with id's to demonstrate) See the Pen 66e69215c679cf815fa7b2149d0f66cb by cassie-codes (@cassie-codes) on CodePen 1 Link to comment Share on other sites More sharing options...
AsKadir Posted July 4, 2021 Author Share Posted July 4, 2021 @Cassie Hello Cassie, Here is another codepen: See the Pen oNWjaYq by ChicagoJostik (@ChicagoJostik) on CodePen What I want to have the block ".wrapper" be pinned and move the content ".items" inside of it to top to have smooth scroll, and at the same time to have rotation animation for the boxes. Did you get the point what I want? Sorry for my bad explanation. Thanks a lot! Link to comment Share on other sites More sharing options...
Cassie Posted July 4, 2021 Share Posted July 4, 2021 That seems to be what's happening in the previous pen? Although I'm not sure what you mean by smooth scroll in this context? You could simplify it down a bit - but it does seem to be doing what you're intending already. Sorry if I'm missing something. See the Pen dca5f54e6400034d53461c9f355b8bd4?editors=1010 by cassie-codes (@cassie-codes) on CodePen 1 Link to comment Share on other sites More sharing options...
AsKadir Posted July 4, 2021 Author Share Posted July 4, 2021 16 minutes ago, Cassie said: Although I'm not sure what you mean by smooth scroll in this context? I mean scrub: 0.7, so animation of the moving seems like smooth scroll. In the last your codepen you are doing stagger animation, which is not what I want. Let me try to explain in another way, so we have block with elements: See the Pen ExmVOGz by ChicagoJostik (@ChicagoJostik) on CodePen Here is another codepen with pinning and elements moving to top, so when user scroll it seems like elements start moving smooth, but actually the block is pinned and elements inside of it moving up: See the Pen dyWYQwo by ChicagoJostik (@ChicagoJostik) on CodePen Do you see the difference? So right now I want to add animation for each red box on scroll, I'm using ScrollTrigger: But because elements are moving up, their entry point are different from what ScrollTrigger thinks and that's why if you look to the last red box you will see that rotation starts too late. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted July 5, 2021 Solution Share Posted July 5, 2021 If I understand you correctly, that's waaaaaay more complicated. One of the big priorities we had with ScrollTrigger was to make it FAST. That's why it pre-calculates the exact scroll positions where things should get triggered. That way, when the user scrolls, it is simply comparing the new scroll value to the start/end to see if it's between them. Very simple and fast. But what you're talking about where you're actively animating a container (with an ease) and dynamically shifting around the intersection points would likely require constantly doing a getBoundingClientRect() on each element to see where it is and then rendering it accordingly. Or maybe you could add an onUpdate listener to your tween that's shifting that whole chunk up, and then manually set the progress() of each ScrollTrigger's animation based on its start/end but apply the offset from your chunk tween. For example, if your chunk tween moved 10.5 pixels at that point, you'd subtract 10.5 from the start and end of each related ScrollTrigger and calculate the progress accordingly and do scrollTriggerInstance.animation.progress(whatever). It's definitely not a simple task. If you need custom consulting services to explore this, feel free to contact us and we can discuss scheduling and pricing. Good luck! 2 1 Link to comment Share on other sites More sharing options...
AsKadir Posted July 5, 2021 Author Share Posted July 5, 2021 10 hours ago, GreenSock said: It's definitely not a simple task. If you need custom consulting services to explore this, feel free to contact us and we can discuss scheduling and pricing. @GreenSock Thanks for your answer, Jack! I will try by myself, if not I will contact you. 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