Animating and increment a delay on many items with the same class

[dxc01]

Hello  On my first gsap project I'm struggling to work out how I can animate all the elements with the classname of ---l to start at the same time but have a tiny delay and finish a little after one another. 

 

I'm using the awesome timeline feature so I can chain events. 

 

const tl = gsap.timeline({ paused: true })
tl.to(nav, { duration: 1.1, ease: "power2", x: 0, y: 0, z: 0 })
  .from(iLettersList, { duration: 1.1, x: 15, transformOrigin: "left" }, "-=1.2")

Each class ---l would need a delay going up by say 0.3s, 0.6s, 0.9s, 1.2s and so on. Sure I could set a {delay:2} on each to() or from() but you wouldn't be able to achieve this kind of effect. 

See the Pen PoPZvqd by d--c (@d--c) on CodePen

 

Perhaps this may be too difficult for a first stab but it would be awesome to work out how to do with GSAP. 

 

Thanks very much for any help and guidance 

 

 

See the Pen QWjyPpB by d--c (@d--c) on CodePen

[ZachSaucier]

Hey dxc01 and welcome to the GreenSock forums! 

 

2 hours ago, dxc01 said:

Perhaps this may be too difficult for a first stab but it would be awesome to work out how to do with GSAP. 

Pfft. I'd argue it's significantly easier to do staggering like this in GSAP compared to CSS once you get used to how GSAP works. I think you're going to love GSAP's stagger capabilities. For example, your first pen can be created using GSAP like so: 

See the Pen NWGNKoP?editors=0010 by GreenSock (@GreenSock) on CodePen

 

That has the huge benefit of not having to manually write each delay value! So if you want to change the value, you just change the 0.2 to something else and don't have to worry about adding them correctly. It also handles as many elements as you have, you don't have to write a new rule for each element.

 

Your second demo is not as clear what you're hoping to do to me. ---l is an invalid class name, so that's likely why you were having so much trouble affecting it with CSS and JS. Classes should start with a letter. 

 

I think you're wanting something along the lines of this:

See the Pen wvKGvWM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

The GSAP documentation can likely answer most of your questions, but please let me know if you have any remaining questions about my approach  

[dxc01]

Thnaks, Zach! This is pretty much bang on - it's just the translate stuff that is missing but i will give this a go! Many thanks indeed.