gsap.to with a variable for the amount to move

[Antdev]

Hello

 

Need a little help with some syntax. I want to change the x position of an element by a dynamic amount but can't get the syntax correct.

 

x:"+=variable" doesn't work, nor does x:+=variable

 

Thanks

 

Ant

 

p.s apologies for the text formatting - I could not remove it

 

function doThatThing() { 
  gsap.to(".square", {x:"+=100, duration:2"})
}

function doThatThingVariable() {
  const amount = 100
  gsap.to(".square", {x:"+=amount, duration:2"})
}

 

 

 

See the Pen RwxOYLQ by antdev (@antdev) on CodePen

[Antdev]

Doh! If I put my glasses on and read the documentation I would have read this:

To use a variable in a relative way, simply add the "+=" or "-=" prefix, like {x: "+=" + yourVariable}.

 

See the Pen vYpMzzj by antdev (@antdev) on CodePen

[Cassie]

Yep, just JS. No GSAP specific magic here! You can also use a template literal like so - `+=${variable}`

Glad you got it fixed!

[Antdev]

Thanks Cassie, that is useful to know about the template literal too.