Share Posted March 26, 2021 Hello, I'm hoping to get a bit of guidance on direction for an effect I'm trying to achieve. It's been a while (about 3 years) since I've done a GSAP project so doing a lot of reading trying to catch up on what's new. My aim is to replace scroll magic for this task and switch over to scroll trigger. But currently hitting a few stumbling blocks. The interaction I'm trying to create: Scroll the page until a masked image is reached Pin the image and scale the image revealing the section below it Once the animation has finished add a class Revealing additional content Then continue to scroll the page with a fixed background image With the addition of a few more paralax elements within that. I've tried to use the Pinned demo and modify it to add a masked SVG to demonstrate the effect I'm trying to get. Doing some research I think I need to be looking at timelines and then adding the ScrollTrigger along the timeline, but I'm struggling to work out how to get one animation to start after the previous one has finished (or just before). I seem to be able to get the individual animations I'm after working but sticking it all together is proving challenging. Can anyone help point me on the right track please, thank you. See the Pen dyNGVog by Seanom (@Seanom) 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