Jump to content


How to tween offset values of gradient in SVG

Go to solution Solved by jiggy1965,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I've got this simple SVG of a rectangle with a gradient:

<svg id="mysvg" data-name="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 336 280">
    <linearGradient id="linear-gradient" x1="0" y1="280" x2="336" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#e51dc1"/>

      <stop offset="35%" stop-color="#e51d6a"/>

      <stop offset="100%" stop-color="#e51d28"/>
  <rect width="336" height="280" fill="url(#linear-gradient)"/>

Now I wish to tween of the 35% stop offset value to 80% and then back to 35% again. The stop-colors should stay as they are, just the stop offset of the middle gradient color should shift back and forth from 35% to 80% and back again. But how do I do that?

Link to comment
Share on other sites

It appears that using the AttrPlugin to target the offset attribute of the desired <stop> element will work.


TweenMax.to("#myOffset", 1, {
  attr: {
    "offset": "90%"
  repeat: 100,
  repeatDelay: 0.5,
  yoyo: true




I changed the color to white just to make the animation more noticeable.


Tested in only in Chrome. I know animating things in <defs> tags can sometimes work differently in different browsers. Be sure to test.

  • Like 2
Link to comment
Share on other sites


Tested it in Chrome, Safari and Firefox (Mac) and they all appear like I want them too. But if anyone can give some things to consider for browsers that might not produce the same effect? Perhaps some backup code to add?

Link to comment
Share on other sites

  • Solution

Ah never mind, I did found this with cross browser support , but that dealt with css gradients, not svg.

I think I can progress with the svg code you wrote, Carl

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.