Thibka Posted July 5, 2022 Share Posted July 5, 2022 Hi, I'm facing a logic issue trying to animate 2 different things here: - A/ I'm animating the y position of each items based on the container scroll position. (Note that for this animation, I'm willingly animating the items, and not the container) - B/ I also want to animate the opacity of each item based on their position in the viewport. The problem is that since tween A moves the items, it messes with the scroll triggers of tween B. If tween A was animating the 'x' position instead of 'y', there would be no problem. How could I achieve such an animation (moving the items vertically while animating their opacity according on their position) ? Thanks! 🙏 See the Pen gOeOeNg by Thibka (@Thibka) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted July 6, 2022 Solution Share Posted July 6, 2022 That's quite a tricky scenario. You've got two options: 1) Use the ScrollTrigger.positionInViewport() method to set the opacity of each item inside an onUpdate. This is easier to understand but it's not good for performance due to all the calculations on every movement. 2) Do some fancy math to figure out ratios, adding the opacity animations into the same scrubbed animation that's driving the y from 300 to -300. I spent like an hour or two coming up with this but here you go: See the Pen VwXevrX?editors=0010 by GreenSock (@GreenSock) on CodePen I hope that helps. 1 1 Link to comment Share on other sites More sharing options...
Thibka Posted July 6, 2022 Author Share Posted July 6, 2022 Wow, it ended up being quite more complicated than what I anticipated! Thank you so much for your answer and the time you spent making this solution, it will definitely be useful again in the future. ❤️ 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