Forum Discussion
Swipe card interaction - back button
Hi All!
I've been building a 3 slide swipe card interaction (with 3 cards in total) over the last few days, building my interaction from the 'DESKTOP CARDS RIGHT-LEFT' slides provide in this link: Storyline 360: Swipeable Cards Navigation | Articulate - Community
Ideally I want to just use the slides provided in the link above as a template, without needing to rebuild it, so I just reformatted everything to how I want it.
However, I can't work out how to get the Back button (a left arrow at the bottom left hand corner of the green cards) to work - ie. animate the card to the right, whilst moving back to the previous slide.
Unfortunately the author of the slides in the above link set their back button as hidden and it doesn't look like it has any triggers on those back buttons to make them work.
Could anyone take a look at my file (attached) and let me know how I can get the back arrow to move to the previous slide?
My storyline slides are attached.
Thanks so much for the help!
- Adrian
Hello Adrian Thinkaway .
Honestly, I didn't understand your file at all. 😂It was so complicated that I couldn't fix it.
So, I started from scratch and achieved what you wanted with only one card per screen, two trajectories per “card,” the two Left and Right buttons, no variables, very few triggers, but using the card's states, depending on whether it was slid to the left or right. And it's done!
This way, you can duplicate the screens infinitely, with forward/backward movements as you wish. Explore the attached file to understand the principle. In scene 4: it looks exactly like what you wanted to create, right? Please let me know if this solves your problem. Have a great day!
4 Replies
Hello Adrian Thinkaway .
Honestly, I didn't understand your file at all. 😂It was so complicated that I couldn't fix it.
So, I started from scratch and achieved what you wanted with only one card per screen, two trajectories per “card,” the two Left and Right buttons, no variables, very few triggers, but using the card's states, depending on whether it was slid to the left or right. And it's done!
This way, you can duplicate the screens infinitely, with forward/backward movements as you wish. Explore the attached file to understand the principle. In scene 4: it looks exactly like what you wanted to create, right? Please let me know if this solves your problem. Have a great day!Thanks so much! Hehe I didn't understand that file either myself - it was a file I downloaded from another user's article :)
The way you rebuilt it makes perfect sense! I've ended up using your Scene 4 to guide my build. Much simpler.
Thanks so much for your time and assistance!
This is a clever way to animate the transition - I like the transparent layer that allows the animation to complete for advancing! It seems like there need to be two versions of each of these:
- A motion path with the group entering the slide from the left | A motion path with the group entering the slide from the right
- A motion path with the group exiting the slide to the left | A motion path with the group exiting the slide to the right
- A transparent layer that jumps forward at the end of its timeline | Same but jumps backward
- And a true/false variable that triggers the actions above (ex, click the next button it sets to true; click the back button it sets to false. The bullet points up above would execute based on the state of the variable)
Make the motion paths leaving the slides in both directions, then copy them and reverse the path direction on the copies.
Thanks so much for this! Pretty much makes sense to me :)
