Jump to content
Search Community

Trying to make it snow.

GiddyMachine test
Moderator Tag

Recommended Posts

Hello, 

I ran into this little demo put together by Diaco and I just need to tweek it a bit for a project I'm working on. As it stands now, the script takes a single image and creates falling leaves. I would like to convert to snowfall but have a question. 

 

How can I alter the script to randomly replace what is now a single leaf with one of 3 different snowflakes? Basically replace each element randomly with one of the three snowflakes I have (png)

 

Thanks in advance for your help!

 

GSAP RULZ!!!

See the Pen xxLJLGB by arne-w-knudson (@arne-w-knudson) on CodePen

Link to comment
Share on other sites

Hi @GiddyMachine. Thanks for being a Club GreenSock member!

 

It looks like Diaco is just applying a class of "dot" to each of the <div> elements that are dynamically generated, and that class has a background-image applied, so you could create a few other classes (with other background-image URLs) and randomly swap those in. 

 

In case it's helpful, there's a utility function that makes it super simple to randomly pull an element out of an Array: 

let pickItem = gsap.utils.random(["leaf", "snowflake-1", "snowflake-2"], true);

for (let i = 0; i < 100; i++) {
  console.log(pickItem()); // randomly picks one each time
}

If you still need some help, maybe you could make an attempt and provide that CodePen so we can see what you're doing and offer some advice. 

 

You probably know this already, but Diaco's CodePen is using a very old version of GSAP - I'd strongly recommend updating it and using the newer syntax that's much simpler. No more TweenLite or TweenMax. 👍

  • Like 1
Link to comment
Share on other sites

Another option is to use a sprite and randomly set the background position. Here's a quick demo showing how to loop though and do that. I've placed the actual sprite at the top of the demo so you can see the original image. Each div then just shifts the background position. 

 

See the Pen rNzrzpR by PointC (@PointC) on CodePen

 

I was just going to drop the demo above but I kinda wanted to see the dogs falling so I updated the original demo and added a couple of things. I present the 'Dogwood Tree' losing its leaves. See what I did there? ;)

 

See the Pen BadPdXx by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening and thanks for being a Club member.

:)

 

 

  • Like 4
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...