Motion path timings
Oct 20, 2020
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
The easiing will be the problem, try removing it, however may be best that both are motion paths and use some masking such as a scrolling panel
I'll give the easing a go. Masking wouldn't work unfortunately as I've a textured background
I've tried easing and it's pretty much impossible fast. The motion path maintains a consistent speed where as the animation starts fast and slows down.
You cannot change easing on the wipe, I would use a motion path on the line and then mask it from inside a scroll panel
Sorry Phil i don't follow. Sorry if I'm being daft but what scroll panel?
Does this file help?
Thanks for this Phil. I've given it try and it's not made much difference as they as they still appear to be moving at different paces. I've set both paths to begin when the timeline reaches 2 seconds, set the duration to 2.00 and the speed to slow
If they are using the same motion path settings they should move together can you share the slide?
See attached. It's on the Baseline to CP2 layer.
Did you get the chance to have a look at this Phil?
Does anyone else have any suggestions how to do this?
Sorry Howie I had a look at this and cannot get anything close to what you want.
Ok. Thanks for your help anyway Phil.
Why not create the complete animation as a gif ?
I'd considered that but what software would i use? I can't get the animations to marry up.
AfterEffects
That's beyond my paygrade Math
Im quite sure there are free options available online that can get things done similar.
Blender and Natron (https://natrongithub.github.io/) are 2 i can think of...
For anyone interested i've sent this in as a feature request
If jou check some of my later posts, you will find that gsap TweenLite is used for all Storyline animations under the hood. With tweenLite you could get this done too, especially using TimelineLite.
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 tl.to makes the diver move to a specific spot in a specified time. Parameters for rotation and x/y position
tl.to(diverObject, 1, {x:xposArray[3],y:yposArray[3],rotation:"-45_ccw"});
tl.to(diverObject, 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']");
TweenLite.to(lineSprite,3, { clipPath:"inset(0% 3% 0% 0%)",delay:8.5});
You can create it perfectly this way. Good luck ;-)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.
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...
As said, no coding needed whatsoever... Just a bit out-of-the-box thinking... In fact old-school gaming techniquest... And it works with plain old Motion Paths....
Never say something ain't possible till you talked to me ;-)
Regards,
Math
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.
This discussion is closed. You can start a new discussion or contact Articulate Support.