Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sixtillnine

ScrollTrigger Not working after Barba Transition

Recommended Posts

I'm brand new to GSAP and Barba, I have got a basic page transition working with the two, however after the transition scroll trigger seems to break.

 

I've been looking through the forum and see other users have very similar issue to what I have but I cannot find a solution.

 

If either of the pages are accessed directly, scroll trigger works fine. However if either page is navigated to via the barba transition the scroll trigger doesn't work. Using barba views I appear to be able to get scripts to fire post transition, but I cannot work out how to get scroll trigger to reload.

 

When I inspect the element after transition it looks like it's ready to be manipulated (has the inline transform style added to it), but it doesn't animate on scroll.

 

I'm aware this may be a barba issue rather than a GSAP issue, but hopefully someone on the forum has come across this and can help.

 

I have a very basic test pages at the moment (excuse the superfluous loading of every plugin!).  First page is:

 

<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en" class="lt-ie9 lt-ie8 lt-ie7 ie9"><![endif]-->
<!--[if IE 7]><html lang="en" class="lt-ie9 lt-ie8 ie9"><![endif]-->
<!--[if IE 8]><html lang="en" class="lt-ie9 ie9"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if gt IE 9]><!--><html lang="en"><!--<![endif]-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>tester 1 - Contemporary Chandeliers</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="description" content="tester 1 Description">
        <link href="/assets/css/ccc2021.css?1608457279" rel="stylesheet" type="text/css">
    </head>
    <body data-barba="wrapper" class="" id="pageTop">
        <div class="page">
        <div class="stuck--top">
            <h1>Don't want this to change</h1>
        </div><!--/.stuck--top-->
        <div class="barbaHolder">

        <main data-barba="container" data-barba-namespace="tester">
            <div class="container purple">
                <h4>tester 01</h4>
                <p>
                    <a href="tester2.php" title="Next">Go to Page Two</a>
                </p>
                
                <div class="box">
                </div><!--/.box-->
            </div><!--container purple-->

            <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
            <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script>
            <script src="https://unpkg.com/@barba/core"></script>
            <script src="/assets/js/locomotive-scroll.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/Draggable.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/EaselPlugin.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/MotionPathPlugin.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/PixiPlugin.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/TextPlugin.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
            </main>
        </div><!--/.barbaHolder-->
    </div><!--/.page-->
<script src="/assets/js/application.js"></script>
</body>
</html>

Second page is basically the same apart from the link back:

<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en" class="lt-ie9 lt-ie8 lt-ie7 ie9"><![endif]-->
<!--[if IE 7]><html lang="en" class="lt-ie9 lt-ie8 ie9"><![endif]-->
<!--[if IE 8]><html lang="en" class="lt-ie9 ie9"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if gt IE 9]><!--><html lang="en"><!--<![endif]-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>tester 2 - Contemporary Chandeliers</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="description" content="tester 2 Description">
        <link href="/assets/css/ccc2021.css?1608457279" rel="stylesheet" type="text/css">
    </head>
    <body data-barba="wrapper" class="" id="pageTop">
        <div class="page">
        <div class="stuck--top">
            <h1>Don't want this to change</h1>
        </div><!--/.stuck--top-->
        <div class="barbaHolder">

        <main data-barba="container" data-barba-namespace="tester">
            <div class="container purple">
                <h4>tester 02</h4>
                <p>
                    <a href="tester.php" title="Next">Go to Page One</a>
                </p>
                
                <div class="box">
                </div><!--/.box-->
            </div><!--container purple-->

            <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
            <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script>
            <script src="https://unpkg.com/@barba/core"></script>
            <script src="/assets/js/locomotive-scroll.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/Draggable.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/EaselPlugin.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/MotionPathPlugin.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/PixiPlugin.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/TextPlugin.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
            </main>
        </div><!--/.barbaHolder-->
    </div><!--/.page-->
<script src="/assets/js/application.js"></script>
</body>
</html>

The application js controlling the transition and scroll trigger is:

/*PAGE TRANSITION*/
barba.init({
    transitions: [{
        name: 'opacity-transition',
        leave(data) {
            return gsap.to(data.current.container, {
                duration: 0.5,
                opacity: 0,
                y: '50px',
            });
        },
        enter(data) {
            gsap.from(data.next.container, {
                duration: 0.5,
                opacity: 0,
                x:'-50px',
            });
        }
    }],
    views: [{
        namespace: 'tester',
        beforeLeave(data) {
            alert('Leaving tester');
        },
        beforeEnter(data) {
            alert('Entering tester');
            boxRoll();
        }
    }]
});

