Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Martio

GSAP fade in/out logos randomly

Recommended Posts

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

A few other tips: 

  1. Your randomArrayShuffle() could be replaced with just using gsap.utils.shuffle(). Super handy. 
  2. 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. 
  3. 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? 
  4. 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!

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Thanks much Cassie.

 

Thanks GreenSock,  that helped a lot! Got it working as intended.

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×