Stagger offset in svg gradient color stops - percentage suffix missing

[Becca]

Hi there,

 

I am relatively new to gsap so I hope my question isn't too dumb
I would like to change the offset values of multiple color-stops in a svg gradient with staggerTo. The problem is, during the tween the percent suffix is missing. According to AttrPlugin Docs it should be possible. When I use the To-Tween, everything works perfectly, but not with staggerTo.
 

Please have a look at my pen.

 

Thanks for any help, Becca

See the Pen rJNwZx by becca1811 (@becca1811) on CodePen

[mikel]

Hi @Becca,

 

Welcome to the GreenSock Forums.

 

The coding of a timeline looks like this :

 

var action = new TimelineMax()
  .staggerTo('#gradient stop', 2, {
    attr: {
      'offset': '+=10%'
    },
      repeat: 1,
      repeatDelay: 1,
      yoyo: true
    }, .2)

 

Happy tweening ...

Mikel

 

Sorry, I was to fast. I do not understand which result you want to achieve.

Edited January 29, 2018 by mikel
too fast

[Becca]

Thanks! I fixed my code, but there is still no percent suffix while the tween is going on.  

[GreenSock]

Ah yes, it doesn't support mixing a suffix with a relative value but I've added support in the next update of GSAP which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

Better? 

 

In the mean time, you could use a function-based value and build the value appropriately like this:

See the Pen XZJrpB?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Or if you want to be fancy, you could even use ModifiersPlugin to add the % dynamically on each tick like this: 

See the Pen oEgvxV?editors=1010 by GreenSock (@GreenSock) on CodePen

 

But frankly the first option is more performant overall. 

 

Does that help?

 

[Becca]

Hi, 

 

thank you very much. For now, I go with the function-based value, works perfectly.

I also tried the 1.20.4 beta, it worked fine with integers, but breaks when decimal numbers are used:
TweenMax.js:7033 Error: <stop> attribute offset: Trailing garbage, "36.5.%".
Maybe that's an issue...

 

Thanks again, Becca

[GreenSock]

Ah, good catch. That should be fixed now in 1.20.4 (beta).