Jump to content
GreenSock

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

Exploding Stars

Recommended Posts

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

  • Like 2
Link to comment
Share on other sites

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()

 

  • Like 1
Link to comment
Share on other sites

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! 

  • Like 1
Link to comment
Share on other sites

  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 👀)

  • Like 5
Link to comment
Share on other sites

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!!!

 

  • Like 1
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.
×