How convert this GSAP 2 to GSAP 3

[teste_brazil_1998]

Hello guys,

 

How can I transform this to GSAP 3 ? 

 

tl.staggerTo(['.sun', '.moonMask', '.moon'], 1, {
 cycle:{
  attr:[{cx:'-=140', cy:'-=20'}, {cx:'-=140', cy:'-=20'}, {cx:'-=90',  cy:'-=0'}]
 }
},0)

[elegantseagulls]

const tl = gsap.timeline()

tl.to(['.sun', '.moonMask', '.moon'], {
  attr: gsap.utils.wrap([{cx:'-=140', cy:'-=20'}, {cx:'-=140', cy:'-=20'}, {cx:'-=90',  cy:'-=0'}]),
  duration: 1, 
  stagger: yourStaggerAmount // yours is currently none, so you could remove this line
}

Check out GSAP's wrap utility to compare to the old cycle: https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

I haven't had my coffee yet, so let me know if this has issues ☕

 

[teste_brazil_1998]

5 minutes ago, elegantseagulls said:

const tl = gsap.timeline()

tl.to(['.sun', '.moonMask', '.moon'], {
  attr: gsap.utils.wrap([{cx:'-=140', cy:'-=20'}, {cx:'-=140', cy:'-=20'}, {cx:'-=90',  cy:'-=0'}]),
  duration: 1, 
  stagger: yourStaggerAmount // yours is currently none, so you could remove this line
}

Check out GSAP's wrap utility to compare to the old cycle: https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

I haven't had my coffee yet, so let me know if this has issues ☕

 

Typescript show this error 

 

Type '(index: number) => { cx: string; cy: string; }' is not assignable to type 'AttrVars'.
  Index signature for type 'string' is missing in type '(index: number) => { cx: string; cy: string; }'.

[teste_brazil_1998]

I'm trying to convert this button to my React site. Would you help me ?

 

See the Pen eezVOJ?editors=0010 by chrisgannon (@chrisgannon) on CodePen

[elegantseagulls]

The code I provided seems to work for me:

See the Pen PodWOWa?editors=1111 by elegantseagulls (@elegantseagulls) on CodePen

 

Check this out for react:

This is the basics on converting GSAP2 to 3:

 

[elegantseagulls]

14 minutes ago, teste_brazil_1998 said:

convert this button to my React site

@chrisgannon has a lot of complexities going on in his button. I'd recommend starting simple with your own design and working up from there than just trying to pull a larger complex animation into your site all at once.

[teste_brazil_1998]

1 hour ago, elegantseagulls said:

@chrisgannon has a lot of complexities going on in his button. I'd recommend starting simple with your own design and working up from there than just trying to pull a larger complex animation into your site all at once.

How would this one look?

 

tl.staggerFromTo(allClouds, 0.6, {
 cycle:{
  y:[120, 160],
  x:[0]
 }
},
{ cycle:{
  y:[0],
 x:[0]
 },
 alpha:1,
 immediateRender:false
},0.06,'-=1')

[elegantseagulls]

Everything you need should be in this article.