capa

Thank you for the link! It could be a great lesson, looking through what someone else created! Actually, it is obviously easy to use a existing code but in order to realize what I really want, I need to know how to create by myself.

I rewrite my code and it seems fine. I know there would be simpler way to do this though.. https://codepen.io/webgrapher/pen/pogPjrj

Hi Zach, Thank you for your comment! It's very helpful! I will try to rewrite my code following your outline^^

I am learning JavaScript and GSAP for several months and tried to make slide show using delayedCall() . https://greensock.com/docs/v3/GSAP/gsap.delayedCall() However, I encountered the following issues. 1. Expected to cancel slide loop by hovering on dot pager but not.. 2. The first transition is awkward..

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); });

I appreciate it. I fixed all errors and updated GSAP version. And now it seems to work!

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.

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.

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!