/*SCROLL TRIGGER*/
gsap.registerPlugin(ScrollTrigger);
function boxRoll(){
    
    const boxes = gsap.utils.toArray('.box');
    boxes.forEach(box => {
        gsap.to(box, { 
            scrollTrigger: {
                trigger: box,
                toggleActions: "restart",
                scrub: 0.5,
                id: 'boxRoll',
            },
        rotate: 360,
        x: 350,
        })
    });
    
}
boxRoll();

 

 

Link to comment
Share on other sites

 

Hey @sixtillnine - welcome to the forums.

 

When you search for barba in these forums, you will actually find quite a few threads asking about this or something similar.

 

In a nutshell:

You will have to kill off the old ScrollTriggers in a barba hook when transitioning to another page, and create all neccessary ScrollTriggers for the next page from scratch after transitioning. You will find examples on how to do that and some more explanation on the why in the threads below.

 

 

 

 

 

 

Hope this helps.

 

Cheers,

Paul

  • Like 2
Link to comment
Share on other sites

Thanks for this. In the end I gave up on Barba. I just couldn't work out how to kill and refresh the scrollTriggers - I could get other js to fire on events but GSAP didn't work for me.

 

I switched over to Swup (https://swup.js.org) - this does what I needed it to do, and I can get scroll trigger to survive the transitions in a predictable way.

 

If you're interested here is the working JS (assuming gsap and swup are already loaded):

/*SCROLL TRIGGER*/
gsap.registerPlugin(ScrollTrigger);
function boxRoll(){
    
    const boxes = gsap.utils.toArray('.box');
    
    boxes.forEach(box => {
             
        gsap.from(box, { 
            scrollTrigger: {
                trigger: box,
                toggleActions: "restart pause resume pause",
                start: "top "+scrubStart+"%",
                end:   "top "+scrubEnd+"%",
                //markers: true,
                scrub: 0.5,
                id: 'boxRoll',
            },
        rotate: 360,
        x: '50vw',
        })
    });
}
function tileFade(){
    
    const tiles = gsap.utils.toArray('.tile');
    
    tiles.forEach(tile => {
        
        gsap.from(tile, { 
            scrollTrigger: {
                id: 'tileFade',
                trigger: tile,
                toggleActions: "restart pause resume pause",
                start: "top 100%",
                end: "top 75%",
                scrub: 0.5,
                //markers: true,
                //stagger: 1,
            },
        opacity: 0,
        scale: "random(0.5, 0)",
        })
    });
}
/*Swup*/
const swup = new Swup({
    //plugins: [new SwupHeadPlugin(), new SwupBodyClassPlugin()]
});
swup.on('contentReplaced', function () {
    window.scrollTo(0, 0);
    /*GSAP */
    boxRoll();
    tileFade();
});
/*Seems to work better if these are called after swup*/
boxRoll();
tileFade();

 

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

I'm having the same problem with Barba and scrolltrigger but don't want to abandon Barba. Has anyone had that same problem and found a solution? I'm new to gsap and javascript too btw so not an advanced user by any stretch of the imagination :-)

Link to comment
Share on other sites

 

Hello @Jloafs

 

6 hours ago, Jloafs said:

Has anyone had that same problem and found a solution?

 

Many have had their issues with barba resolved - for example those, that I linked to above.

 

And as also mentioned above:

 

You will [(likely)] have to kill off the old ScrollTriggers in a barba hook when transitioning to another page, and create all neccessary ScrollTriggers for the next page from scratch after transitioning. You will find examples on how to do that and some more explanation on the why in the threads [linked to].

 

  • Like 2
Link to comment
Share on other sites

  • 9 months later...

@Jloafs I stumbled across this thread as I was having a similar issue. So what solved the issue for me was having an init() function run on both page load and the after hook.
In this init function give each scrollTrigger an id relative to the section or functionality store those ids in an array then using the before hook loop through each id using `ScrollTrigger.getById(id)`  and then run the kill() function

Not tested the below code but should help understand what fixed my issue

 

gsap.registerPlugin(ScrollTrigger);
const prefix = 'className';

let triggerIDs;

init();

function init() {
    const sections = document.querySelectorAll('sections');
    triggerIDs = [];

    sections.forEach(function(element, index) {
      	const ID = prefix + '__' + index;
        const tl = gsap.timeline({
            scrollTrigger: {
                id: ID,
                markers: true,
                trigger: element,
            },
        })

        triggerIDs.push(ID)
    });
}

barba.hooks.beforeLeave((data) => {
    triggerIDs.forEach(function(id) {
        ScrollTrigger.getById(id).kill();
    });
});


barba.hooks.after((data) => {
    init();
});
  • Like 2
  • Thanks 1
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.
×