Pin absolute element as fixed for entire page scroll untill it reach certain element

[Zahurul]

Hi, I am trying to pin ".sun" element on bottom right of the page as fixed from start of the page till it reach the ".landscape" element, when ".sun" enter the ".landscape" element then it should scroll as normal with page. I am trying to achieve it by gsap 3 with scroll trigger plugin easiest and efficient way. on my codepen it doing totally opposite what i am trying to achieve. can anybody help please.

 

See the Pen KKMEwMW by aboutzahurul (@aboutzahurul) on CodePen

[Zahurul]

I am trying to get effect like this pen, only differencen, once ".sun" element touch/enter ".landscape" element it should sroll with ".landscape" element normally. What is the best way to do so? I can do it if one element inside another, but here i need to trigger based on multiple element. Please help, Thanks.

 

See the Pen ExyMZOw by aboutzahurul (@aboutzahurul) on CodePen

[mikel]

Hey @Zahurul,

 

I guess you want it that way

 

See the Pen oNLVWmB by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[Zahurul]

I was preparing to do it by scrollmagic cos before i have done something like this for website sidebar, but mainly i wanted to do it in GSAP 3 cos i already used it for other animation and scroll related function but for this issue couldn't find a simple solution. Thanks a lot @mikel for your very simplified solution, will implement it on my upcoming website very soon. Greensock rocks... 👍