Drag Along a Motion Path

Question

Is it possible to drag an object along a designated motion path?&nbsp; This could be used to drag a car image straight along a road to the finish line, w/o it leaving the road.&nbsp; It could drag a golf ball along a parabola path on it's way to the green.&nbsp; It could drag a red line in a thermometer graphic to a guessed temperature.&nbsp; I can think of many applications for this.&nbsp; I once made an interaction in Flash where the user needed to make a guess of a percentage.&nbsp; They would drag their "guess", basically a big dot, and drop it somewhere up a straight line representing 0%-100%.&nbsp; Once dropped the true answer appeared and they saw how close they were to the correct answer.&nbsp; It required the ability to drag and drop along a straight line w/o deviating from that line.&nbsp; A "bounding box" would work, if it could be 1 pixel wide.&nbsp; I can see the potential in Storyline of combining drag and drop with a motion path, but so far haven't been able to get it to work.&nbsp; Is this possible?&nbsp; And if not, could it be a consideration for a future version?&nbsp;&nbsp;

elizabeth · Answer

What about using a slider with a picture for the thumb and for the road? Rudimentary example attached. :D

nathan_hilliard · Answer

It depends upon how much effort you want to invest in this. Using GSAP (part of Storyline) and the MotionPath plugin, you can extract the X/Y coordinates of any point along an SVG path. For example, if you had a parabola, you could advance a slider from 0 to 1 and traverse the entire length of the path. Probably easiest is to is to use GSAP to move your object along the path.&nbsp; See this post for an example of how to do that.
https://community.articulate.com/discussions/articulate-storyline/an-easy-to-use-animated-menu-using-gsap
You would need to make sure you compensate for window resizing when using GSAP (i.e., you need to know where you item should be at any given time, so if things resize you can put it back in the right place.
&nbsp;

ryanpassey · Answer

Nice!&nbsp; Thank you Elizabeth!&nbsp; I know about sliders, but didn't know they could be image customizable.&nbsp; I looked to see if it was, but apparently not deep enough.&nbsp; It's not a perfect solution as it is a bit choppy, but I should be able to work with it.&nbsp; Thanks!
-Ryan

ryanpassey · Answer

Thanks&nbsp; Nathanial!&nbsp; Elizabeth's reply was closer to what I was looking for, but if the choppyness bugs me too much, I'll dive more into your response.&nbsp;&nbsp;
-Ryan

elizabeth · Answer

Ryan - if the slider is choppy, that just means you need to add more steps. Instead of having the step be 1 in the Slider Design tab, set it to something like 0.1. The car will move smoothly!

Forum Discussion

Drag Along a Motion Path

Related Content

Tutorials: Create Custom Drag & Drop Exit Animations in Storyline 360

Drag & Drop Issues

Custom Drag and Drop: Drag Items and Motion Paths

Request: Motion Path Reverse Option

Motion Path?

Tutorials: Animate Drag Items as They're Dropped on Targets

Drag & Drop not resetting to start point

Tutorials: Unlimited Drag Items from a Single Object in Articulate Storyline 360

Tutorials: Show Feedback for Each Step in Sequence Drag-and-Drops

Tutorials: Show Quiz Attempts with Hints in Drag-and-Drop Interactions

Recent Discussions

Welcome to the New E-Learning Heroes!

Help with Submit button

Storyline file published as MP4 problems - cursor is going crazy!

RISE button block

Change Link (url) color