Getting Issue with pinning and scrolling

[Sandeep Choudhary]

Hi Guys,

Need some help in issue with pinning and scroll trigger.
What iam trying to do is start scrolling the green section when iam on 20% of image section and scroll till then it cover the purple section. Tried 4-5 solution but not getting any hint where iam doing wrong.  any help or hint will be appreciated.

See the Pen gOyVdgd by SandeepChoudhary (@SandeepChoudhary) on CodePen

[Rodrigo]

Hi,

 

Is not really clear what you're trying to do here, so I took my best guess and came up with this:

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

 

Hopefully this helps.

Happy Tweening!

[Sandeep Choudhary]

hi @Rodrigo
thanks for taking a look. What iam trying to do is 
When image section is touch the top + 20% then scroll trigger  need to be start and the last section [green one ] start overlapping over purple one and when its fully cover the second last section [Purple one]  it leave the scroll trigger and move forward. Iam able to make animation for overlapping but the section is not stopping when iam pinning the image section.
hopefully this will help you what iam trying to achieve.

[Rodrigo]

Hi,

 

Maybe something like this:

ScrollTrigger.create({
  trigger: ".parallax-upper-area",
  start: "top+=20% top",
  end: "bottom bottom",
  endTrigger: ".parallax-below-area",
  pin: ".parallax-upper-area",
  pinSpacing: false,
  markers: true
});

Or maybe switch the start to this perhaps:

ScrollTrigger.create({
  trigger: ".parallax-upper-area",
  start: "top top+=20%",
  end: "bottom bottom",
  endTrigger: ".parallax-below-area",
  pin: ".parallax-upper-area",
  pinSpacing: false,
  markers: true
});

Also this could be an option:

ScrollTrigger.create({
  trigger: ".parallax-upper-area",
  start: "top+=20% top",
  end: "+=450",
  pin: ".parallax-upper-area",
  pinSpacing: false,
  markers: true
});

Unfortunately the description you provide is not completely clear to me, so I'm taking my best guesses here in terms of what you're trying to do.

 

Hopefully this helps

Happy Tweening!