Jump to content
GreenSock

capa

Page transition with GSAP and Barba.js

By capa, in GSAP. Views: 14,277

Moderator Tag

Recommended Posts

Posted

With GSAP and Barba.js, I would like to use different types of page transitions corresponding to the link clicked.

 

The followings are example links:
•one included in the hamburger menu
•one outside the hamburger menu
•one linked to the home page
•one linked to inner pages

 

In addition, I have one more question.
when using Barba.js, GSAP script in html doesn't work.
Could you tell me how I can make it work?
*I would like to load different scripts depending on pages

 

Thanks in advance!

Link to comment
Share on other sites
Posted

Hey capa and welcome to the GreenSock forums.

 

It is impossible for us to help without seeing your setup. Please create a minimal demo setup as this thread describes:

 Also know that we are here to help you, not do it for you :) 

Link to comment
Share on other sites
  • Author
Posted

Thank you for your replay.

 

I use GSAP, ScrollMagic and Barba.

Without Barba, all works fine but when i use barba js, other scripts are not loaded on newpage.

Please use hamburger menu on the right to move to the Home page.

*Just in case, when you reload Home page, you can check all animation

 

It seems that Barba works correctly but GSAP and ScrollMagic are not loaded after page transition.

Link to comment
Share on other sites
Posted

That seems like more of a Barba question. Most likely it's one of two things:

  1. The elements that GSAP and ScrollMagic are trying to animate are removed on the page transition and they are never added back.
  2. You're not including GSAP and ScrollMagic where Barba wants you to place scripts that are included on every page. 

Your demo is unusable to see the issue from what I can tell so I can't really help you more than that.

Link to comment
Share on other sites
  • 3 weeks later...
  • Author
Posted

Sorry for late reply .

 

I reviewed my setting for Barba.js and found out how to fix it.

Now it works but when I use cssRule, there is a problem.

For instance,  the third line of TimelineMax for "#main-visual.mv-top::after" doesn't work.

I wonder there are something wrong..

  

var controller = new ScrollMagic.Controller();

var tlMv = new TimelineMax();

	tlMv
	.to("#main-visual", .5,{width: "90%",ease: Power2.easeInOut
	},0)
	.to("#main-visual.mv-top .bg", 0,{opacity: 0,ease: Power2.easeInOut
	},0)
	.to(CSSRulePlugin.getRule("#main-visual.mv-top::after"), .2, {opacity: 0, ease: Power2.easeInOut}, 0)
	.to(CSSRulePlugin.getRule("#main-visual::before"), .5, {backgroundColor: "rgba(0,0,0,.8)", ease: Power2.easeInOut}, 0)

*According to gsap document, I should use single colon instead of double colon. But  it works with double collon in my case so I left it for now.  

 

 

Link to comment
Share on other sites
Posted

Hey capa.

 

Your site has several errors including one that says "TimelineMax is not defined". Please fix those errors so that we can focus on the issue at hand. It'd also help you get a faster and more helpful response if you remove all of the irrelevant parts of your website that aren't related to the issue(s) at hand. That's one of the reason why we request CodePen demos in this thread:

 

Link to comment
Share on other sites
  • Author
Posted

I appreciate it.

I fixed all errors and updated GSAP version.

And now it seems to work!

  • Like 1
Link to comment
Share on other sites
Posted
On 12/24/2019 at 3:17 AM, capa said:

I appreciate it.

I fixed all errors and updated GSAP version.

And now it seems to work!

Can you please explain how did you fix it?

I am using GSAP v2 with Barba js v2 and ScrollMagic

Link to comment
Share on other sites
  • Author
Posted

I am using Barba js v1 and GSAP v3 so it may not be useful for you though..

I referenced Barba official page（https://barba.js.org/v1/transition.html）and added code for  GSAP and ScrollMagic.

  

var FadeTransition = Barba.BaseTransition.extend({
start: function() {

Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},

fadeOut: function() {

// you can use your own GSAP animation here before transition like below.

// TweenMax.to(".menu ul li", 0.4, {y: 20, opacity: 0, ease: Power2.easeInOut});

return $(this.oldContainer).animate({ opacity: 0 }).promise();
},

fadeIn: function() {

$(window).scrollTop(0);

var _this = this;
var $el = $(this.newContainer);
$(this.oldContainer).hide();

// you use your own GSAP animation here after transition like below.

// var l1 = new TimelineMax({paused : false});

	// l1
	// .set(".menu-overlay", {display:"block"})
	// .to(".block.b1", 1.0, {y : "-50%", ease: Power4.easeInOut
	// },.3)

$el.animate({ opacity: 1 }, 400, function() {
_this.done();
});
}

});

Barba.Pjax.getTransition = function() {
return FadeTransition;
};


Barba.Pjax.start();

Barba.Dispatcher.on('newPageReady', function( currentStatus, oldStatus, container, newPageRawHTML ) {

// you can use ScrollMagic and GSAP animation here like below.

// var controller = new ScrollMagic.Controller();
// var tlWeb = new TimelineMax();

// 	tlWeb
// 	.from("#web.two-col .bg",.5,{opacity: 0}, 0)
// 	.to("#web h2",.5,{className:"+=enter"},0)
// 	.fromTo("#web .text p", .7,{y: 10, opacity: 0, ease: Power2.easeInOut},{y: 0, opacity: 1, ease: Power2.easeInOut},.3)
// 	.fromTo("#web .more", .7,{y: 10, opacity: 0, ease: Power2.easeInOut},{y: 0, opacity: 1, ease: Power2.easeInOut},.6)
// 	.fromTo("#web.two-col img", .7,{y: 10, opacity: 0, ease: Power2.easeInOut},{y: 0, opacity: 1, ease: Power2.easeInOut},.9)

// 	var sceneWeb = new ScrollMagic.Scene({
// 		triggerElement: '#web',
// 		offset: '0'
// 	})
// 	.addIndicators({
//     colorTrigger: "white",
//     colorStart: "white",
//     colorEnd: "white",
//     indent: 5
//  	 })
// 	.setTween(tlWeb)
// 	.addTo(controller);

});

 

 

  • Like 2
