ShadowHax Posted October 10, 2021 Share Posted October 10, 2021 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 2 Link to comment Share on other sites More sharing options...
Cassie Posted October 10, 2021 Share Posted October 10, 2021 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() 1 Link to comment Share on other sites More sharing options...
ShadowHax Posted October 10, 2021 Author Share Posted October 10, 2021 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! 1 Link to comment Share on other sites More sharing options...
Cassie Posted October 10, 2021 Share Posted October 10, 2021 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 👀) 5 Link to comment Share on other sites More sharing options...
ShadowHax Posted October 10, 2021 Author Share Posted October 10, 2021 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!!! 1 Link to comment Share on other sites More sharing options...
Cassie Posted October 11, 2021 Share Posted October 11, 2021 Looping back with a codepen. ✨ See the Pen zYdxopE by cassie-codes (@cassie-codes) on CodePen 10 Link to comment Share on other sites More sharing options...
nemesisKo Posted December 14, 2022 Share Posted December 14, 2022 On 10/11/2021 at 9:13 PM, Cassie said: Looping back with a codepen. ✨ joining for first time in comunity. thanks for this amazing answer. what if i want to adjust paths to certain x,y not randomly Link to comment Share on other sites More sharing options...
Rodrigo Posted December 14, 2022 Share Posted December 14, 2022 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! 4 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