Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Zahurul

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

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

×