Drag and drop trailing path

Question

I been seeing this pattern a lot on websites where user drag between points along a path that trails as they drag and drop which in the ends triggers and event.

Here is one example on

http://aaa.thehitmansbodyguard.movie( You have to go through the motions to get to the questions section where you will get this)

What is this method called and is there a framework that does this?

Are is another example

http://www.sevenhillswholefoods.com/experience/#/( when you "start the journey) you have to "drag and drop" to navigate the drag and drop effect though not entirely what is the norm is the effect I'm looking for

Here is yet another example that controls a video

http://www.resteravectoi.com (NSFW)

Use the drag and drop to control the video play

Here is another one that when dragged and drop changes the slide

http://2017.makemepulse.com

I'm not sure if I understood what you were asking. But probably you are looking for a framework that works with canvas — lumio, Aug 25 '17 at 14:19
@lumio sorry about that updated the question as I thought I had the correct URL — Kendall, Aug 25 '17 at 14:21
So on your screenshot, was is the call of action there? Do you need to click on one answer and drag it in a circle? — lumio, Aug 25 '17 at 14:22
Possible duplicate of [How to grab and drag an element around a circle?](https://stackoverflow.com/questions/10149057/how-to-grab-and-drag-an-element-around-a-circle) — lumio, Aug 25 '17 at 14:24
@lumio when you come to the website(skip the video) there is an "apply" button when you click the there are some categories to select where there are some questions. To answer the question there are these diagrams with the "drag" controls that are use to "gesticulate" your answer — Kendall, Aug 25 '17 at 14:25
@lumio its not a duplicate question though it may have something to do with it — Kendall, Aug 25 '17 at 14:26
Why not? It has everything you need, except fo a certain calculation, when to fire an action. — lumio, Aug 25 '17 at 14:30
@lumio not entirely so.... reason being I'm looking for a framework that does this. I believe it maybe a particular framework being used. I've seen it being used to navigate and play video — Kendall, Aug 25 '17 at 14:34
What about PaperJS then? [See this example](http://paperjs.org/examples/chain/) — lumio, Aug 25 '17 at 14:38
@lumio I think we're straying off here. Thanks for your help though — Kendall, Aug 25 '17 at 14:39

Kendall · Answer 1 · 2017-08-25T15:24:23.403

Ok after researching and digging I think I found something that so far seems to be the closet match.

https://codepen.io/MAW/pen/aOzeNR

var D = document.createElement('div');
TweenMax.set('svg',{overflow:"visible"})
TweenMax.set('.knob',{x:10,y:80})

var tl = new TimelineMax({paused:true})
.from("#path2",1,{drawSVG:"0%",stroke:'orange',ease:Linear.easeNone})
.to('.knob',1,{bezier:{type:"quadratic",values:[{x:10,y:80},{x:150,y:0},{x:300,y:80}]},ease:Linear.easeNone},0);

Draggable.create(D,{trigger:".knob",
type:'x',
throwProps:true,
bounds:{minX:0,maxX:300},
onDrag:Update,
onThrowUpdate:Update});   
function Update(){tl.progress(Math.abs(this.x/300))};

TweenMax.to('#path1',0.5,{strokeDashoffset:-10,repeat:-1,ease:Linear.easeNone})

which uses GSAP framework. I'm not sure if the examples I quoted in my question are using this framework so if anyone else has any idea if/ how they are using a framework let me know

Drag and drop trailing path

1 Answers1