capa
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by capa
-
-
I rewrite my code and it seems fine. I know there would be simpler way to do this though..
See the Pen pogPjrj by webgrapher (@webgrapher) on CodePen
-
Hi Zach,
Thank you for your comment! It's very helpful!
I will try to rewrite my code following your outline^^
- 1
-
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..
See the Pen eYJBYme by webgrapher (@webgrapher) on CodePen
-
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); });
- 2
-
I appreciate it.
I fixed all errors and updated GSAP version.
And now it seems to work!
- 1
-
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 pagesIn 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 pagesThanks in advance!
GSAP slider: Regarding delayedCall()
in GSAP
Posted
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.