Forum Discussion

Thinkaway's avatar
Thinkaway
Community Member
3 days ago
Solved

Getting Motion Paths to work - Card Carousel

Hi Heroes!

I followed this great tutorial: https://www.youtube.com/watch?v=dYB6Vuqmp7o&t=39s in order to create a card carousel.

At least I thought I'd followed it!

I can't seem to get the two motion paths in the right position. I'm not sure where the path start point (which I assume is the yellow dot for 'relative start point') and the end point (red dot) should be placed. 

I have 7 cards, as opposed to 4 cards (which is in the tutorial).

Also, when I am able to use the left and right arrows, as the cards progress, they seem to get further and further misaligned (just slightly but enough to notice) from the red 'stopper' triangle at the top.

Any help would be GREATLY appreciated! My Storyline file is attached.

Thanks :) 

  • If you have 7 cards, the center of the group aligns with the middle of the 4th card.

    • Position the yellow dots at this central point.
    • Place the red dots at the center of the previous (3rd) and next (5th) cards.
      Always identify the center of your group, and extend relative motion paths to the center points of the cards immediately before and after it.

    Please find the attached version, which I’ve reviewed and adjusted. I corrected the placement based on your version and also fixed the button states when the first or last picture intersects with the triangle.

    Keep in mind that interactions using motion paths can sometimes cause object groups to drift or become misaligned over time. If the navigation buttons are clicked too quickly—especially when rapidly switching between images—the animations may break or become desynchronized.

3 Replies

  • Thinkaway's avatar
    Thinkaway
    Community Member

    Thank you so much Nedim! This is so helpful. I really appreciate you uploading your file and for clearly explaining how motion paths work, as I was a bit confused about them. 🙏🙏

  • Nedim's avatar
    Nedim
    Community Member

    If you have 7 cards, the center of the group aligns with the middle of the 4th card.

    • Position the yellow dots at this central point.
    • Place the red dots at the center of the previous (3rd) and next (5th) cards.
      Always identify the center of your group, and extend relative motion paths to the center points of the cards immediately before and after it.

    Please find the attached version, which I’ve reviewed and adjusted. I corrected the placement based on your version and also fixed the button states when the first or last picture intersects with the triangle.

    Keep in mind that interactions using motion paths can sometimes cause object groups to drift or become misaligned over time. If the navigation buttons are clicked too quickly—especially when rapidly switching between images—the animations may break or become desynchronized.

  • I don't group and use separate images with their won motion paths, it is easier to align motion paths outside of a group.