Problems animating more than 300 elements ...

[Fernando Cohen]

Hello everyone! It is the first time that I have participated in this forum, but it is not the first time that I have used its resources. At this moment I have a problem, I want to try to make a page transition, and my idea is that the screen is filled with tree leaves, but when putting 300 elements it looks very slow; I leave you the code of how I am progressing, I hope you can guide me to achieve my goal. Sorry for my English

See the Pen eYmeMGj by designfenix (@designfenix) on CodePen

[ZachSaucier]

Hey Fernando and welcome to the GreenSock forums.

 

I see that you're using the old GSAP syntax. Why is that? We highly recommend the newer, sleeker syntax that lets you use new features like GSAP's defaults. Upgrading is easy! Perhaps GSAP's most common mistakes article can help you out. GSAP 3's utility methods like random can also save you from having to write your own random function.

 

As for your performance issues, that's simply because browsers simply can't animate that many DOM elements at the same time. You'll get much better performance using something like <canvas> instead. 

[Fernando Cohen]

Do you have any idea how I can transition as seen in the first few seconds of this video?
 

 

I imagine that I have to do some kind of calculation considering the width and height of the window ... and I would have to create elements that start to scale from the edges of the screen ... I have the idea in my head, but I can't get down to detail something initial.

[ZachSaucier]

42 minutes ago, Fernando Cohen said:

Do you have any idea how I can transition as seen in the first few seconds of this video?

That's a bit out of scope for what we normally provide for free in these forums, but...

 

There are a lot of ways to create that sort of thing. I recommend slowing down the video so that you can see each frame of the animation so see the details of it. You could create it using:

• A video
• Sprite(s)
• Canvas

I'd probably try using sprites to begin with.