Link to comment
Share on other sites
Posted
10 hours ago, capa said:

I am using Barba js v1 and GSAP v3 so it may not be useful for you though..

I referenced Barba official page（https://barba.js.org/v1/transition.html）and added code for  GSAP and ScrollMagic.

  


var FadeTransition = Barba.BaseTransition.extend({
start: function() {

Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},

fadeOut: function() {

// you can use your own GSAP animation here before transition like below.

// TweenMax.to(".menu ul li", 0.4, {y: 20, opacity: 0, ease: Power2.easeInOut});

return $(this.oldContainer).animate({ opacity: 0 }).promise();
},

fadeIn: function() {

$(window).scrollTop(0);

var _this = this;
var $el = $(this.newContainer);
$(this.oldContainer).hide();

// you use your own GSAP animation here after transition like below.

// var l1 = new TimelineMax({paused : false});

	// l1
	// .set(".menu-overlay", {display:"block"})
	// .to(".block.b1", 1.0, {y : "-50%", ease: Power4.easeInOut
	// },.3)

$el.animate({ opacity: 1 }, 400, function() {
_this.done();
});
}

});

Barba.Pjax.getTransition = function() {
return FadeTransition;
};


Barba.Pjax.start();

Barba.Dispatcher.on('newPageReady', function( currentStatus, oldStatus, container, newPageRawHTML ) {

// you can use ScrollMagic and GSAP animation here like below.

// var controller = new ScrollMagic.Controller();
// var tlWeb = new TimelineMax();

// 	tlWeb
// 	.from("#web.two-col .bg",.5,{opacity: 0}, 0)
// 	.to("#web h2",.5,{className:"+=enter"},0)
// 	.fromTo("#web .text p", .7,{y: 10, opacity: 0, ease: Power2.easeInOut},{y: 0, opacity: 1, ease: Power2.easeInOut},.3)
// 	.fromTo("#web .more", .7,{y: 10, opacity: 0, ease: Power2.easeInOut},{y: 0, opacity: 1, ease: Power2.easeInOut},.6)
// 	.fromTo("#web.two-col img", .7,{y: 10, opacity: 0, ease: Power2.easeInOut},{y: 0, opacity: 1, ease: Power2.easeInOut},.9)

// 	var sceneWeb = new ScrollMagic.Scene({
// 		triggerElement: '#web',
// 		offset: '0'
// 	})
// 	.addIndicators({
//     colorTrigger: "white",
//     colorStart: "white",
//     colorEnd: "white",
//     indent: 5
//  	 })
// 	.setTween(tlWeb)
// 	.addTo(controller);

});

 

 

Thank you, I'll try if I can get it to work.

Link to comment
Share on other sites
  • 1 month later...
Posted

Hi guys! Could it be possible to see a link or something it can help me to do the same ?

Link to comment
Share on other sites
  • 4 weeks later...
Posted

Hey gang. I've been trying to get a simple page transition working using GSAP 3 and Barba.js V2 for some time now but not having any luck. All the docs and examples out there haven't seemed to help me with the latest versions. I'm not a great developer but it's become my life long goal to one day solve this :) 

 

I've tried 2 methods below (onComplete and .then) but no dice. I'd appreciate any help I can get! Thank you!

See the full code on codesandbox.io
  

function leaveAnimation(e) {
  var done = this.async();
  gsap.to(e, 1, {
    opacity: 0,
    onComplete: done
  });
}

function enterAnimation(e) {
  return new Promise(resolve => {
    gsap.to(e, 2, { opacity: 1 }).then(resolve());
  });
}

barba.use(barbaPrefetch);
barba.init({
  debug: true,
  transitions: [
    {
      name: "one-pager-transition",
      to: {
        namespace: ["one-pager"]
      },
      sync: true,
      leave: data => leaveAnimation(data.current.container),
      enter: ({ next }) => enterAnimation(next.container)
    }
  ]
});

 

Link to comment
Share on other sites
Posted

Hey @Cameron Knight and welcome to the GreenSock forums.

 

Your question is more focused on Barba so you may not get a clear answer here. In your demo it looks like there are 406 errors for some reason. Not sure why.

  • Like 2
Link to comment
Share on other sites
Posted

Hey @ZachSaucier, really appreciate the quick response. The GSAP community is the bee's knees. Love it.

 

I did make a post at Barba a few days ago so I'll wait to hear back from them. If I have any luck I'll post a working example here.

  • Like 1
Link to comment
Share on other sites
Posted

I finally got a simple transition working with gsap 3 & barba V2! 🎉

 

The transition function that worked for me looks like this:

  

function leaveAnimation(container) {
  return new Promise(async resolve => {
    await gsap
      .to(container, {
        duration: 1,
        opacity: 0,
      })
      .then();
    resolve();
  });
}


One really simple thing that took me a while to figure out was making the enter animation work. This was fixed by just adding css to make the barba container positioned absolute: 

  

.container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

 

I'm going to leave this working example here incase anyone else needs it to reference from.

  • 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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account