Jump to content
GreenSock

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

Fixing to the bottom during scrolling after fading effect

Go to solution Solved by akapowl,

Recommended Posts

Greetings. I'm still trying to get used to gsap and scrollTrigger. But I love this powerful tool.
 

I want to do is 'Download' button be seen with fade effect when scroll down to half of the second section. Then, when it continues to scroll down, same button fixed screen bottom to stay until the end of the section. Is it possible to do this? Sorry for my English.

See the Pen QWEJzax by kasim444 (@kasim444) on CodePen

Link to comment
Share on other sites

Hi, i am not that expart on it but i think the logic maybe:

  1.  get the viewport/scroll-container/section clientHeight
  2. then get the desire height where you want to show/pin/animate the download button by devide (clientHeight - viewport height) by 2 for half height
  3. then put your logic on ScrollTrigger onUpdate property (https://greensock.com/docs/v3/Plugins/ScrollTrigger) based on calculated height vs onUpdate progress onUpdate: ({progress, direction, isActive}) => console.log(progress, direction, isActive)  
  4. then do the animation as needed on timeline. 

Hope it may give you some idea to think about. sorry if i am wrong.... 😂

Thanks.

 

Link to comment
Share on other sites

  • Solution

Hey @kasim444

 

It's actually quite a bit easier, than what @Zahurul suggested.

 

Just make sure, you position that .external-link correctly via your CSS (for this example, I removed the 'top: 50%' and changed the translation up on the y-axis to -60%, just to make a quick democase), and you can set the start of your ScrollTrigger to 'center bottom' and add pin: '.external-link' and you should have the desired result.

 

See the Pen 9c83b0b0344689975f283601776fb640 by akapowl (@akapowl) on CodePen

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

 

I see you marked my post above as the best solution already, but coming to read over what it is you want to achieve, I think this actually is not an appropriate solution, since both, the pinning and the animation take place for the same duration.

 

So probably you'd want to split the ScrollTrigger you have there into two seperate triggers, one for the pinning (that could take place over a way longer duration, as demonstrated below) and one for only the fading-in part - both having individual durations.

 

Here are two different approaches to this. The only things that changed between those two variations are the top-value ( thus the positioning within that section ) of your .external-link in your CSS and the start and end of those ScrollTriggers. Those are the key-factors to consider when approaching this.

 

 

 

Version 1:

With the button in position from the start, fading in over half the section-/window-height and staying pinned down to the next section.

 

See the Pen fe6ba588a7bd522809be7c67af653911 by akapowl (@akapowl) on CodePen

 

 

Version 2:

Button scrolling with the flow and fading in for a duration of 180px and then being pinned for the rest of the section-height.

 

See the Pen d56df4c1da6a2b1ccc2955cd8f53bb36 by akapowl (@akapowl) on CodePen

 

 

 

Hope this helps get a slightly better understanding.

Now I need coffee :D 

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

17 minutes ago, akapowl said:

 

I see you marked my post above as the best solution already, but coming to read over what it is you want to achieve, I think this actually is not an appropriate solution, since both, the pinning and the animation take place for the same duration.

 

So probably you'd want to split the ScrollTrigger you have there into two seperate triggers, one for the pinning (that could take place over a way longer duration, as demonstrated below) and one for only the fading-in part - both having individual durations.

 

Here are two different approaches to this. The only things that changed between those two variations are the top-value ( thus the positioning within that section ) of your .external-link in your CSS and the start and end of those ScrollTriggers. Those are the key-factors to consider when approaching this.

 

 

 

Version 1:

With the button in position from the start, fading in over half the section-/window-height and staying pinned down to the next section.

 

 

 

 

 

Version 2:

Button scrolling with the flow and fading in for a duration of 180px and then being pinned for the rest of the section-height.

 

 

 

 

 

 

Hope this helps get a slightly better understanding.

Now I need coffee :D 

 

 


Thank you very much for your effort. I struggled for hours but couldn't come up with a solution because I didn't know much about scrollTrigger. Thank you very much again, your solutions have been stimulating for me. 🙏

  • Like 2
Link to comment
Share on other sites

I finally got what I wanted by trial and error. I share the final version so that maybe it will benefit someone. Thank you @akapowl for their support.

 

See the Pen jOrQgKv by kasim444 (@kasim444) on CodePen

 

 

  • Like 1
Link to comment
Share on other sites

Thank you guys @akapowl @kasim444. will implement this in my future project, without complexity 😀 Greensock rocks 👍, it makes complex task easier...

  • Like 1
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.
×