[Page transition with GSAP and Barba.js]

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.

[Page transition with GSAP and Barba.js]

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

[Forward and Backward animation]

Thanks a lot.

[Forward and Backward animation]

Hi, this might be a repeated question but very simple that i have to ask.

How can i set the needle to go back when the mouse is out?

See the Pen QEVPxB by anon (@anon) on CodePen