Timeline optimization and performance + question on nesting

VecchiaPrugna · January 10

Hello everyone, I'm fairly new to gsap. Here's a codepen of a simple hero animation I built.
I achieved what I wanted: reveal the container using clip-path and then see all the photos in sequence with an interval of 0.5 second for each photo.

Question 1: Is the thinking process correct? Can I optmize my code? What would you have done if you wanted to achieve this effect?

I'm really curios on how a gsap expert would have built this animation.

Question 2: since this is a intro animation, should I preload/prefetch the images in the <head> to improve performance?
Question 3: If I wanted to add an effect that overlaps with this whole timeline, how should I do it? What if I wanted to add scale to my img container from 1.5 to 1 that begins at the start of the master timeline and ends when the master timeline ends?

I hope I've been clear enough, English is not my primary language

See the Pen GRejrMX by ykvdnykw-the-bold (@ykvdnykw-the-bold) on CodePen

Rodrigo · January 10

Hi @VecchiaPrugna and welcome to the GSAP Forums!

Maybe something like this:

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

The only change is to use staggers instead of a loop in your sequence. You can learn more about Staggers here:

https://gsap.com/resources/getting-started/Staggers

Hopefully this helps.

Happy Tweening!

Notifications

Messages

Timeline optimization and performance + question on nesting

Recommended Posts

VecchiaPrugna

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members