Dogstudio / highway

Highway - A Modern Javascript Transitions Manager
https://highway.js.org/
MIT License
1.43k stars 92 forks source link

Ability to load new page then concurrently run in & out transitions #51

Closed JayBox325 closed 5 years ago

JayBox325 commented 5 years ago

I'd like to slide the from page out, but slide in the to page at the same time. I have set up a basic slide function, but there's a delay between the two Tweens. I've looked into using TimelineLite for it, but I first need to combine them into one function.

Any pointers for how to achieve this?

class Slide extends Highway.Transition {
    in({ from, to, done }) {
        // Reset Scroll
        window.scrollTo(0, 0)

        // Animation
        Tween.fromTo(to, .5,
            {x: '100%'},
            {
                x: '0%',
                onComplete: done
            }
        )

        // Remove Old View
        from.remove()
    }

    out({ from, done }) {
        // Animation
        Tween.fromTo(from, .5,
            {x: '0'},
            {
                x: '-100%',
                onComplete: done
            }
        )
    }
}

Thanks, Jay

JayBox325 commented 5 years ago

Don't worry, just discovered the 'Overlap' example transition! (It was very late in the day when I discovered you!) Cheers