Jump to content
Search Community

Exploding Stars

ShadowHax test
Moderator Tag

Recommended Posts

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

  • 1 year later...

Hi @nemesisKo and welcome to the GreenSock forums!

 

Here is a super simple example using the Motion Path Plugin and some SVG paths to animate particles through them:

See the Pen GRGbVrP by GreenSock (@GreenSock) on CodePen

 

Here is the SVG markup for the paths, which you can see and play with on an editor:

<svg width="400" height="200" viewBox="-200 -200 400 200" version="1.1" id="svg5" xmlns="http://www.w3.org/2000/svg">
  <g id="layer1">
    <path style="display:inline;fill:none;fill-opacity:.996643;stroke:#000;stroke-width:3;stroke-linecap:round" d="M158.87-198.5C58.774-161.445 18.874-98.5 0 0" />
    <path style="display:inline;fill:none;fill-opacity:.996643;stroke:#000;stroke-width:3;stroke-linecap:round" d="M107.518-198.5C20.938-150.655 0-98.5 0 0" />
    <path style="display:inline;fill:none;fill-opacity:.996643;stroke:#000;stroke-width:3;stroke-linecap:round" d="M57.72-196.15C6.415-150.3 0-98.5 0 0" />
    <path style="display:inline;fill:none;fill-opacity:.996643;stroke:#000;stroke-width:3;stroke-linecap:round" d="M-158.87-198.5C-58.774-161.445-18.874-98.5 0 0" />
    <path style="display:inline;fill:none;fill-opacity:.996643;stroke:#000;stroke-width:3;stroke-linecap:round" d="M-107.518-198.5C-20.938-150.655 0-98.5 0 0" />
    <path style="display:inline;fill:none;fill-opacity:.996643;stroke:#000;stroke-width:3;stroke-linecap:round" d="M-57.72-196.15C-6.415-150.3 0-98.5 0 0" />
  </g>
</svg>

Hopefully this helps. If you have more questions let us know.

 

Happy Tweening!

  • Like 4
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.
×
×
  • Create New...