Reverse/change transition on Previous button

Oct 13, 2013

Hi all,

Is is possible to have different ("opposite") slide transitions when users move forward and back through the slides? I'd like to use the Uncover Left transition between slides when clicking Next, but it looks very confusing having the same transition when clicking Previous as the slides appear to still be moving ahead. Ideally I'd like to be able to change the "back" transition to Cover Right to make it look like the slides are reversing back.

Any suggestions welcome! Cheers!

25 Replies
Math Notermans

No easy way to achieve a reversed transition alas. Phil's solution is probably the easiest one. Another option is creating a transition with GSAP and javascript. That would be easily reversible as you can use timelines with built-in functionality to reverse it. In fact that is quite easy... biggest problem is for push or cover transitions you would need the graphical look and feel of the next and previous slides in the current one...so you can make it look like a transition on the current page.

Moving the currentview... well thats the easy part..

let player = GetPlayer();
var tl = gsap.timeline({onComplete:readyAction});


let slideContainer = document.querySelector("#slide > main");
tl.to(slideContainer, {x: '100vw', duration: 1});

function readyAction(){
console.log("timeline ready!");
player.SetVar("isTransitionDone","2")
}

The code uphere just does that...moving the actual content out of view to the right.
Now figuring out how to get the next page to show properly..

Math Notermans

A first sample of this... pages are grouped on a slide and with GSAP controlled to move out of view. Gonna finetune this, because it is a bit messy still... but the principle works...

https://360.articulate.com/review/content/cd10e73d-44c9-4f6c-957a-fb1e75c62c74/review

First 2 pages only work... next and previous..

Laura MacNeil

I threw in a feature request too. I would love a backwards transition where you could opt for the opposite transition as the one that appears when navigating forward. Ex. navigating on a mobile device through a slide deck/deck of cards,

 

it just looks funny when you go backward-but it appears the previous slide is underneath the current slide.