Unable to change staggerTo to version 3

[Ilima 3 Likes (Newbie)]

I'm trying to make this codepen example into React. But unable to do it with new version of Gsap and also new to GreenSock's animation. Here is the current React example in sandbox: https://codesandbox.io/s/cool-forest-ddzft?file=/src/drag.js

See the Pen 757300508dfb03b01b3e3fad237576b7 by Ilima (@Ilima) on CodePen

[ZachSaucier 7,132 Likes (Superhero)]

Hey Ilima.

 

The stagger docs cover how to use GSAP 3 staggers though I don't understand why a stagger is required as the original demo has 0 duration between each animation which is the same thing as not having a stagger.

 

cycle was replaced by gsap.utils.wrap, as covered in the GSAP 3 release notes though I don't understand why that original pen used cycle at all, they could just use a functional value for the rotation property. 

 

I think your issue is a React issue and I don't know enough about React to help. Maybe someone else will be able to help.

[Ilima 3 Likes (Newbie)]

On 9/8/2020 at 2:11 PM, ZachSaucier said:

Hey Ilima.

 

The stagger docs cover how to use GSAP 3 staggers though I don't understand why a stagger is required as the original demo has 0 duration between each animation which is the same thing as not having a stagger.

 

cycle was replaced by gsap.utils.wrap, as covered in the GSAP 3 release notes though I don't understand why that original pen used cycle at all, they could just use a functional value for the rotation property. 

 

I think your issue is a React issue and I don't know enough about React to help. Maybe someone else will be able to help.

 

 

Thank you so much! Solved my issue, also looks like I was just not using the state values.

 

gsap.to(".dialGrip", 0.6, {
  rotation: function (i) {
    return i === 0 ? rotation * 2 : rotation * 3;
  },
  stagger: 0,
});