EdwinSana Posted November 9, 2022 Share Posted November 9, 2022 Hello. Please, I would like your help with this question: I have a series of boxes ("container"), inside of them there is a sticky element ("element_sticky") and in some of them a big block of text ("element_nosticky") that should move normally, i.e. not sticky. In an answer I received in another topic, I got the solution to make said sticky element sticky based on its parent's height. Thanks for that. But I would also like its opacity to be animated too, (from opacity 0.2 to opacity 1.0) based on the height of its parent, in a same way that it's sticky behavior. I mean: when change it's behavior from sticky to non-sticky change it's opacity from 0.2 to 1.0. In that topic's solution, "ScrollTrigger.create" is used to accomplish that goal: the sticky element would be sticky based on the height of its parent. But now I don't know how to animate the opacity with this. I tried in a very poorly way with "onEnter: {opacity: 1.0}),", but it doesn't work and now I'm stuck. I would like to add in my question that the reason I want the opacity of "element_sticky" to animate according to the height of its parent is because in the actual project I am developing "element_sticky" is a full screen background image and to achieve a smooth transition between the opacity of the sitcky elements I am using "end: "+=50000". In the project I have a lot of "element_sticky" elements and I see that after I have gone through a good part of the page navigation, the opacity animation start to have a lag with like a wierd error. I have identified that it is due to having these values as high as " end: "+=50000" in too many elements. Sorry for this too long and confusing explanation, but I wanted to put in context the reason for my question, since that it is not possible for me to put my real project in a codepen and I know that this forum it's not to solve questions from a real complex project. The following is the codepen with my poor attempt. Thank you very much for your help. See the Pen ExRZNXP by EdwinSanabria (@EdwinSanabria) on CodePen Link to comment Share on other sites More sharing options...
Solution Trapti Posted November 9, 2022 Solution Share Posted November 9, 2022 Hi, Is this what you want to achieve See the Pen xxzgqde by tripti1410 (@tripti1410) on CodePen onEnter syntax is wrong, it needs function. I added this opacity on scrub if you want you can remove also. If you want to add opacity on onEnter it will look something like this. Also there was a syntax error on your codepen I corrected that. onEnter: () => gsap.from(sticky, {opacity: 0.2, duration: 1}) 4 Link to comment Share on other sites More sharing options...
EdwinSana Posted November 9, 2022 Author Share Posted November 9, 2022 Hi @Trapti! That's the solution I was looking for. Thank you very much for your help! 2 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