timeline .staggerTo update to v.3

[ninmorfeo]

Hi, I haven't used gsap for some time and I am now with the new version. I need to convert the old functions but I'm having some problems.
For example, how do I convert the following timeline function?
               

.staggerTo(chi, 1.5, {
                    x: '-=70',
                    rotationY: 180,
                    rotationX: -10,
                    boxShadow: '20px 20px 15px 0px rgba(0,0,0,0.1)',
                    ease: Power4.easeOut
                }, 0.05)

I tried to convert it with the following code but the starting parameter (0.05) of the stagger gives me some problems, I guess it doesn't go where I wrote it...

 

   .to(chi, {
            x: '-=70',
            rotationY: 180,
            rotationX: -10,
            boxShadow: '20px 20px 15px 0px rgba(0,0,0,0.1)',
            ease: Power4.easeOut,
            stagger: {
                each: 1.5
            }
        },0.05)  

 

[akapowl]

 

Hello @ninmorfeo

 

What you are referring to as the starting parameter actually is the amount of stagger for in between starts of each element. In your converted version it should go where you now have the 1.5 - which is the actual duration of the tween, so that should go in the duration property.

 

If the code below doesn't work for you, please provide a minimal demo that makes it clearer, what you are expecting to happen.

 

gsap.to(chi, {
  duration: 1.5,
  x: "-=70",
  rotationY: 180,
  rotationX: -10,
  boxShadow: "20px 20px 15px 0px rgba(0,0,0,0.1)",
  ease: "power4.out",
  stagger: {
    each: 0.05
  }
});

 

 

Old

 

See the Pen WNaMYGG by akapowl (@akapowl) on CodePen

 

 

 

New

 

See the Pen XWxZypE by akapowl (@akapowl) on CodePen

 

 

 

 

[ninmorfeo]

I use this other example, I think it's more understandable:

   .staggerTo(chi, 0.5, {
                    x: '+=50',
                    ease: Power4.easeOut
                }, 1, "-=2.2");

the parameter "-=2.2" let me start stagger animation 2.2 second before the end of previous chained animation on timeline.
How i can have the same result with v3 ?

[akapowl]

Use the position parameter as you did before, but now with the stagger parameter before the position parameter removed.

 

See the Pen xxyYQjm by akapowl (@akapowl) on CodePen

[ninmorfeo]

ok thanks, its work