Jump to content
Search Community

Animating Stroke / Multiple Strokes

pauljohnknight test
Moderator Tag

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

Hi

 

I have simple text logo from Adobe illustrator with two strokes (done via the appearance panel in Ai). 

 

 

I want to play around with animating the outer stroke and inner letter – what is the best way to do this with Greensock?  I’ve hit a bit of a wall (I am comfortable using tweens and timelines using GSAP, but up until now I have done so on divs / text / DOM elements etc).

 

In the CodePen example above I’ve put a simple tween on the letter m, but can’t seem to work out from googling how to target the stroke on a multi-stroke svg (say, for a color or opacity animation).

 

Any help would be awesome.

 

Paul.

 

P.S When I tweak the inline SVG code it lets me manually change the outer-stroke for the letter a, but not for other letters which is also confusing me?  When I check the Ai file every letter is stacked correctly on individual layers etc and without any excess sub-layers.

 

 

 

 

See the Pen xOPvAQ by pauljohnknight (@pauljohnknight) on CodePen

Link to comment
Share on other sites

  • Solution

Hi pauljohnknight  :)

 

If I understand your question correctly, you need to get to the paths inside the group. You've got quite a few paths in there, but right now you're targeting the entire #letter_m group. If you want to do something like staggering the individual paths, you could do this:

TweenMax.staggerFrom ('#letter_m path', 1, {scale: 2, autoAlpha: 0, ease:Power4.easeOut},0.5);  

If you want to target one specific path in the group, you'd have to give that path a class or ID.

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Thanks Carl.

 

That all makes sense and works now - for some reason some of the svg data had been duplicated, so it was only changing the color of the outer stroke which was actually underneath another identical outer stroke, so it looked like nothing was happening if that makes sense.

Also GSAP is such an amazing tool. I'm going to sign up for one of membership packages when I'm back from my holiday. The work you guys have done is amazing.

 

Thanks again.

 

Paul.

 

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