Jump to content
Search Community

Particle Effect Refactoring

dada78 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys!

I have been browsing through your banner inspirations:

http://greensock.com/forums/topic/12477-inspiring-html5-banner-examples-with-gsap/?hl=html5%20banner and found this really nice particle animation created by user Oliver15Years:

 

http://www.bannerhost.hu/cola/tasteII/Cola_TasteTheFeeling_II_640x360_DOUBLECLICK/

 

I am refactoring it to create a steam animation but can't figure out how to kill the particle engine ("spawnSteam") in my timeline.

I would like to ensure that the generator is being killed in my playEnd function. I tried adding spawnSteam.kill(); // but it didn't work..

 

Thanks so much everyone!

See the Pen 81f5033fbc0eb2df882c558d144f70c8 by dada78 (@dada78) on CodePen

Link to comment
Share on other sites

Thanks Jonathan. I edited my post to make this more pertinent to Greensock specifically. And yes I am clear about the scale factor question that you responded to. sf = 1 (100%); I just wasn't clear what multiplying it by the width/height would do exactly, as I couldn't see a difference visually:

var sf = 1.1 * ( 300 / 250)

And yes, I was hoping Oliver might be able to shed some light on the particle code in particular but mainly I am trying to understand how the function can be stopped / paused / killed onComplete of my main timeline?

 

Thanks!

Link to comment
Share on other sites

Hi dada78,

 

I am glad You found it useful. It was made in an hour so it's code is a bit messy. I gave up the polishing when it worked.

 

1. Scale factor is used in different size mutations, because the bubbles aren't spawned in a scaled container, I just patched all the tweens with this quick multiplication. 

 

2. The positioning is by an invisible div called "bubbles" which is referenced by this line: var ss = document.getElementById("bubbles"); Don't ask why ss, it just short. If you color this div to something else you can position the spawn point of the particles visually. You don't have to enter numbers. ss.appendChild(cln); attaching the actual particle clone to this div. The position is i think is the top left corner of "bubbles" div.

3.

.to(cln, Math.random() * 2 + 11, { /// Clone! your motion's duration is 11 sec + 0 to 2 additional secs!
y: "-=" + 600 * sf,  /// Move up approx 600px from your spawn location!
x: "+=" + (Math.random() * -300 * sf + 100 * sf), /// Go either left or right a bit while moving, but mostly left!
.progress(Math.random()); /// Clone don't just spawn and start moving! Start your tween somewhere in the middle of your jouney!
ss.appendChild(cln);   /// Take your place in this friendly div called "bubbles" and appear on screen!

4. To fade in or do whatewer You want with the particles, just modify the actualTween as You want the particles to behave.

5. Dunno, I dindn't need to kill them, because the anim was always on. Maybe you just hide them with autoAlpha? Or delete the reference to them. This is not clear to me. Maybe if You go through the "tweens" array and kill all the Tweenlite instances in it with a forEach loop.

 

I hope this helps a bit.

Best regards,

Oliver

  • Like 1
Link to comment
Share on other sites

Thanks Oliver! Yes that was helpful!

 

Ok, will explore more in terms of killing and see if I can figure something out. Ideally I wouldn't want to just set them to autoAlpha, as my understanding is that the div would still be there generating particles (just not visible) and hog down the browser? Need to look into this some more...

Thanks!

Link to comment
Share on other sites

Hi Dada78,

 

I added this to your playEnd function and it will fade out the steam, and then remove it completely:

.to("#steam, #steamPosition", 1, {autoAlpha:0})
.set("#steam, #steamPosition", {display:'none'})

hope that helps.

-Celli

Link to comment
Share on other sites

Thanks Oliver! Yes that was helpful!

 

Ok, will explore more in terms of killing and see if I can figure something out. Ideally I wouldn't want to just set them to autoAlpha, as my understanding is that the div would still be there generating particles (just not visible) and hog down the browser? Need to look into this some more...

Thanks!

 

The spawnBubbles() funciton generating a finite number of particles and terminating. After that, the particles living their individual tween cycles. They move along in their random path and their tweens are restarting. Until - I think - a reference is pointing at them. Which is in the "tweens" array.

  • Like 1
Link to comment
Share on other sites

Hi Dada78,

 

I added this to your playEnd function and it will fade out the steam, and then remove it completely:

.to("#steam, #steamPosition", 1, {autoAlpha:0})
.set("#steam, #steamPosition", {display:'none'})

hope that helps.

-Celli

Thanks Celli,

yes this will hide the particles from be visible, however I would like to know how to actually stop the particles from being generated - even when out of view. I would think I would need to stop the "actualTween" from restarting on my playEnd function...

Link to comment
Share on other sites

Thanks Celli,

yes this will hide the particles from be visible, however I would like to know how to actually stop the particles from being generated - even when out of view. I would think I would need to stop the "actualTween" from restarting on my playEnd function...

actualTween exists only for a fraction of second in the for loop. Then the timeline wich was referenced by this "actualTween" variable is pushed in the tweens array. So if You want to terminate all the particle timelines, You have to loop through the "tweens" array and stop each TimelineLite instance.

 

I have spotted a little confusion here: these are not tweens in the array, they are actually timelines. My bad, sorry. It just worked :)

 

If I get one million likes, I will consider making the engine reusable :D

 

But seriously. The basic concept is:

 

1. Make a clone of a DOM graphical element.

2. Put the clone into a container.

3. Create a new timeline instance.

4. Animate the clone with this timeline. ( Math.radom() makes the tweens different )

5. Randomize the timeline's progress to avoid crowding at the spawn point.

6. Store a reference to the timeline in an array to protect it from garbage collection and make it accessible.

7. Manipulate all the timelines in the array with a for loop.

 

For instance: If you spawn 100 particles, You will get 100 DOM <img> and 100 GSAP TimelineLite instances existing in paralell. Each of the timelines controlling one DOM element. If You want to delete the visual appearances of the particles, You have to remove them from the DOM structure. If You want to kill the tweens You just have to empty the array which is holding them. ( I hope )

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Thanks Oliver15Years!

 

I followed your suggestion to empty the array by adding this to the spawnSteam function:

 

 function killSteam(actualTween) {
   i = [];
 }
 
and changing the onComplete on line 38 of the "actualTween" timeline from "reSteam" to:
   onComplete: killSteam,

This definitely kills the generated timelines :-) Thanks again!

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