[Falling Cards]

Hello all!  Another question!

So I'm trying to make a falling card animation, but it seems to be a little choppy and sluggish on some devices.

Can anyone see where I might be able to improve this?  Does the filter: drop-shadow cause performance problems?

Thanks!!!

(best viewed on the codepen site)

See the Pen ZEJEMQd by lithiumhax-the-lessful (@lithiumhax-the-lessful) on CodePen

[Exploding Stars]

11 minutes ago, Cassie said:

  let explodeCont = document.querySelectorAll('.anim-explode-container');

  explodeCont.forEach((container) => {
    let svg = container.querySelector('.anim-explode');
    let shapes = [
      'M254 286.11a50 50 0 0050-50H204a50 50 0 0050 50z',
      'M255.5 271a20 20 0 10-20-20 20 20 0 0020 20zm0 30a50 50 0 10-50-50 50 50 0 0050 50z',
      'M307.5 250a50 50 0 11-50-50 50 50 0 0150 50',
      'M234 237a22.5 22.5 0 0045 0h27.5a50 50 0 01-100 0z',
      'M258 202.5a12 12 0 00-12 12v26h-26a12 12 0 000 24h26v26a12 12 0 0024 0v-26h26a12 12 0 000-24h-26v-26a12 12 0 00-12-12z',
    ];

    container.addEventListener('mouseenter', (e) => {
      let animatedShapes = [];

      for (var i = 0; i < 10; i++) {
        let newElement = document.createElementNS(
          'http://www.w3.org/2000/svg',
          'path'
        );
        newElement.setAttribute('d', gsap.utils.random(shapes));
        newElement.style.fill = gsap.utils.random([
          '#4899DF',
          '#f0f0f0',
          '#00C0CC',
          '#DE2870',
          '#C7DBF4',
        ]);
        svg.appendChild(newElement);
        animatedShapes.push(newElement);
      }

      function killShapes() {
        animatedShapes.forEach((shape) => {
          svg.removeChild(shape);
        });
      }

      gsap.set(animatedShapes, {
        transformOrigin: 'center',
        scale: 'random(0.2, 1)',
      });

      gsap.to(animatedShapes, {
        onComplete: killShapes,
        keyframes: [
          {
            rotate: 'random(180, -180)',
            x: 'random([-150, -100, -200, 200, 100, 150])',
            y: 'random([-150, -100, -200, 200, 100, 150])',
            ease: 'expo.out',
            duration: 4,
            stagger: {
              amount: 0.1,
            },
          },
          { opacity: 0, delay: -3 },
        ],
      });
    });
  });

Apologies for the wall of code - but I did a similar thing on this site for the tickets button up at the top right.

Might be helpful to see another approach.

It's using SVG which is quite nice for responsive/crisp vector stuff

 

(I'll try to loop back and pop this in a codepen next week, but I have sunday roast and wine waiting right now 👀)

 

WOW!!  That is fantastic!!  Thank-you again @Cassie!!!

 

[Exploding Stars]

1 minute ago, Cassie said:

This is fun, nice job.

Leaning in to some of GSAP's utility methods would certainly reduce some of that code a bit ☺️

You can even use them in string form like so
 

gsap.to(".class", {
  x:"random(-100, 100, 5)" //chooses a random number between -100 and 100 for each target, rounding to the closest 5!
});

https://greensock.com/docs/v3/GSAP/UtilityMethods/random()

 

Ohhh!!  Thank-you @Cassie!!  I'll have to try that! 

[Exploding Stars]

Hi everyone!
So I'm trying to make an exploding stars effect.  Anyone want to take a look at my code and let me know if there is a better way to do this?

Thanks for the input! 😄

See the Pen rNmNjdO by lithiumhax-the-lessful (@lithiumhax-the-lessful) on CodePen

[Add new class not working?]

26 minutes ago, ZachSaucier said:

I think this is the effect you're going for? 

 

I think GSAP caches the target references when tweens are initialized, so you should wait to create the new tween until after the className has been changed. 

 

Very helpful!  Thank-you!

 

[Add new class not working?]

Thank-you so much for the tips!!!

I can style the 3rd box without using the class, I guess I'm trying to figure out the best way to use .not on the boxes.

I thought I could maybe just add the .blackBox class to the third box, then use .not('.blackBox') to change them all but the third to Red.

I'm probably doing a terrible job explaining myself lol, but thank-you for all the help.

[Add new class not working?]

Hello All!

This should be pretty straight forward, but I'm having trouble adding a new class.

I've attached my CodePen example.  Can anyone point me in the right direction to what I am doing wrong?

 

The example should change all the box colors from Blue to Green, then add the .blackBox class to the third box, then change all boxes without the .blackBox class to Red, leaving the third box Black.

 

Any input would be greatly helpful!

See the Pen jObbedy by lithiumhax (@lithiumhax) on CodePen