Carousel with Motion Path
Jun 08, 2022
By
Eric Nair
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?
10 Replies
Hi Eric
I'm not in my office to check your file but found this carousel download file that may help you. Here is the link to the post in the forum
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:
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.
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:
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):
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. 😊
Perfect! Thanks again.
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!