Jump to content
Search Community

Horizontal Scrolltrigger breaks after page transition (with barba.js)

gn90 test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi,

i am quite new to GSAP but i love it so far. I build a small horizontal scrolling dummy where everything works fine. My page transitions are made with the help of barba.js. But as soon my new content is loaded my Scrolltrigger breaks and now it scrolls vertically. I tried to call the getMaxWidth function and initiate the ScrollTween again as soon  the new content is loaded but now its not scrolling in any direction.

 

Is there any solution to recreate the Scrolltrigger when a new page is loaded?

 

The page transition in codepen doesnt work because i cant create a second page. (enter function of barba where i try to initiate the gsap stuff again is on line 102)

 

And another question down the line:

Is it possible to animate the whole text (like a fadeout) as soon as i scroll to the right side and fade it in as soon as i come back? maybe the opacity based on the scrollposition.

 

Thanks in advanced,

Guillermo

See the Pen JjMMJKR by gn90at (@gn90at) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the GSAP forums @gn90

 

34 minutes ago, gn90 said:

Is there any solution to recreate the Scrolltrigger when a new page is loaded?

 

Sure, wrapping all you need to re-setup in a function and call that function in a barba hook / view on / after enter, sort of like in the stackblitz example linked below, should actually work.

 

Additionaly you will have to make sure though, to kill any old ScrollTriggers when/after leaving a page and probably also remove any eventListeners, too. The latter you will also have to add again alongside your STs then, when entering a new page.

 

https://stackblitz.com/edit/web-platform-j6l93d?file=js%2Fmain.js

 

 

38 minutes ago, gn90 said:

Is it possible to animate the whole text (like a fadeout) as soon as i scroll to the right side and fade it in as soon as i come back? maybe the opacity based on the scrollposition.

 

For animations to be triggered in fake-horizontal-scrolling scenarios as such, you will want to have a look at the containerAnimation property (and for tying it to the scroll an additional look at scrub).

 

This piece on containerAnimation is from the docs:

 

containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a 

See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen

 and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. 

 

 

I hope that'll help a bit. Happy tweening

 

  • Like 3
Link to comment
Share on other sites

Hi there, thank you for your help. I got most of it to work now thanks to you. The "kill" functionality was the part missing. I only have one problem i can't seem to fix. Everything works fine when i stay in place and navigate to another place. But as soon as i scroll and then try to navigate my scrollcontainer is completely broken after the transition.

 

i tried this:

 

async enter(data) {
    animLoaderOut(); // hide page transition
    window.scrollTo(0, 0);
},

 

But it does not scroll back to the "top" (left) position of the new page. Does window.scrollTo() do not work inside a horizontal ScrollTrigger?

 

You can see it here (btw thanks for the link): https://stackblitz.com/edit/web-platform-xainhm?file=assets/js/master.js

 

To your second answer regarding the animation: 

Yeah i already did a animation with the containerAnimation. The thing i don't understand is which trigger i should use when the element (that needs to be animated) is already in the viewport when the page loads. In this case its the "connecting people" text which already has a animation when the page loads but needs a second when the page scrolls.

 

Thank you,

Guillermo

  • Like 1
Link to comment
Share on other sites

33 minutes ago, gn90 said:

But it does not scroll back to the "top" (left) position of the new page. Does window.scrollTo() do not work inside a horizontal ScrollTrigger?

 

It uses native vertical scrolling so there shouldn't be any difference.

 

Try setting it back to 0 in a different hook (after you have created the new ScrollTriggers).

Or try calling ScrollTrigger.clearScrollMemory() before you try to set the scrollPosition back to 0 in the enter hook.

Both of those options worked for me - actually even just calling ScrollTrigger.clearScrollMemory() alone in the enter hook already did the trick.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

 

37 minutes ago, gn90 said:

To your second answer regarding the animation: 

Yeah i already did a animation with the containerAnimation. The thing i don't understand is which trigger i should use when the element (that needs to be animated) is already in the viewport when the page loads. In this case its the "connecting people" text which already has a animation when the page loads but needs a second when the page scrolls.

 

For that I would suggest creating a new thread - with an absolutely barebone minimal demo of what you have tried so far and a clear explanation of what you are struggling with and how you'd expect things to behave, as depending on what exactly you want to achieve can become bit tricky.

 

In the meantime, maybe one of these threads can help already.

 

 

 

 

  • Like 5
Link to comment
Share on other sites

Oh one more thing to the main problem:

 

I have a small Tween Animation that works fine.

 

gsap.to(".ball", {
    y: -120,
    backgroundColor: "#1e90ff",
    ease: "none",
    scrollTrigger: {
        trigger: ".sec-md-vid",
        containerAnimation: scrollTween,
        start: "left center",
        toggleActions: "play none none none"
    }
});

But as soon as i switch to the other page and come back afterwards the animation doesnt trigger anymore. But i re-created the scrollTween variable again. Do i need to call something else?

Link to comment
Share on other sites

9 minutes ago, gn90 said:

But as soon as i switch to the other page and come back afterwards the animation doesnt trigger anymore. But i re-created the scrollTween variable again. Do i need to call something else?

 

It's the same as for the fake-horizontal-tween..

 

4 hours ago, akapowl said:

wrapping all you need to re-setup in a function and call that function in a barba hook

 

...that's why I mentioned that it might be best to wrap everything that you need to re-create in a function and to simply call that function in a hook.

 

Barba will remove the old page-content in between page-changes, so the elements you once told GSAP to tween on will simply just not be there anymore when you come back, but will be replaced with new elements instead. Thus you will have to re-create your tweens for those new elements.

 

Maybe this tutorial (and the comments/questions below that tutorial) can help get a clearer picture of how barba works:

 

https://waelyasmina.com/barba-js-v2-tutorial-for-total-beginners/

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...