[Set an element at a position along SVG path]

I figured it was something like that...I was close. I tried setting it to motionPath[0] but not the x and y of that value. Thanks!

[Set an element at a position along SVG path]

I am wondering if there is an easier way to set an object at a particular point bezier and keep it there. I have this working through the following code but it seems like a hack. Thanks for any help!

 

var tl = new TimelineMax({});
    tl.add( TweenMax.to("#markerStart", 1, {bezier:{values:motionPath, type:"cubic"}}));
    tl.pause();
    tl.seek(0.001);

[DrawSVGPlugin, Part 2]

I'm just about set with the DrawSVG plugin for what I need to to do. Wondering if anyone has a best practice for getting circle stroke percentages set by DrawSVG to update while Tweening the radius of the circle. So far this almost works: 

 

//SET INITIAL VALUE

TweenMax.to($("#path"), 0, {drawSVG:"40% 60%"});

 

//ATTEMPT TO TWEEN RADIUS OF CIRCLE SMALLER AND GROW VISUAL STROKE ARC, RESULT LOOKS LIKE A ROTATION WAS APPLIED
TweenMax.to($("#path"), 1, {drawSVG:"30% 70%", attr:{r:90}, delay:3});

 

//RUN SAME THING AGAIN AND PERCENT VALUES NOW WORK PROPERLY AS EXPECTED, BUT AFTER THE FACT
TweenMax.to($("#path"), 1, {drawSVG:"30% 70%", attr:{r:90}, delay:6});

 

Ultimately I am trying to achieve an animated stroke around a circle- the circle will change in size, but I'd like to keep the stroke at a specific weight and not just scale a parent container resulting in the stroke weight getting thinner/heavier. 

 

Thoughts? I'd do a Codepen but I am a novice and wouldn't know how to do that without exposing the purchased plugin.

Thanks! 

[DrawSVG Plugin]

Thanks Jack! 

[DrawSVG Plugin]

HI Craig- I figured out the problem. I had only copied over the plugin file to my project js folder- once I moved the entire "uncompressed" folder to js/gsap/ everything seems to now work even though I am only referencing the CDN TweenMax and the local plugin in my HTML file. Thanks!

[DrawSVG Plugin]

Hello, I am probably missing something simple- but I am trying to get DrawSVG working and I am getting this error straight away:

Uncaught SyntaxError: Unexpected token { 

 

which is this line: 

 

import { _gsScope } from "gsap/TweenLite.js"; 

 

Does this plugin work using the Local downloaded/purchased DrawSVGPlugin.js file while using TweenMax from the CDN?

 

Thanks!