Adding particle effects to Banner (Beginner)

[Buster 0 Likes (Newbie)]

Ok I have edited this post because since I started I have started to make things work with my own persistence.

I have implemented this effect into a banner.

See the Pen wBGvgW by MAW (@MAW) on CodePen

 

Can someone tell me what to add to make it stop after a certain time for example 10 seconds?

It seems to have a timeline of its own which I cannot control with the pause function. Also I don't seem to be able to put it on a specific level.. it is always on the top of everything. 

 

 

Many thanks.

 

[celli 77 Likes (Contributor)]

Hi Buster,

 

The repeat is on -1 which will repeat infinitely, so if you change that to something like 5, for example, it should only repeat 5x.

 TweenMax.to(elm,R(0,5)+3,{y:h,ease:Linear.easeNone,repeat:5, delay:-5});

To set this on it's own layer, you should wrap it in it's own <div> and then set the position to absolute and the z-index to whatever you'd like, and that should give you the control to place this on whatever layer you'd like.

[tekkon 0 Likes (Newbie)]

Ok...

Did you managed to get this to work in a banner? I have been making banners for a year now using Animate CC only and I am so struggling with getting Particles into a banner while keeping the whole ting under 150kbs :(

[ohem 333 Likes (Leader)]

The reason the particles are at the top level right now is because of the z-index:2; in the css for the "dot".  Removing that (or giving the image a higher z index) will send the dots behind the image.

[mikel 4,000 Likes (Superhero)]

Hi @Buster,

 

To start and stop an emitter @OSUblake gave an example: thread

 

 

See the Pen mGEOop by osublake (@osublake) on CodePen

 

Happy tweening ...

Mikel