wartdesign
Members-
Posts
9 -
Joined
-
Last visited
wartdesign's Achievements
0
Reputation
-
Arrow Grow Animation - can't get it to work right with MorphSVG
wartdesign replied to Hysteresis's topic in GSAP
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.- 17 replies
-
Arrow Grow Animation - can't get it to work right with MorphSVG
wartdesign replied to Hysteresis's topic in GSAP
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 )- 17 replies
-
Arrow Grow Animation - can't get it to work right with MorphSVG
wartdesign replied to Hysteresis's topic in GSAP
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!- 17 replies
-
Arrow Grow Animation - can't get it to work right with MorphSVG
wartdesign replied to Hysteresis's topic in GSAP
Can I use the line being drawn with drawsvg as the motionpath at the same time?- 17 replies
-
Arrow Grow Animation - can't get it to work right with MorphSVG
wartdesign replied to Hysteresis's topic in GSAP
Thanks! I'll take a look. Can the two scripts be combined?- 17 replies
-
-
Arrow Grow Animation - can't get it to work right with MorphSVG
wartdesign replied to Hysteresis's topic in GSAP
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!- 17 replies
-
Arrow Grow Animation - can't get it to work right with MorphSVG
wartdesign replied to Hysteresis's topic in GSAP
Does the code work with the latest version of gsap? thanks!- 17 replies
-
How do I draw an arrow with an arrow head with this technique?