Jump to content
Search Community

How to tween offset values of gradient in SVG

jiggy1965 test
Moderator Tag

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">
  <defs>
    <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"/>
    </linearGradient>
  </defs>
  <title>gradient</title>
  <rect width="336" height="280" fill="url(#linear-gradient)"/>
</svg>

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

 

http://codepen.io/GreenSock/pen/RKjPyJ?editors=1010

 

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

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.
×
×
  • Create New...