Jump to content


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

Go to solution Solved by mikel,

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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... 👍

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.