GiddyMachine Posted November 10, 2021 Share Posted November 10, 2021 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 More sharing options...
GreenSock Posted November 10, 2021 Share Posted November 10, 2021 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. 👍 1 Link to comment Share on other sites More sharing options...
PointC Posted November 11, 2021 Share Posted November 11, 2021 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. 4 Link to comment Share on other sites More sharing options...
GreenSock Posted November 11, 2021 Share Posted November 11, 2021 5 hours ago, PointC said: I present the 'Dogwood Tree' losing its leaves. See what I did there? Ha! Love it, @PointC. Clever. Quite entertaining to watch the dogs gently falling from the sky. 2 Link to comment Share on other sites More sharing options...
GiddyMachine Posted November 11, 2021 Author Share Posted November 11, 2021 Oh wow thanks guys! Will take a look and post back up with the results. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now