Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dxc01

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

Recommended Posts

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

Link to post
Share on other sites

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 :) 

  • Like 4
Link to post
Share on other sites

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. 

  • Like 1
Link to post
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.

×