Jump to content
Search Community

ScrollTrigger Not working after Barba Transition

sixtillnine test
Moderator Tag

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

  • 2 months later...

Hey Guys! Great work with GSAP... I have recently installed @Ihatetomatoes's Barba on my site (kinda sucessfully)

 

After each transition the the resulting animations dont work... as a noob to GSAP and Barba, I am probably missing a piece of code to play animations on page load... this is the bit I am stuck with... I know you dont offer 3rd party support, but I think this may be a simple GSAP fix...  I can see there are (barba) hooks to return to the top of the page once the page has loaded, is there one for PLAY animations / Scrolltrigger once page is loaded... Barba has seeming broke my site, but I am not giving up on it... any help would be MORE than appreciated... :)

Link to comment
Share on other sites

Hi @pauljamiekidd. Thanks for being a Club member!

 

I didn't quite understand your question - did you have a GSAP-specific question? I'm not at all familiar with Barba.js and you're correct about us not supporting 3rd party libraries - are you asking about lifecycle events in Barba where you'd have to put your GSAP code to have it fire when the page finishes loading or something? 

 

If you still need help, please make sure you provide a minimal demo like on CodeSandbox or something. It's super difficult to troubleshoot blind :)

Link to comment
Share on other sites

Hey! Thanks so much for your quick response... I would happily set up a demo to help get to the bottom of this but this:

8 hours ago, GreenSock said:

lifecycle events in Barba where you'd have to put your GSAP code to have it fire when the page finishes loading or something? 

could be what I am after.

 

The site loads up perfect I then click a button to reveal a Barba transition to another page. However all the animations on the revealed page are frozen and I (think) need a command in either the Barba code or a GSAP command to PLAY these animation once the transition to the new page has been made.

 

I seems a super simple fix, but my coding is basic. I hope this is clear and maybe @Ihatetomatoes could point me in the direction as I think it might be a Barba thing as opposed to a GSAP thing. I don't want to give up yet! :)

 

I am literally using this exact code.. https://ihatetomatoes.net/demos/page-transitions-tutorial-with-gsap/

 

But imagine each page in this demo has animations on it... they WON'T play after each transition. I hate to be a  burden to people but I feel I can really crack on once I have this part of my project solved.

 

Enjoy the rest of your weekend :)

 

 

Edited by pauljamiekidd
clarity in my query
Link to comment
Share on other sites

Thanks a million for taking the time to respond... I have spent this afternoon 'trial and erroring' barba based on what you sent but still no cigar... the whole transition i have on my site works as it should do... infact it looks great... its just the bit where the animations don't play once entering the new page after transition.

 

I noticed in your GSAP you included  .then(resolve()); which i thought fixed the problem... the transitions work, the animations work... but the link doesnt go anywhere, just stays on the page I am on... Maybe I am out of my depth with GSAP... I am so close I don't want to give up on it as it does exactly what I want... I am 99% there! eeek!

Link to comment
Share on other sites

function init(){
    
    const loader = document.querySelector('.loader');

    // reset position of the loading screen
    gsap.set(loader, {
        scaleX: 0, 
        rotation: 0, 
        xPercent: -5,
        yPercent: -50, 
        transformOrigin: 'left center', 
        autoAlpha: 1
    });

    function loaderIn() {
        // GSAP tween to strech the loading screen across the whole screen
        return gsap.fromTo(loader, 
            {
                rotation: 0,
                scaleX: 0,
                xPercent: -5
            },
            { 
                duration: 0.5,
                xPercent: 0,
                scaleX: 1, 
                rotation: 0,
                ease: 'Power4.inOut', 
                transformOrigin: 'left center'
            });
    }
	
	

    function loaderAway() {
        // GSAP tween to hide loading screen
        return gsap.to(loader, { 
            duration: 0.5, 
            scaleX: 0,
            xPercent: 0, 
            rotation: 0, 
            transformOrigin: 'right center', 
            ease: 'Power4.inOut'
        });
    }

    // do something before the transition starts
    barba.hooks.before(() => {

        document.querySelector('html').classList.add('is-transitioning');
        barba.wrapper.classList.add('is-animating');

    });

    // do something after the transition finishes
    barba.hooks.after(() => {

        document.querySelector('html').classList.remove('is-transitioning');
        barba.wrapper.classList.remove('is-animating');
        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: [{
            async leave() {
                await loaderIn();
        
            },
            enter() {
                loaderAway();
            }
        }]
    })

}

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

 

