Jump to content
GreenSock

capa

ShockinglyGreen
  • Posts

    9
  • Joined

  • Last visited

Posts posted by capa

  1. 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. 

     

     

    • Like 1
  2. 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
  3. 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.  

     

     

  4. 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.

  5. 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!

×