[Fixing to the bottom during scrolling after fading effect]

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

 

 

[Fixing to the bottom during scrolling after fading effect]

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  

 

 

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

[Fixing to the bottom during scrolling after fading effect]

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

[Side Menu Reverse Problem]

Thanks a lot. Health to your labor 🙏. Gsap my new favorite animation library 💖

[Side Menu Reverse Problem]

45 minutes ago, ZachSaucier said:

Hey Kasim and welcome to the GreenSock forums!

 

I highly recommend using GSAP 3's formatting. 

 

Other things that you could do to improve your code:

• Don't toggle classes. Just use a variable to keep track of the state.
• Use callbacks instead of setTimeouts to change things when necessary. That way you avoid errors like if someone switches tabs during an animation.
• Don't use jQuery's animation functions. They're slooow. 
• In fact, I would recommend not using jQuery at all. It's just overhead/extra stuff to load. Vanilla JS is good these days  

Thanks your answer.

I think I misrepresented myself. Currently, there is no problem in the menu toggle button. the main problem is overlay click event. Clicking overlay, the menu animation works correctly. the animation does not work correctly whenever we open the menu again. 

[Side Menu Reverse Problem]

Hi everyone. First of all, I wish everyone a good evening. 
 

I'm new to Gsap. I made an animation of myself using the side menu animation Timelinemax. There is no problem in opening and closing the side menu. I can open and close Timelinemax I have done with "t1.reverse()". But I want my menu to close when I press anywhere on the ".overlay". It closes Timelinemax with reverse, but the animation starts from halfway when you re-open the menu. I have been dealing with this problem for a long time. Where do you think the mistake is? I would be glad if you can help.
 

I wish you good work.

See the Pen RwPqWaL?editors=1111 by kasim444 (@kasim444) on CodePen