Scroll To working within pinned scroll trigger element

[Mustafeez]

Hi, I am actually trying to achieve pin one of the sections and within that pinned section the elements get animate-in and out on scroll but without scrubbing.

The section is Purple. Here's the demo which I am trying to achieve https://appshah.com

See the Pen vYKrjPP by mustafeez121 (@mustafeez121) on CodePen

[ZachSaucier]

Hey Mustafeez. What's wrong with the demo that you posted above? It seems to match the intended goal as you provided it as far as I'm understanding.

[Mustafeez]

Hey, I actually tried and still trying to achieve something like to pin a section and within that pin sectioned elements to get animated right after other which can be achieved by timeline BUT the problem is that I want to controll the animation with scroll trigger, like first element within pinned section animate automatically But the 2nd element should be animate when I scroll down my mouse wheel instead of starts automatically right after completion of first element animation.

You can see here what I actually trying to achieve https://appshah.com

[ZachSaucier]

13 minutes ago, Mustafeez said:

You can see here what I actually trying to achieve https://appshah.com

There are a ton of animations on that page so you'll have to me more specific. 

 

14 minutes ago, Mustafeez said:

first element within pinned section animate automatically But the 2nd element should be animate when I scroll down my mouse wheel instead of starts automatically right after completion of first element animation.

Sounds like you need two ScrollTriggers: one for the first animation and one for the second. The first one without scrub, the second with scrub. 

 

I think it'd be helpful if you made your demo more minimal - just focused on what you're asking your question about, everything else removed. 

[Mustafeez]

Okay then should I share another pen here with more specific code or start a new thread?

Edited November 4, 2020 by Mustafeez
Misspelled

[ZachSaucier]

Sharing here is fine.

[Mustafeez]

Hey Zach,

here is the more specific pen. Here you can find 02 sections. The 2nd section is pinned where two lines get animate once the section got pinned. I want the 2nd line element animation to be done When I use my mouse scroll instead of doing automatically right after 1st line animation. 

[ZachSaucier]

Are you wanting something like this?

See the Pen pobZjzK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Or like this?

See the Pen PozBPNj?editors=0010 by GreenSock (@GreenSock) on CodePen

[Mustafeez]

Yes! that's what I am looking for (the 2nd ones) Thanks so much. 😃