Jump to content


Stagger offset in svg gradient color stops - percentage suffix missing

Recommended Posts

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

Link to comment
Share on other sites

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 ...



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

Edited by mikel
too fast
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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




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?


  • Like 4
Link to comment
Share on other sites



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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.