Jloafs Posted September 8, 2022 Share Posted September 8, 2022 Hi guys I'm trying to run a simple opacity animation on each element with the class .recipe-link using scrolltrigger but something isn't working. If anyone could point me in the right direction I'd be really grateful. Apologies if this is me missing something totally obvious - I'm a js novice. Many thanks. See the Pen WNJrrdg?editors=0010 by jloafs-DM (@jloafs-DM) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted September 8, 2022 Share Posted September 8, 2022 The target of your tweens didn't exist. You were trying to querySelectorAll(".recipe-link") INSIDE each ".recipe-link" element. I assume you wanted something more like this?: See the Pen oNdbYNw?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Jloafs Posted September 8, 2022 Author Share Posted September 8, 2022 Thanks, yes that's right. How do I revert back to the original state after the end of the trigger? Ideally I want to change the opacity only while the a tag is in the center of the screen. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted September 8, 2022 Solution Share Posted September 8, 2022 There are many ways to do that, but the simplest is probably to just add a yoyo repeat to the tween and set its end to be "center top": See the Pen qBYbqNj?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Jloafs Posted September 8, 2022 Author Share Posted September 8, 2022 That's perfect, thanks heaps. 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