[How convert this GSAP 2 to GSAP 3]

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

[How convert this GSAP 2 to GSAP 3]

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

[How convert this GSAP 2 to GSAP 3]

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; }'.

[How convert this GSAP 2 to GSAP 3]

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)