Animating the absolute div before the next element start scrolling

[MohitR]

I'm new to GSAP and I'm attempting to create an animation in which I have multiple relative sections with variable height and an absolute position element within each section. I want to scroll the entire inner section by setting the property top to negative, but before I get there, the next element appears.

What I want is, when the element's complete top value (negative) is set, only then the next element should appear.

See the Pen BaPYRKy by mohitrj49 (@mohitrj49) on CodePen

[Rodrigo]

Hi,

 

I think the setup in this case should be different than what you have right now. I think you should look into a combination of pinning each section and the layered snapping. So you should pin each section and animate the content of that section with ScrollTrigger.

 

Then create the ScrollTrigger instance that snaps each section into view based on the start/end points of each section's content ScrollTrigger instance (the one that moves the content of each section). It's important to notice though that you should create the ScrollTrigger instances in that specific order, first the ones for each section's content and then the one that snaps the sections into view in order to have the correct start/end points for each one, otherwise you'll have to call the global refresh method or tinker with the refresh priority of each instance.

 

I'll try to circle back to this later and see if I can provide a simple proof of concept, but hopefully this is enough to get you started. Also as an extra advice I strongly recommend you to forget about the snapping of the sections right now and focus on getting the ScrollTrigger animations of each section working with their respective pinning before proceeding to the snapping of the sections. If you try to get everything going at the same time it'll add an extra layer of complications to your setup and will make this harder than it could be.

 

Happy Tweening!

[MohitR]

1 hour ago, Rodrigo said:

I think the setup in this case should be different than what you have right now.

Sorry, I didn't get it as I am completely new to this GSAP and I am not able to visualise the structure/approach you are sharing. It would be better If you can provide a quick demo for the same.

And one more thing, If I pinned the element, then the previous element will not have that scroll effect,I want that also be scrollable like below but with the various content. And that content should be accessible first before scrolling the next section.

See the Pen QWjjYEw by GreenSock (@GreenSock) on CodePen

[Cassie]

Hi Mohit - it sounds like you're trying to solve too many problems at once. You're also linking to demos that do different things to what you're describing so it's a little hard to follow and advise.

 

A good way to approach this kind of thing is to just create the animation first - without scrolltrigger. Don't worry about scroll or pinning or snapping. Break it down into the smallest parts and approach it step by step.

A good first step is working out how to position your elements with CSS and structure your HTML,  then try to animate the elements to the position you want. Once you have a timeline, hook it up to scroll, then when that's working get the pinning sorted. 

Small steps!

See the Pen yLqKgQQ by GreenSock (@GreenSock) on CodePen