Forum Discussion

EricNair-c7a4cf's avatar
EricNair-c7a4cf
Community Member
4 years ago

Carousel with Motion Path

I'm currently working on a project to celebrate our company's history. I would like to profile key events by decade using a carousel format. I've added some pictures and </> buttons for navigation. When a learner clicks a button I would like the displayed image to change (e.g., move to the left or move to the right). If possible, I would like the images to slide across the screen like a View Master reel. The images have been grouped but I'm having trouble trying to create the motion path to automatically advance with each click. I can get it to move once but not again. Also, not sure what needs to be done so it can go back the other way to without adding multiple layers. Does anyone have a suggestion?

11 Replies

    • EricNair-c7a4cf's avatar
      EricNair-c7a4cf
      Community Member

      Hi Wendy - That is actually the example that had inspired me. What I can't figure out is how they setup the motion path so they would automatically move to the left or right when a button is clicked. I see there are two triggers in the example you sent me but not sure how they set them up. I'm probably missing something very straight forward. 

       

      Thanks,

      Eric

  • Hi, Eric.

    Thank you for reaching out!

    Here are a few suggestions after looking at your project:

    • Change the trigger to move Group 2 along the motion path from "when the timeline starts" to "when the user clicks the right arrow":

    Windows 10 (1) 2022-06-09 at 9.20.05 AM

    • On the animation ribbon, change the Path options to Relative Start Point:

    Windows 10 (1) 2022-06-09 at 9.21.42 AM

    This will create the movement of all the photos using the right arrow. You will then need to create a line path for the left arrow. 

    Screen Recording 2022-06-09 at 09.23.11 AM

    I hope this helps!

  • Hi Maria - Thanks for your assistance. The triggers to move left and right work terrific now. One other question I'm hoping you can assist me with. Is there away to hide the left arrow button at the start and then have it become unhidden when the first picture intersects with it? Same for hiding the right arrow when the learner gets to the last image. I would like to keep everything on one slide if possible. 

     

    Eric

  • Hi, Eric.

    I'm glad it worked!

    You can use the "navigation rectangles" (left navigation rectangle / right rectangle box) to check if they intersect with Group 2 (the group of photos), and adjust the state of your arrows based on that condition:

    Windows 10 (1) 2022-06-09 at 12.24.54 PM

    It's also a good idea to set the initial state of the left arrow to hidden (as this is a Group, you need to set the states individually for Freeform 2 and Oval 2):

    Windows 10 (1) 2022-06-09 at 12.25.43 PM

    I'm attaching an edited version with your file with those changes.

    Let me know if that works!

  • Hi Maria - That is really helpful! Thanks again. I noticed you had added  a right end trigger and didn't quite understand it or how it works.

     

  • Hi, Eric.

    You're very welcome!

    You can delete that trigger (and the variable). I was trying a different option first, and left it there by accident. 😊

  • This is wonderful.  I too was inspired with the company history carousel.  Maria Costa-Stienstra, your instructions were super helpful.  My only issue is the placement of the slide when it moves  left and right.  With every click the card is less centered until the card is halfway off.  Is there a good mathematical way to set up the motion path so it centers the card (photo) with every movement?  

  • Hi Doris,

    Thanks for taking the time to test the project, and I'm sorry you ran into this problem. We have an open issue in Storyline 360 where the motion path becomes skewed after several iterations. I'll share your findings with the team and notify you of any changes. Here's a peek into our process:

    I appreciate your patience!

  • keden7's avatar
    keden7
    Community Member

    I'd like to see a version of this with narration on each file. I can't seem to figure out what the user is clicking so I can attach narration to each slide as they click. Suggestions would be appreciated!