Jump to content
Search Community

How to use staggerTo with offset between elements?

trueicecold test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello all,

 

I'm trying to move X elements to a specific position, but have a different X for each element.

Please refer to the CodePen. I want to make it look like a card dealing, so the second element should appear next to the first one, the third next to the second etc...

 

I tried to use x as a function, assuming I can multiply the index by the card width and add a margin offset, but index always returns as 0...

 

How can I achieve this with GSAP?

 

Thanks!

See the Pen KNeoeq by trueicecold (@trueicecold) on CodePen

Link to comment
Share on other sites

Ah, the index is always 0 because a staggerTo() literally creates a bunch of individual tweens (one for each target), so technically there truly is only 1 element for each tween (index:0). The solution is to tap into the "cycle" feature that's specific to the stagger functions:

TweenMax.staggerTo(".card", 2, {
  y:100, 
  cycle:{
    x:function(i, t) {
      return i * t.offsetWidth;
    }
  }
}, 0.5);

Or, of course, you could just do a loop yourself and feed in the appropriate data to each tween. Either way is fine. 

  • Like 3
Link to comment
Share on other sites

I'm going to sneak this answer under Greensock's nose.

 

The catch is because it's a staggerTo, so you have to use cycle.

 

TweenMax.staggerTo($(".card"), 2, {
  y: 100,
  cycle:{
    x: function(i) {
      console.log(i)
      return 30 * i
    }
  }
}, 0.5)

XD

  • Like 2
Link to comment
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.
×
×
  • Create New...