Aligning elements in animations
Oct 16, 2023
Hi
I am trying to generate animations where grouped objects move on one slide from A to B, and then on the next slide need to appear at position B. I have tried to do this by duplicating the object on the first slide and positioning it at the desired end point of the animation. I then add a motion path to the original object and try to move the red dot at the end of the motion path so that it moves onto the copy and aligns with it. I then copy the duplicate onto the next slide. However, no matter what I try (snap to grid, snap to other objects etc), I cannot quite get the motion path to align with the duplicated object. It seems to be a fraction of a pixel out, if that is possible, because if I adjust the motion path manually using size and position, it's still not possible to get it to align. The consequence is that when you move to the next slide, the object shifts slightly.
Is there a better way to copy an object from the end point of its motion path onto the next slide? I have probably missed something really obvious here........
Thanks
Richard
3 Replies
Duplicate the slide with the MotionPath on it. Use the exact values of the motionpath to move the object, and then it works perfectly fit.
Thank you Math. That works nicely for the fixed paths. However, for custom paths I have two problems. First of all, I can't work out how Storyline calculates the height and width. I've used rules to find the x and y values of the start and end points of my animation in the attached screenshot. The numbers are values read off the ruler at the lines I've added. Y and height seem to make sense. However, the X value and width of the motion path don't seem to correlate with anything I've measured. It seems almost as if Storyline uses the TOTAL width of the animation path, rather than the net movement in the x axis. That makes it a very difficult method to use if e.g. your path swings left and then right like mine does.
The second issue is that custom paths require you to click the start point. Unless this is in the exact centre of the object, the object glitches when it starts of move. I usually have a stationary copy of the object on the timeline that is only visible until the moving copy starts its motion. What I end up with is a "jump" to wherever the green start point of the animation path is. For larger objects I can use the rulers and the centre handles of the object to find the centre. However, this is difficult for objects that aren't very big. Is there a way to force Storyline to start a custom animation path in the centre of the object, like it does for the built in paths?
Best wishes
Richard
Use GSAP then. With GSAP you can set the origin of any element to whereever needed.
Here you can see how.
https://community.articulate.com/discussions/building-better-courses/how-to-use-gsap-for-animation-in-storyline
Roughly this is the code to set a transformation/origin point for an element with GSAP.
gsap.set(myElement,{transformOrigin: "center center"});Ofcourse you can set the point to any position wanted.
When getting a GSAP license ( default is built into Storyline as is ) you can use the plugins as shown here.
https://360.articulate.com/review/content/4db5ea21-c36a-4a22-9278-553838ee35f3/review
Hope this helps.