kasim444 Posted November 11, 2020 Share Posted November 11, 2020 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 More sharing options...
Zahurul Posted November 11, 2020 Share Posted November 11, 2020 Hi, i am not that expart on it but i think the logic maybe: get the viewport/scroll-container/section clientHeight 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 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) 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 More sharing options...
Solution akapowl Posted November 11, 2020 Solution Share Posted November 11, 2020 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 2 1 Link to comment Share on other sites More sharing options...
akapowl Posted November 11, 2020 Share Posted November 11, 2020 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 2 1 Link to comment Share on other sites More sharing options...
kasim444 Posted November 11, 2020 Author Share Posted November 11, 2020 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. 🙏 2 Link to comment Share on other sites More sharing options...
kasim444 Posted November 11, 2020 Author Share Posted November 11, 2020 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 1 Link to comment Share on other sites More sharing options...
Zahurul Posted November 13, 2020 Share Posted November 13, 2020 Thank you guys @akapowl @kasim444. will implement this in my future project, without complexity 😀 Greensock rocks 👍, it makes complex task easier... 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now