someguy Posted April 26 Share Posted April 26 Hello, I am trying to use an element as a scroll trigger which itself (or its parent) is animated/translated. Basically the .content should scroll over the .header and inside content there are scrollTriggers which animate the content (h1, p). Problem is because .content is translated by the timeline and first scrollTrigger, its start and end positions stay in the original location (before the transformation is applied) which is never reachable and wrong, it should also consider the y-translation. How can I get this to work? Ive tried calling ScrollTrigger.update in the onUpdate of the translate tween but its causing to much lag/stuttering. See the Pen KKYEvRo by TheM (@TheM) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted April 26 Share Posted April 26 By changing the order of the ScrollTrigger creating and setting pinnedContainer to the ScrollTrigger that have another ScrollTrigger that has a pin you can fix this issue. Hope it helps and happy tweening! See the Pen vYMPeEg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
someguy Posted April 26 Author Share Posted April 26 Thanks for your reply. I have tried it but it only seems to work because if you look closely the start positions are not exactly where theyre supposed to. I also have the problem that I have multiple of these sections and do not know what content is inside .content I have updated the demo here incorporating your soltion. It has 2 functions v1 and v2 where the difference is that v1 crates children with parents one by one while v2 first creates all children and then all parents. See the Pen ZEZPXxE by TheM (@TheM) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted April 26 Share Posted April 26 Hi, I'm not 100% sure of what you're trying to achieve here, but maybe something like this: See the Pen poBYZyJ by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 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