Link to comment
Share on other sites

Hello Paul,

this really is more about how barba works and less related to GSAP - so you might want to consider taking a deeper dive into barba.

 

This here is a nice tutorial that should help understand some things better: 

 

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

 

Adding a minimal demo is always helpful, even if you think that you are 99% there - with libraries like barba things can become quite complex rather quick - so if you are asking somebody else to give you some help, it would be great to provide them with the tools for being able to offer that help.

 

I created a project for you over on stackblitz with the code provided by @ihatetomatoes

 

For triggereing an animation / setting up ScrollTriggers on page load, you will need to do so either in your 'load' function (where the init() happens) or you could use barbas 'once' hook , if I am not mistaken. In the example I did it in the function on 'load'. 

 

If you want to trigger animations / create ScrolTriggers after transitions, you will need to do so in the respective 'hooks' provided by barba (or if you need to do specific things for specific pages only, in the 'views') - or alternatively in an onComplete callback of that loaderAway animation if you want the transition to be complete before you trigger any animation - so it would be best to work with re-useable functions.

 

In this example I used the onComplete callback of the loaderAway tween to trigger a tween on the headline after the page transition is finished completely and I used the after hook provided by barba to set up a ScrollTrigger for the footer.

 

For ScrollTriggers it is also important to kill off the old ones before creating the new, so I added that to the afterLeave hook provided by barba here.

 

I hope all this will help a bit. 

 

https://stackblitz.com/edit/web-platform-j6l93d

 

  • Like 4
Link to comment
Share on other sites

Awesome! thanks for this... I am hoping I can  wade through your demo and tutorial @akapowl ... You're right about it getting complex quickly and I think I may be out of my depth on this... which is a shame as the transition really benefits the site I am working on, I just can't seem to get the transition effect over the line having spent too long on it already! haha *project creep* - maybe if I look at it with fresh eyes (with the aid of your input above) and I can finally get it done. Thanks to everyone who offered their help! @Cassie

  • Like 2
Link to comment
Share on other sites

Sigh! I too walked on this path of "I am new to JS but I am having problems using Barba + GSAP"

 

My 2 cents! STOP! Don't start with JS+GSAP+Barba. Start instead with JS, understand it's simple concepts, arrays, objects, scope etc ( I am still learning this btw ) Then afterwards it will become MUCH MUCH easier solving problems which arise after integrating 3rd party libraries. 

 

With nothing but love
Fellow Newbie :)

  • Like 5
Link to comment
Share on other sites

3 minutes ago, Wizard of Oz said:

Sigh! I too walked on this path of "I am new to JS but I am having problems using Barba + GSAP"

 

My 2 cents! STOP! Don't start with JS+GSAP+Barba. Start instead with JS, understand it's simple concepts, arrays, objects, scope etc ( I am still learning this btw ) Then afterwards it will become MUCH MUCH easier solving problems which arise after integrating 3rd party libraries. 

 

With nothing but love
Fellow Newbie :)

Agreed, my friend.. I am more than okay with front end development, but JS not so much... I will need to build on what basics I know... and hopefully the penny will drop haha

  • Haha 1
Link to comment
Share on other sites

  • 1 month later...

Hi Guys,

I have been having the same problem and I think I figure it out, this worked for me:

Pack all your animations on one single function and call the function once your site load something like:

 

initGsap();

function initGsap(){

// All gsap animations with ScrollTrigger and/or ScrollSmoother

}

 

On barba.js init function place this and on the After hook call you initGsap function:

 

async afterLeave(data) {
let triggers = ScrollTrigger.getAll();
                triggers.forEach(function (trigger) {
                    trigger.kill();
                });
            },
async after(data) {
                initGsap();
            }

 

And that's it, you will remove the scrollTrigger methods and then reload all your animations.

Hope that helps :)

 

(sorry for my bad english)

 

  • 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.
×
×
  • Create New...