Jump to content
GreenSock

Luckyde

MorphSVG - Animating gradient assets

Go to solution Solved by Jonathan,

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

Hi guys,

I love gsap, have used it for years from flash to js and i just bought the premium kit. Its fantastic, however I have a question. I'm trying to create an effect which involves bending paper which has a gradient on it. I found a way to do it was to use a flat shape over the gradient svg data from illustrator and then morph that flat shape into a new flat shape. And since it's a clippath it makes a great effect over the gradient. However I can't seem to move the gradient svg like i can the Path shape. Do you know if you can either
a ) Move/scale/make transparent gradients from illustrator with tween lite/max
b ) Ideally manipulate the gradient information with tween max
If b ) causes more processing power then ignore that part since this is meant for tablets(my ad) so I wouldn't want it to chug.

Also he code that illustrator spat out looks something like
 

<defs>
   <path id="MainPath" d="M231.848,158.387c-33.09,0.716-74.07,8.37-98,13.464v204.45c15.938-0.297,76.668-0.936,130,5.086
			  c63.875,7.213,167,24,167,24s10-40,16-113c6-73,5-112,5-112s-29-9-60-14c-26.627-4.295-68.757-8.343-128.907-8.344
			  C253.064,158.043,242.709,158.152,231.848,158.387"></path>
</defs>
<clipPath id="SVGID_2_">
	<use xlink:href="#MainPath" style="overflow:visible;"></use>
</clipPath>
		
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-43.4204" y1="504.0273" x2="-42.4208" y2="504.0273" gradientTransform="matrix(349.917 -158.4003 -158.4003 -349.917 95195.0625 169869.4375)">
	<stop offset="0" style="stop-color:#D1D3D4"></stop>
	<stop offset="0.2729" style="stop-color:#C8CACC"></stop>
	<stop offset="0.4812" style="stop-color:#BEC0C2"></stop>
	<stop offset="0.6409" style="stop-color:#CBCDCE"></stop>
	<stop offset="0.9367" style="stop-color:#EEEEEE"></stop>
	<stop offset="1" style="stop-color:#F6F6F6"></stop>
</linearGradient>

It's really bizzare that I can't modify SVGID_3_ but I can refer and modify everything else. 
And one more question. Illustrator exports clip path but I'm seeing you guys use a "mask" parameter. For svg is it the same thing? Or faster? Less support?

Sorry for all the questions and thanks!

See the Pen WraOVy by jonathan (@jonathan) on CodePen

Link to comment
Share on other sites

Hello Luckyde, and Welcome to the GreenSock forum!

 

Do you have any of your GSAP code for context. It will hard to see whats going on without seeing your GSAP code

 

We love having code we can test live and debug. Here is a nice video tut by GreenSock on how to create a codepen demo example

 

 

This we we can help you better by seeing your code in a live editable environment

 

Thanks :)

  • Like 1
Link to comment
Share on other sites

Well I learned something new today :)

Codepen URL: 

See the Pen MKPKGW by LuckyDe (@LuckyDe) on CodePen



Notice how the morph works but the basic tween after that doesn't.

Is there a way to make that work or to change the left, top, or opacity of the gradient

And in a perfect world to manipulate somehow the gradient's data so it morphs the gradient with Tweenmax?

And note how illustrator makes me these clip paths, but on threads like
http://greensock.com/forums/topic/13675-animating-svg-linear-fill/
I see you're using 'mask' tags, is there a difference between the two?

Link to comment
Share on other sites

Bump, could still use some help on any of the above questions

Link to comment
Share on other sites

Here Luckyde..

 

If you want to animate a gradient, there are many ways to this with GSAP.  But i will just show you a simple but powerful way

 

This animates an SVG linear gradient using TimelineMax, staggerTo(), and the cycle special property

 

See the Pen WraOVy by jonathan (@jonathan) on CodePen

 

The above example uses:

basically just one tween to animate the SVG linear gradient

// animate the linear gradient
.staggerTo("#SVGID_3_ stop", 1, {
    stopColor:'#cc0000',
    cycle:{
       stopColor: ['#ff9999','#ff7777','#ff5555', '#ff3333','#ff1111','#ff8888']    
    }
}, 0.2, 0)

And all together:

// create a timeline instance in a paused state
var tl = new TimelineMax({paused:true});

tl

// morph the shape of the path tag
.to("#MainPath", 1, {morphSVG: "#MainPathEnd"}, 0)

// move the linearGradient tag
.to("#SVGID_3_", 1, { x: 200 }, 0)

// animate the linear gradient
.staggerTo("#SVGID_3_ stop", 1, {
  stopColor:'#cc0000',
  cycle:{
    stopColor: ['#ff9999','#ff7777','#ff5555', '#ff3333','#ff1111','#ff8888']    
  }
}, 0.2, 0)

// pre-record GSAP properties and values
.progress(1).progress(0)

// play the timeline
.play();

x

Regarding the difference between SVG Clipping and Masking, check out this link:

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking

 

GSAP can deal with either way :)

 

Resources:

TimelineMax Docs: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

staggerTo() Docs: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerTo/

GSAP cycle and stagger tweens info: http://greensock.com/gsap-1-18-0

  • Like 5
Link to comment
Share on other sites

Nicely done Jonathan!

 

You're working too hard on a Friday night - take some time off - have some pizza or something.  :)

  • Like 4
