Share Posted March 7 Hi there, I am using the layered pinning effect for some sections, but have run into an issue with my text overlay animation when trying to delay the pins from moving on. I used this example which sets an end value on the ScrollTrigger, and adds a margin to offset the pins I assume: See the Pen RwJwpvo by akapowl (@akapowl) on CodePen For my animation to work, the layered pinning works perfectly, but i'm not 100% sure with this offset to allow for the delay, how to make my overlay text animate in & out correctly. The idea is it scrolls up into view from 0 to 1 opacity, then continues off back to 0 opacity, but the positioning looks way off, and it's super fast. There is also the need for it to be adaptable as there can be more than one content section within a pin - this I can work out i'm sure once I have figured out the correct spacing/offset. I have attached a simple example built around it being used as a module/block to show where I am at with it. Here is an example of what I managed to do without layering the pins which works how i want it to - the image container is pinned while the text scrolls naturally over the top: See the Pen wvEqVYE by jackkemm (@jackkemm) on CodePen Any thoughts on this? Thanks, Jack See the Pen gOdxJgZ by jackkemm (@jackkemm) 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