Nested Snap Scrolling

[Sajidul Islam]

HI, I would like to make an animation which will scroll inside a section. And the BG image will remain sticky until I complete my second scroll. But, I'm unable to complete my animation and need help badly.

So this is my need-

1. Main section will remain until I finish the nested Scroll.

2. When The nested scroll first appear It has to an Scale up effect. There will be no effect for the rest.

3. Only 1 nested scroll can be pass at a time. No matter if it's slow or first scroll.

4. There will be an indicator which will be automatically marked. I mean which no of slider is viewing now will have an active color.

 

I've tried the following but it skips the section. 

See the Pen vYZGyJq by aaronmeder (@aaronmeder) on CodePen

 

Live Demo URL can be found http://18.136.138.101/ (Under the Globe Section)

See the Pen ZExejMr by sajidulislam0 (@sajidulislam0) on CodePen

[Sajidul Islam]

@GreenSock Please help

[GreenSock]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here are my list of requirements: ____, now please show me how to build it" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

I would strongly recommend breaking it down to very simple pieces, one at a time with only a few colored <div> elements. See if you can get the pinning to work first, for example, and then if you want another sub-scrolling section, attempt that in the most basic way. If you get stuck, post a minimal demo here along with a GSAP-specific question and we'll do our best to help. But please remember the forum guidelines - this is not a place to get experts to complete your project for free. 

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Good luck!