Link to comment
Share on other sites

You're amazing! I'm still trying to wrap my head around all this , that's a lot of new stuff and thank you for this!
I wanted to ask why did you stager to SVGID_3_ stop and not just the id? Does adding stop trigger it since It's animating the stopColor?
Also could I move that gradient using the same reference or do I need to go SVGID_3_ topleft or something similar to make it change position?

Thanks again for all this help! 

Here Luckyde..

 

If you want to animate a gradient, there are many ways to this with GSAP.  But i will just show you a simple but powerful way

 

This animates an SVG linear gradient using TimelineMax, staggerTo(), and the cycle special property

 

See the Pen WraOVy by jonathan (@jonathan) on CodePen

 

The above example uses:

basically just one tween to animate the SVG linear gradient

// animate the linear gradient
.staggerTo("#SVGID_3_ stop", 1, {
    stopColor:'#cc0000',
    cycle:{
       stopColor: ['#ff9999','#ff7777','#ff5555', '#ff3333','#ff1111','#ff8888']    
    }
}, 0.2, 0)

And all together:

// create a timeline instance in a paused state
var tl = new TimelineMax({paused:true});

tl

// morph the shape of the path tag
.to("#MainPath", 1, {morphSVG: "#MainPathEnd"}, 0)

// move the linearGradient tag
.to("#SVGID_3_", 1, { x: 200 }, 0)

// animate the linear gradient
.staggerTo("#SVGID_3_ stop", 1, {
  stopColor:'#cc0000',
  cycle:{
    stopColor: ['#ff9999','#ff7777','#ff5555', '#ff3333','#ff1111','#ff8888']    
  }
}, 0.2, 0)

// pre-record GSAP properties and values
.progress(1).progress(0)

// play the timeline
.play();

x

Regarding the difference between SVG Clipping and Masking, check out this link:

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking

 

GSAP can deal with either way :)

 

Resources:

TimelineMax Docs: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

staggerTo() Docs: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerTo/

GSAP cycle and stagger tweens info: http://greensock.com/gsap-1-18-0

Link to comment
Share on other sites

Luckyde, To answer your questions

 

I wanted to ask why did you stager to SVGID_3_ stop and not just the id?

That is because i am animating the children of <linearGradient> tag, the <stop> tags stopColor (css stop-color) property.

 

Does adding stop trigger it since It's animating the stopColor?

'stop' is just the child tags of the linearGradient tag. The staggerTo() tween loops through all 6 <stop> tags, and animates their stop-color value. The 'cycle' object has an array that holds 6 values, (one ending color of each <stop> tag). Which will be used by GSAP to animate to, or shall i say staggerTo

 

Also could I move that gradient using the same reference or do I need to go SVGID_3_ topleft or something similar to make it change position?

you would just add the svg <stop> tags properties (or properties that relate to the stop elements attributes). So you could add the offset property if you need to adjust the gradients position.

 

Available attributes for the <stop> element:

GSAP can either animate these as attributes using the AttrPlugin or as CSS related properties using the CSSPlugin

 

Resources:

SVG <linearGradient> element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient

SVG gradient <stop> element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop

  • Like 3
Link to comment
Share on other sites

Hey Jonathan, again thank you so much for all tips! Today I learned the staggering, labeling , sequencing and found your shapeIndex debugger online so that was extremely useful!
I think I got it working now

See the Pen OMBwjb by LuckyDe (@LuckyDe) on CodePen


If you think there are easier ways or better ways than this for making a morph sequence which also has a gradient in a morph let me know! I need to do 9 more of these pieces of paper by monday.

 

With that gradient cycle is there a way to indicate to push the gradient by one  (lets say it has 5 gradient stops) so instead of 

Overwriting the gradient on blend
1 2 3 4 5

Width the cycle[] of colors to 

6 7 8 9 10

To instead push 1 shade so that it becomes

2 3 4 5 6

 

So you wouldn't need to rewrite the whole gradient each time? Also I forgot to ask last time why do you have a stopcolor declared twice on your example
 

stopColor:'#cc0000',
  cycle:{
    stopColor: ['#ff9999','#ff7777','#ff5555', '#ff3333','#ff1111','#ff8888']    

But these are now just questions for making my life with this easier, overall you've more than defiently answered my original question and i owe you a lot :) thanks!

Link to comment
Share on other sites

  • Solution

If you go to this link, that page explains the GSAP cycle property, that is only available in stagger tweens:

 

http://greensock.com/gsap-1-18-0

 

That is what I used in the above linearGradient animate example:

 

See the Pen WraOVy by jonathan (@jonathan) on CodePen

 

Below is taken from that cycle page:

 

Have you ever wanted to animate a bunch of elements/targets and alternate between certain values (or even randomize them) in a staggered fashion? The new super-flexible "cycle" property does exactly that.

 

Instead of defining a single value (like x:100, rotation:90),

  • you can define an Array of values to cycle through (like cycle:{x:[100,-100], rotation:[30,60,90]})
  • or even use function-based values (like cycle:{x:function() { return Math.random() * 200; }}). The amount of functionality you can pack into a single line of code is staggering (pun intended).
And you can learn how cycle works. The cycle property is available only in the staggerTo(), staggerFrom(), and staggerFromTo() methods in TweenMax, TimelineLite and TimelineMax. The "cycle" property allows you to add rich variations to staggered animations

 

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