Share Posted March 10 Hello, it's my first time with gsap and scroll trigger so please forgive me if I did dumb mistakes or missed anything obvious. I'm trying to build an animation where a container (.container1) rotates by 90° based on scroll. After the rotation ends, the elements inside the container (two adjacent to each other and one positioned in absolute under them) must move horizontally, still based on scroll. The container and its content must be pinned to the viewport for the whole duration of the animation. Unfortunately I'm facing three issues. The first one is that the horizontal animation of the content is triggered before the container rotation ends. I only managed to delay it but it's not ideal. The second one is that the animation is too fast, especially the horizontal movement, and I can't find a way to slow it down. I tried to keep track of the mouse wheel scroll but it doesn't seem to work. The third one is about the pinning. I managed to keep the container pinned, but once its rotation ends, all the elements resume scrolling out of the viewport. If I try to add a pin to the content elements, the animation breaks. Attached there's a codepen demo with the simplified version of what I've managed to do so far. Thanks for any help! See the Pen oNPpjMQ by Onadras (@Onadras) on CodePen Link to comment Share on other sites More sharing options...
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
Already have an account? Sign in here.Sign In Now