Motion path timings

I'm having an issue trying to synchronse motion path and animations. 


I'm looking to get the diver animation to move at the same speed as the tape so that it looks like the diver is pulling it along.

I have the diver moving along a motion path and the line shape (tape) is using the wipe left to right animation. Does anyone have any times on how i can get these to move at the same pace? I''ve tried aligning the durations of both but no luck. 

26 Replies
Math Notermans

Although it aint perfect yet ( Thats up to you Howard ;-) this sample surely shows the power of TweenLite. As its build into Storyline, no external libraries needed and you thus can create the animation exactly as you want. My version still has some pecularities with the rotation of the diver, but it is just to show that especially the timing of several animations ( the diver and the line ) works 200% better this way then default animations in Storyline.

Weird however we cannot get more control in Storyline as is, because under the hood Articulate uses TweenLite, as this sample proves moreover.

Small explanation on the TweenLite / TimelineLite code...

First we declare a timeline
var tl = new TimelineLite();

Then several timed events are triggered. Each makes the diver move to a specific spot in a specified time. Parameters for rotation and x/y position, 1, {x:xposArray[3],y:yposArray[3],rotation:"-45_ccw"});, 2.5, {x:xposArray[4],y:yposArray[4],rotation:"90_cw"});

We select the line as a sprite and delay the animation on that till the diver is at position..
var lineSprite = document.querySelectorAll("[data-acc-text='yellowLine']");,3, { clipPath:"inset(0% 3% 0% 0%)",delay:8.5});

You can create it perfectly this way. Good luck ;-)

howard pearson

Thanks for this Math but I have zero coding skills. The issue I have with my current example is that it takes hours to get it even close. This may get a better result but the fact that I can't code suggests this will take even longer. 

It looks like I will have to find an alternative way to deliver this message as Storyline is not capable of doing this the way I want.

Thanks for your help on this Math.

Math Notermans

I have to disagree on that with you Howard. Storyline is capable of doing it, just not in the way you want. Do think out of the box and its possible.

Options are:
- Use TweenLite, its easy enough. Im no programmer either. I studied Arts and Design.

- So its tough too time 2 separate element exact like you want. Well make it 1 element.
 In fact this last solution is easy...make 1 single Element of Diver and line... like this..


And with the code from my sample befor you can animate the clippath...thus reveal more of the line when moving... 

Quickly mocking this up..

In fact working on it...when you think out of the box no code needed whatsoever... the single element you can mask in Storyline and its fine...

howard pearson

I'd managed to create the example a few days back. Problem with it as i'd stated earlier, it took hours of adjusting the timelines of the wipe animation and the motion paths and easing to perfect it. Eventually, I used the scrolling panel and a motion path and had to place half the line in the hand of the diver in another state and then spent a huge amount of time adjusting it all to eventually get it right so that the lines then perfectly aligned. 

Unfortunately, my deadline or my sanity will not allow the freedom do this with other required animations.