Programatically redirect transition issue

[mkurdziel88]

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 ?

[mkurdziel88]

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
    }
});

[mkurdziel88]

@ThaoD5 , any ideas?

[Anthodpnt]

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

[mkurdziel88]

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 ?

[mkurdziel88]

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 :)

[restcristian]

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

[cescoallegrini]

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.

[Anthodpnt]

Merged! Thank you @cescoallegrini

[michaelkoelewijn91]

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