Browser Back Button / iOS Swipe browser Nav breaks functionality

[Nik Williams]

Hi,
Love Highway, thanks for creating it!
I'm finding that everything works really well until I use any type of browser back, (and then forward) navigation be it via built in browser buttons or swiping on mobile platforms.

Could I be implementing your code wrong?

[Michael Koelewijn]

Hard to say without a code example.
Can you share your transition class file?

[Nik Williams]

Yes of course.

Note that there is a little code that changes the style of the animated element depending on which trigger was clicked. I'm finding that when a browser back button is used, the whole thing stops working. Thanks for getting back to me :)

import Highway from '@dogstudio/highway';
import anime from 'animejs/lib/anime.es.js';

const swipe = document.getElementById('swipe')
var newCol

class Fancy extends Highway.Transition {
    out({from,trigger,done}) {
        if(typeof(newCol)=='undefined')
        {
            swipe.classList.remove('bg-red-900')
        }
        else {
            swipe.classList.remove(newCol)
        }
        switch(trigger.getAttribute('id'))
        {
            case 'thome':
                swipe.classList.add('bg-pink-300')
                newCol = 'bg-pink-300'
            break;
            case 'tabout':
                swipe.classList.add('bg-indigo-300')
                newCol = 'bg-indigo-300'
            break;
            case 'tcontact':
                swipe.classList.add('bg-blue-300')
                newCol = 'bg-blue-300'
            break;
            case 'tshows':
                swipe.classList.add('bg-purple-300')
                newCol = 'bg-purple-300'
            break;
            case 'tprofile':
                swipe.classList.add('bg-red-300')
                newCol = 'bg-red-300'
            break;        
        }
        anime({
            targets: swipe,
            scale: 2000,
            duration: 900,
            easing: 'cubicBezier(.5, .05, .1, .3)',
            complete: function () { done() }
        })
    }
    in({from,to,trigger,done}) {
        from.remove()
        anime({
            targets: swipe,
            scale: 0,
            duration: 800,
            easing: 'cubicBezier(.5, .05, .1, .3)',
            complete: function () { done() }
        })
        anime({
            targets: to,
            scale: ['1.4', '1'],
            duration: 900,
            easing: 'easeInQuad'
        })
    }
}

export default Fancy;