Jump to content
GreenSock

MindGamer

Is it possible to animate the color of SVG paths with DrawSVG?

Go to solution Solved by PointC,

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'm trying to think of a way this can be done with GSAP:

 

I'm currently porting this site: http://ifate.com to HTML5/JS

 

One of the Flash effects that's used throughout the site is the "gleam" or "phong" that you see rotating around the curved borders of content areas. You can see these 'gleams' moving around the main content area in the top left of the homepage.

 

This used to be done pretty easily in Flash with masking, and rotating a gradient object behind the border mask.

 

I've tried doing the same thing with CSS Masking and the result is very processor intensive, super janky and doesn't look great.

 

So now I'm trying to approximate the same effect using DrawSVG which seems to be much faster/smoother.

 

The problem is that I don't think I can achieve the necessary gradient effect using SVG gradients animated with DrawSVG. 

 

Here's my lame attempt to do it with multiple overlapping SVG paths.... Not great. The staggered colors are much too visible for me.

 

 

Is there any way to apply a real gradient to a tweened SVG?

 

 

The second issue that I noticed immediately, is that when you use DrawSVG on a circle or closed shape, there's a little jumpy weirdness around the point of origin. (In this case, at the top right of the box in the Codepen above). Is there any way to smooth out the transition from 100% around to 0% to 'rotate' the visible part of an SVG path around closed shapes?  I tried animating the SVG from 0% 5% to 100% 105%, but that doesn't seem to work.

 

Is there an approach to minimize this jump?

 

 

See the Pen QEZGkj by Bangkokian (@Bangkokian) on CodePen

Link to comment
Share on other sites

  • Solution

Hi MindGamer :)

 

There is a recent lengthy thread involving gradients and drawSVG that should prove useful to you:

 

http://greensock.com/forums/topic/14743-multi-colored-lines-in-svg/

 

Regarding the jump you're seeing at the point of origin - you'll probably need two paths to make a seamless loop like that. We had a similar question in this thread:

 

http://greensock.com/forums/topic/12546-seamless-loop-with-drawsvg/

 

Hopefully those links help a little bit.

 

Happy tweening.

:)

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