Jump to content
Search Community

Creating a particle animation

Dayo test
Moderator Tag

Go to solution Solved by OSUblake,

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

Hello!

 

I'm trying to create a particle animation, something like this: http://i.imgur.com/OGpHy9m.gif

The only thing difference is that i want each bubble to move a bit sideways as well.

 

I found most of what i needed on the forum but now I'm stuck. 

 

As you can see in the codepen the bubbles move a bit but when the animation restarts it looks like a glitch, as i understand it,

the bubbles start at their original x and y positions which is why that happen. I tried with yoyo set to true but that did nothing. 

 

I'm fairly new to Javascript so the code might not be best practice, feel free to correct me on this , always good to learn. 

 

Any help is much appreciated!

 

Thank you

See the Pen QEmjwB by Day-o (@Day-o) on CodePen

Link to comment
Share on other sites

Hi,

 

Unfortunately your codepen froze my browser so I had to close the tab before I was able to look at your code.

 

Here are several samples of particle animations that should help you :

 

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

 

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

 

See the Pen rJtjw by jamiejefferson (@jamiejefferson) on CodePen

 

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

 

Also Blake has some other particle animations samples created with PIXI but I couldn't find them, hopefully He'll come around this thread and share the links

  • Like 6
Link to comment
Share on other sites

Hi,

 

Unfortunately your codepen froze my browser so I had to close the tab before I was able to look at your code.

 

Here are several samples of particle animations that should help you :

 

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

 

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

 

See the Pen rJtjw by jamiejefferson (@jamiejefferson) on CodePen

 

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

 

Also Blake has some other particle animations samples created with PIXI but I couldn't find them, hopefully He'll come around this thread and share the links

 

Thanks for this info, it will definitely help us..

Thank you !!

  • Like 1
Link to comment
Share on other sites

  • Solution

Here's some Pixi/canvas stuff...

See the Pen oLGBXy?editors=0010 by osublake (@osublake) on CodePen

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

See the Pen vNwRdO?editors=0010 by osublake (@osublake) on CodePen

 

That snowflake one is a good example. There are only 2 lines of code used to animate each snowflake.

TweenMax.to(snowflake, random(1, 10), { x: "-=200", repeat: -1, yoyo: true, ease: Sine.easeInOut });
TweenMax.to(snowflake, random(1, 8), { y: h + 100, ease: linear, repeat: -1, delay: -15 });
  • Like 6
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...