Programatically redirect transition issue

[Mariusz Kurdziel]

Hi, im trying to do programatically redirect via:
H.redirect('homepage.html');
and its working, but there is no transition, can you help me with this?

[ThaoD5]

Hello @mkurdziel88,

Could you paste here your new Highway.Core initial setup so that we can provide an efficient answer ?

[Mariusz Kurdziel]

const H = new Highway.Core({
    renderers: {
        loader: Loader,
        homepage: Homepage,
        services: Services,
        case: Case,
        'case-list': CaseList,
        contact: Contact,
        technologies: Technologies
    },
    transitions: {
        default: Fade,
        homepage: HomepageTransition,
        services: ServicesTransition,
        case: CaseTransition,
        'case-list': CaseListTransition,
        contact: ContactTransition,
        technologies: TechnologiesTransition
    }
});

[Mariusz Kurdziel]

@ThaoD5 , any ideas?

[Anthony Du Pont]

Hey @mkurdziel88,

The Highway.Core call seems good to me and the way you are using the redirect method as well. However, are the data-router-wrapper and data-router-view set properly in the HTML of the homepage? Might be good for us to see the code of homepage.html and HomepageTransition to be able to fix this.

Thanks,
Anthodpnt

[Mariusz Kurdziel]

homepage.html:

<main data-router-wrapper>
    <div data-router-view="homepage">
        <div class="main-wrapper">
            <section class="homepage">
                ...
            </section>
        </div>
    </div>
</main>

HomepageTransition

import Highway from '@dogstudio/highway';

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

        // Remove Old View
        from.remove();

        var tlInHome = new TimelineMax({ onComplete: done });
        const $homeTitle = $('.home-title');
        const $homeSubtitle = $('.subtitle-link');

        tlInHome.fromTo($homeTitle, 1, { y: -40, autoAlpha: 0, transformOrigin:"left center" }, { y: 0, autoAlpha: 1})
                .fromTo($homeSubtitle, 1, { y: -40, autoAlpha: 0, transformOrigin:"left center" }, { y: 0, autoAlpha: 1},  "-=0.7")

    }

    out({ from, done }) {

        var tlOutHome = new TimelineMax({ onComplete: done });
        const $homeTitle = $('.home-title');
        const $homeSubtitle = $('.subtitle-link');
        
        tlOutHome.to($homeTitle, 0.6, { x: 40, autoAlpha: 0, transformOrigin:"left center" })
                 .to($homeSubtitle, 0.6, { x: 40, autoAlpha: 0, transformOrigin:"left center"}, "-=0.4")
          
    }
}

export default HomepageTransition;

[ThaoD5]

Have you tried navigating normally to the homepage ? So for example, you're on about page, and click a normal link to your homepage ?

[Mariusz Kurdziel]

Yes, and transition is working fine.

[grasmachien]

Same issue here. Highway works in the entire website as expected but it seems that the redirect functionality is broken.
H.redirect(this.goToURL) just reloads the page without the default transition.
H.redirect(this.goToURL, transition) throws an error: "Cannot read property 'prototype' of undefined".

I tried adding the transition both as a string and as a variable (es6 import from "class Fadel extends Highway.Transition")
Maybe I'm just not using it in the correct way.

Edit 1: Just found the issue!
You have to enter the full URL in order for Highway to redirect correctly.
In my case I was redirecting to "/cases/case-detail" while it should be "http://localhost:8080/cases/case-detail".

Edit 2: Seems like it only fixed the issue for the default transition.
When I pass a transition to the redirect function I still get this error: "Cannot read property 'prototype' of undefined".

Edit 3: Soooo, the transitions needs to be passed as a string instead of a reference to the transition itself.
This could be documented a little better :)

[Cristian Restituyo]

Hi I am facing the same issue. Any updates on this?

[Francesco Allegrini]

Hi @ThaoD5 @Anthodpnt , I have the same issue when using the method redirect with a non default transition, the error is something like Cannot read property 'transitionName' of undefined. I opened a PR if you don't mind.

[Anthony Du Pont]

Merged! Thank you @cescoallegrini

[michaelkoelewijn91]

@Anthodpnt I am afraid this introduced a new bug:
#106