Martio Posted October 26, 2021 Share Posted October 26, 2021 Hi, I created something like the following before actually seeing the gsap website's footer logo section: (gsap with react) However what I wanted to achieve was more like the GSAP footer logo section, where the logo's fade in and out at different times, independently and at random spots. My logos are randomized in their location, but fade in and out together, which isn't really ideal. Any guidance would be appreciated, I am a gsap newbie. Thanks See the Pen OJjmzpx by m-a-r-t-i-n (@m-a-r-t-i-n) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted October 27, 2021 Share Posted October 27, 2021 Hey there @Martio Thanks for being part of Club GreenSock 🥳 Have you taken a look at staggers?https://greensock.com/docs/v3/Staggers Link to comment Share on other sites More sharing options...
GreenSock Posted October 27, 2021 Share Posted October 27, 2021 A few other tips: Your randomArrayShuffle() could be replaced with just using gsap.utils.shuffle(). Super handy. You almost never need setTimeout() when you're using GSAP - just use the gsap.delayedCall() so that it's perfectly synchronized with screen repaints and animation refreshes. Your code looks like it's shifting the entire Array around every 5 seconds (so the logos change places) - how would you do that if you've got all the logos randomized with their animation timing? You'd need to make it happen when they're ALL invisible simultaneously which I think goes against the randomized look you're going for, right? One strategy for having an element kinda randomly fade in/out is a function that creates a tween with an onComplete that calls it again, like: function animateLogo(element) { gsap.to(element, { delay: gsap.utils.random(1, 3), // random number between 1 and 3 opacity: 1, duration: 1, repeat: 1, yoyo: true, // go back to opacity: 0 repeatDelay: 1, // wait 1 second at full opacity ease: "none", onComplete: () => animateLogo(element) }); } logos.forEach(el => animateLogo(el)); I hope that helps! 1 Link to comment Share on other sites More sharing options...
Martio Posted November 4, 2021 Author Share Posted November 4, 2021 Thanks much Cassie. Thanks GreenSock, that helped a lot! Got it working as intended. 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