Jump to content
GreenSock

MennoPP

How do I 'reset' ScrollSmoother?

Go to solution Solved by MennoPP,

Recommended Posts

Hello I am using this function to start ScrollSmoother (it's fantatsic BTW!)
 

function scrollSmootherCreate(){
	ScrollSmoother.create({
        smooth: 1,
        effects: true,
        ignoreMobileResize: true,
        normalizeScroll: true
    });
};

Also added this cleanGSAP function:
 

function cleanGSAP(){
	ScrollTrigger.getAll().forEach(t => t.kill(false));
	ScrollTrigger.refresh();
	window.dispatchEvent(new Event("resize"));
};

And use BarbaJS code below for page trantions all works fine on first load. But if i navigate to an other page and then back to home (index), the ScrollSmoother functionality does not work and any JS later fails.

(if I remove scrollSmootherCreate(); from the code bewlo all works fine as expected)

How can I 'reset' ScrollSmoother before entering back to home?

 

barba.init({
        transitions: [
            {
                name: 'index',
                once() {
                    siteFirstLoad();
                    scrollSmootherCreate();
                    contentAnimation();
                },
                async leave(data) {
                    gsap.to(data.current.container, {
                        opacity: 0,
                    });
                },
                async beforeEnter() {
                    cleanGSAP();
                },
                async enter(data) {
                    gsap.from(data.next.container, {
                        opacity: 0,
                    });
                },
                async afterEnter() {
                    scrollSmootherCreate();
                    contentAnimation();
                },
                to: {
                    namespace: [
                      'index'
                    ]
                },
            },
            {
                name: 'default',
                once() {
                    siteFirstLoad();
                    contentAnimation();
                },
                async leave(data) {
                    gsap.to(data.current.container, {
                        opacity: 0,
                    });
                },
                async beforeEnter() {
                    cleanGSAP();
                },
                async enter(data) {
                    gsap.from(data.next.container, {
                        opacity: 0,
                    });
                },
                async afterEnter() {
                    contentAnimation();
                },
            }
        ]
    })

 

  • Like 1
Link to comment
Share on other sites

Sorry, I'm not familiar with barba.js but you can call ScrollTrigger.refresh() to force it to re-calculate the start/end positions of all the ScrollTriggers. If you're recreating things on the new page, make sure you .kill() the old ones that you don't need anymore. You can kill all the ScrollTriggers with: 

ScrollTrigger.getAll().forEach(t => t.kill());

If you still need some help, please make sure you provide a minimal demo with only the essential code necessary to illustrate the problem. Please don't include your whole project - just a few colored <div> elements would be fine. 

 

Glad to hear you're enjoying ScrollSmoother! Thanks for being a Club GreenSock member. 🙌

  • Like 1
Link to comment
Share on other sites

Thanks, I still can't get it to work.

Added the core code to this pen, but the issue is when navigating between pages... Do not see a option for adding a extra HTML page on CodePen.

It works fine on first load (and in en below) just not when I move between pages using BarbaJS.
If I remove the ScrollSmoother function all works fine even between BarbaJS page changes.
So the issue is somehow with ScrollSmoother not 'resetting'.

See the Pen LYQrjMX by DESIGNfromWITHIN (@DESIGNfromWITHIN) on CodePen

Link to comment
Share on other sites

Hey there!

 

CodeSandbox is usually a better bet for project type setups https://codesandbox.io/dashboard/home?workspace=fec44104-55b3-427e-9b38-1fba4c888d7a


 

There are also quite a few threads in these forums from people who have asked the same question about handling Barba page transitions. This thread lists out a lot of them and gives some advice.

 

Good luck.
 

 

  • Like 1
Link to comment
Share on other sites

Yeah, it's tough without being able to reproduce it, but maybe try calling ScrollTrigger.refresh() after you create the ScrollSmoother. I assume you're doing that each time the new content is fully finished loading and rendering, right? 

 

Also, it's pointless to call ScrollTrigger.refresh() right after you kill all the ScrollTriggers because refresh() recalculates all the start/end values (and there are none if there aren't any ScrollTriggers left) :)

 

If I were you, I'd add some console.log() stuff when you create your ScrollTrigger/ScrollSmoother stuff to make absolutely sure that the page is completely rendered in the browser FIRST. 

  • Like 1
Link to comment
Share on other sites

  • Solution

Thank you all after some tries I have finally fixed it.

This code works for me using GSAP + ScrollTrigger + ScrollSmoother + BarbaJS + AlpineJS
 

import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
import barba from "@barba/core";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { ScrollSmoother } from "gsap/ScrollSmoother";

gsap.registerPlugin( ScrollTrigger, ScrollSmoother);

function contentAnimation () {
    gsap.set(".animated_ul_title", {
        opacity:0,
        x:-20
    });
    gsap.to(".animated_ul_title", {
        duration:.4,
        delay:0, 
        opacity:1, 
        x:0,
        scrollTrigger: {
            trigger: ".animated_ul",
            start: "top bottom-=400px",
        }
    });
}

function scrollSmootherCreate(){
	ScrollSmoother.create({
        smooth: 1,
        effects: true,
        ignoreMobileResize: true,
        normalizeScroll: true
    });
    ScrollTrigger.refresh();
};

function galleryScroller(){
    const galleryWrapper = document.querySelector('.gallery-wrapper')
    const gallery = document.querySelector('.gallery')
    const tl = gsap.timeline()
    tl.to(gallery, {
        x: `-${gallery.offsetWidth}`,
        scrollTrigger: { 
            trigger: galleryWrapper,
            start: 'top top',
            end: `+=${gallery.offsetWidth}`,
            pin: true,
            scrub: 0.5,
        }
    })
}

function init(){
    
    // do something before the transition starts
    barba.hooks.before(() => {
    });

    // do something after the transition finishes
    barba.hooks.after(() => {
        ga('set', 'page', window.location.pathname);
        ga('send', 'pageview');
    });

    // scroll to the top of the page
    barba.hooks.enter(() => {
        window.scrollTo(0, 0);
    });

    barba.init({
        transitions: [
            {
                name: 'index',
                once() {
                    siteFirstLoad();
                    scrollSmootherCreate();
                    galleryScroller();
                    contentAnimation();
                },
                async leave(data) {
                    gsap.to(data.current.container, {
                        opacity: 0,
                    });
                },
              	async afterLeave() {
                    let triggers = ScrollTrigger.getAll();
                    triggers.forEach(function (trigger) {
                        trigger.kill();
                    });
                },
                async enter(data) {
                    gsap.from(data.next.container, {
                        opacity: 0,
                    });
                },
                async after() {
                    scrollSmootherCreate();
                    galleryScroller();
                    contentAnimation();
                },
                to: {
                    namespace: [
                      'index'
                    ]
                },
            },
            {
                name: 'default',
                once() {
                    contentAnimation();
                },
                async leave(data) {
                    gsap.to(data.current.container, {
                        opacity: 0,
                    });
                },
                async afterLeave() {
                    let triggers = ScrollTrigger.getAll();
                    triggers.forEach(function (trigger) {
                        trigger.kill();
                    });
                },
                async enter(data) {
                    gsap.from(data.next.container, {
                        opacity: 0,
                    });
                },
                async after() {
                    scrollSmootherCreate();
                    contentAnimation();
                }
            }
        ]
    })
}

window.addEventListener('DOMContentLoaded', function () {
    init();
});

 

Link to comment
Share on other sites

Thanks for dropping back in!

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.
×