Jump to content
GreenSock

Hysteresis

Arrow Grow Animation - can't get it to work right with MorphSVG

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 am trying to get a curved arrow to grow along a path, but having difficulty making it work correctly. Does anyone have any suggestions on how to make this work? MorphSVG doesn't work as desired, as I need to have it look like it the arrow head is leading the growth, rather than just transforming into another shape.

 

Right now my codepen uses a mask to gradually show the line and I am moving the arrow head along a path using "pathDataToBezier". Which works okay, but it doesn't synchronize with the mask animation... despite my efforts to change timing and positioning of the mask, there must be a better way!

See the Pen ZWOVvO by dchadney (@dchadney) on CodePen

Link to comment
Share on other sites

  • Solution

Hi DanChadney  :)

 

I think part of the problem here is using a big circle as a mask for your arrow path. Getting the timing right on that can be a bit tricky. Since you're a Club member, you can use the drawSVG plugin to help with this.

 

I did a little write-up about revealing dashed strokes with the drawSVG plugin and masks here:

http://greensock.com/forums/topic/13681-svg-gotchas/?p=57942

 

As part of that post, I made a demo which should help you quite a bit. I have a little airplane flying over a map revealing a dotted path as it moves. This is basically the same thing you're doing with the arrowhead and path. Here's the CodePen:

See the Pen zrQLvO by PointC (@PointC) on CodePen

 

Hopefully that will give you some ideas and a direction to go with your project.

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

Happy to help.

 

I'm glad you got it working. It looks good. :)

Link to comment
Share on other sites

  • 4 years later...

Does the code work with the latest version of gsap? thanks!

Link to comment
Share on other sites

It's a little different now. GSAP 3 has the MotionPath plugin.

 

 

  • Like 2
Link to comment
Share on other sites

Hi, sorry I haven't used GSAP in a long time, is there any code examples for building an arrow using motionpathplugin? Thanks in advance!

Link to comment
Share on other sites

Here's a simple arrow along the path to get you started.

See the Pen wvGGzZq by PointC (@PointC) on CodePen

 

Does that help?

 

  • Like 2
Link to comment
Share on other sites

Thanks! I'll take a look. Can the two scripts be combined?

Link to comment
Share on other sites

Can I use the line being drawn with drawsvg as the motionpath at the same time?

Link to comment
Share on other sites

Sure. Switch to a timeline and have both animations start at the same time via the position parameter of 0.

See the Pen LYNNbOZ by PointC (@PointC) on CodePen

  • Like 4
Link to comment
Share on other sites

That works great, thank you!!!

 

My issue now is I'm having a hard time putting it into an existing timeline:

 

clientTimeline.add(currentMarker)
 
.set($('#section_home'), {css:{zIndex:-1}})
.fromTo("#section_1", 0.3, {opacity:0, y:10}, {opacity:1, y:20})
.set($('#section_1'), {css:{zIndex:99}})
 
.add("submenu-1") //end point for home
.to("#section_1", 0.3, {opacity:0, y:-300})
.set($('#section_1'), {css:{zIndex:-1}}) //changing z-index so btns work
.fromTo("#section_1-1", 0.3, {opacity:0, y:1000}, {opacity:1, y:10})
.set($('#section_1-1'), {css:{zIndex:99}})

 

How do I do this? Thanks in advance!

Link to comment
Share on other sites

I'm not sure I follow. I used a timeline in the second version of the arrow demo above.

 

Could you create a demo so we can see what you have so far?

 

 

Just FYI - you don't need that css:{}  wrapper in your tweens and I recommend you use the GSAP 3 syntax and put the duration in the vars. More info about migrating to GSAP 3.

 

  • Like 2
Link to comment
Share on other sites

Could I insert the arrow timeline into my main navigation timeline like this?

clientTimeline1.add(currentMarker)
 
.set($('#section_home'), {css:{zIndex:-1}})
.fromTo("#section_1", 0.3, {opacity:0, y:10}, {opacity:1, y:20})
.set($('#section_1'), {css:{zIndex:99}})
 
.add("submenu-1") //end point for home
 
.to("#section_1", 0.3, {opacity:0, y:-300})
.set($('#section_1'), {css:{zIndex:-1}}) //changing z-index so btns work
.fromTo("#section_1-1", 0.3, {opacity:0, y:1000}, {opacity:1, y:10})
.set($('#section_1-1'), {css:{zIndex:99}})
 
.add("submenu-2") //end point for about us
 
.to("#section_1-1", 0.3, {opacity:0, y:-500})
.set($('#section_1-1'), {css:{zIndex:-1}})
.fromTo("#section_1-2", 0.3, {opacity:0, y:500}, {opacity:1, y:-100}, "-=0.1")
.set($('#section_1-2'), {css:{zIndex:99}})
 
.add("submenu-3") //end point for what drives us
 
.to("#section_1-2", 0.3, {opacity:0, y:-500})
.set($('#section_1-2'), {css:{zIndex:-1}})
.fromTo("#section_1-3", 0.3, {opacity:0, y:600}, {opacity:1, y:0}, "-=0.1")
.set($('#section_1-3'), {css:{zIndex:99}})
 
.add("mainmenu-2") //end point for meet the team
 
.to("#section_1-3", 0.3, {opacity:0, y:-500})
.set($('#section_1-3'), {css:{zIndex:-1}})
.fromTo("#section_2", 0.3, {opacity:0, y:800}, {opacity:1, y:60}, "-=0.1")
.set($('#section_2'), {css:{zIndex:99}})
 
//first arrow animation
.to("#arrow", {
motionPath: {
path: "#motionPath",
align: "#motionPath",
autoRotate: -90,
alignOrigin: [0.5, 0.6],
start: 0,
end: 1
}
})
.from(
"#motionPath",
{
drawSVG: 0,
},
0
)
Link to comment
Share on other sites

10 hours ago, wartdesign said:

Could I insert the arrow timeline into my main navigation timeline like this?

Nothing stands out as wrong about doing that. Does it do what you need it to do? Given you didn't provide a demo we can't say for sure.

 

Side notes: There's no reason to use jQuery to select your elements for your tween targets. Just use the string, i.e. 

// change this
.set($('#section_1-3')

// to this
.set('#section_1-3'

Also as Craig said, drop the css: {} wrapping.

  • Like 2
Link to comment
Share on other sites

13 hours ago, wartdesign said:

Could I insert the arrow timeline into my main navigation timeline like this?

You can insert it like that, but keep in mind that my demo only had two tweens. Both started at 0 seconds. You'll need to use the position parameter to add them somewhere else in your timeline. More info:

 

 

  • Like 3
Link to comment
Share on other sites

Hi, the code is too large to put into CodePen, but the link to the WIP site is here:

http://willartdesign.com/clients/indigrow/

When I go to Our Services -> Start a Business --- and then click on the arrow, both the motionpath and the arrow are supposed to move at the same time, just like your demo. Not sure why only the arrow head moves atm.

Link to comment
Share on other sites

Looks like you still have the position parameter set at 0 so that drawSVG tween is happening at the beginning of the timeline. You'll need to use a label or absolute time to get those two to start at the same time. It's covered in the position parameter article I posted above. 

 

8 minutes ago, wartdesign said:

the code is too large to put into CodePen

FYI - you don't need all your real assets in a demo. A minimal demo is always best. You could make one with just the motion path and arrow.

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