wartdesign

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.

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 )

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!

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

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

Yes, pretty much want to add an arrow head like the screenshot.

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!

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

How do I draw an arrow with an arrow head with this technique?