Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Salakala

It's the season (Simple snow animation in GSAP and Animate CC)

Recommended Posts

Hi!

 

This has been a recurring question for me every winter season of making banners and I have never found a good working solution.
I have AnimateCC (Canvas)+ Greensock workflow and I need to animate some snow falling  in the background during the banner.  A simple setup with 2-3 different starting symbols for snow and a way to place them on the canvas randomly and moving them randomly from top to bottom inside a timeline. I have a sturdy knowledge how to use Gsap and timelines in banner workflows but other then that I'm pretty useless with code.  Plenty of snow tutorials available in GSAP but none in Animate CC using canvas and GSAP.  So the question is: how do you randomly duplicate a movie clip and make each movie clip follow a random path. Any hints would be apreciated. Attached is a simple banner template that shows the timeline control that I use and includes text and snow symbols.

snowbanner.fla

Link to comment
Share on other sites

1 hour ago, Cassie said:

Whoa... a blizzard :)  Nice. But it looks to be using pixie. Id avoid going outside Animate and greensock. And keep it simple.

Than you for the info!


 

1 hour ago, Cassie said:

You can't really beat @OSUblake's snow particle pen -

 

 

 


And this thread is ridiculously informative
 

 

 


Hope it helps!

 

 

  • Like 1
Link to comment
Share on other sites

I slowed down the snow and added a semi transparent layer above so that the snow did not distract too much from the message of the banners since the headline was also white.

Link to comment
Share on other sites

Great insights and nice effect! 😀 Unfortunately im looking for a solution in Adobe Animate and Greensock. Animate uses canvas as final output and i would like to animate Animate symbols with greensock.

 

Thannks to all. 

Link to comment
Share on other sites

14 hours ago, Salakala said:

Great insights and nice effect! 😀 Unfortunately im looking for a solution in Adobe Animate and Greensock. Animate uses canvas as final output and i would like to animate Animate symbols with greensock.

 

Look at the demo Cassie posted above. Pixi, Animate, HTML, SVG, WebGL... doesn't matter as the concept is still the same. You just call an animate function for every snowflake in your scene.

 

function animateSnowflake(snowflake) {  
  gsap.to(snowflake, { duration: "random(1, 10)", x: "-=200", repeat: -1, yoyo: true, ease: "sine.inOut" });
  gsap.to(snowflake, { duration: "random(1, 8)", y: h + 100, ease: "none", repeat: -1, delay: -15 });
}

 

 

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.
×