Jump to content
GreenSock

Search the Community

Showing results for 'barba'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

  • FAQ

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. 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.
  2. 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.
  3. 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.
  4. 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) } ] });
  5. Hi @Chriz welcome to the forum. I see you bumped another thread asking for examples. In case you were unaware the video series you posted above has a link to download the working files in the description (click "show more"). Please note however that the tutorial you referenced uses the older version of both GSAP and Barba. So if you are just getting started on your journey with each, then I would highly suggest using GSAP 3 and Barba v2.
  6. Ah, that's what you mean. Yes, that's just animating one element that covers the whole page The steps to create that are: Create a morph SVG animation that covers the whole screen. Create a morph SVG animation that uncovers the whole screen. When a link is clicked, prevent the default behavior and run the animation created in step 1 (potentially also start preloading the content from the new page). When that animation has finished, switch out the old page's content with the new page's content. Once the new content has been loaded, run the animation created in step 2. Does that make sense? This thread has more information on animating blobs (including one going to full screen at the very bottom of Mikel's demo): There's a handy library called barba.js that you can pair with GSAP to load the next page's content and help run your animations. In fact, the site you linked to uses barba.js and GSAP on their website (as does the barba.js site)!
  7. @akapowl thanks for the feedback, that makes sense! @ZachSaucier thanks for the help again! Time to dig deeper in both Barba and GSAP now.
  8. @mdelp Looking good. One thing I can tell you is, that the reason, why you do not need to reinit your scripts in this setup, is beacause the only script that you use (except for the barba setup) is applied to the navigation module, which is outside of the <main data-barba="container"> . This means that it does not get removed and reapplied on every transition, but stays where it is and thus does not need to be re-initiated. You will only need to re-initiate scripts that aim at elements, that are inside of the <main data-barba="container"> and thus get removed and/or replaced.
  9. @ZachSaucier my initial question in this thread was if there is a way to completely reset a timeline without reverse(); So inside the leave transition of Barba in the example I reverse the timeline, but is it possible to reset it in 0s? I tried doing tl_nav.invalidate(); but that doesn't seem to work.
  10. I've set up a quick example of my setup. Everything works and I don't need to reinit my scripts in this setup for some reason. Check https://dev.mathieudelporte.be/barba-js for my uncompiled code. It looks like the nav transition is a bit clunky though, not sure why the performance takes a hit there. I'll probably have to add a bunch of more checks and lines of code to make it bullet-proof, but if you guys could give a JS-noob some feedback it would be much appreciated!
  11. Unfortunately this doesn't really solve my problems, when I need to play a rather complex timeline at somepoint after a barba-transition. I also found that when I put the timeline as well as the command to play that timeline into the same function like this... function fireThisAfterTransition() { var scrollIndicationAnimation = gsap.timeline({ paused: true, reversed: true, force3D:true }); scrollIndicationAnimation .set('.scroll-indicator-main', { transformOrigin: "50% 0%" }) .to('.scroll-indicator-main', { duration: 1.5, scaleY: 1, ease: "expo.inOut" }) .set('.scroll-indicator-main', { transformOrigin: "50% 100%" }) .to('.scroll-indicator-main', { duration: 1.5, scaleY: 0, ease: "expo.inOut", onComplete:function(){ console.log ('Look, this is being executed...') } }) .set('.scroll-indicator-main', { transformOrigin: "50% 0%" }) ; scrollIndicationAnimation.play(); } ... and call that function after the barba-transition has ended, it works and the timeline will be animated. But this lacks the possibility to really control the timeline when I need to. Is it possible that the way barba works at this point, it is not compliant with the way GSAP's timelines are made up?
  12. Actually, locally it shouldn't be working as intendend at all, since barba's ajax requests require a server environment to be working in the first place. I am using VS-Code's local server extension for testing - but there it doesn't work as intended neither. I just tried reverting back to TweenMax v2.1.2 because I was absolutely sure, that it worked with that version - but I was proven wrong. It doesn't work with that version neither - so I guess it must be an issue related with Barba rather than with GSAP. Dang...
  13. I figured out what the problem was in my setup, specifically why my timelines would only run on the first page load. Basically Barba doesn't reinit scripts after a page transition, so you have to load them inside a barba hook. So I just did this: barba.hooks.after(() => { $('.c-hamburger').on('click', function() { $('.c-hamburger, .hamburger, .r-header').toggleClass('is-active'); tl_overlay_in.reversed() ? tl_overlay_in.play() : tl_overlay_in.reverse(); }); }); So after every page transition this gets reinitialised and all runs perfect now. This actually applies to other JS (like a slider) as well. There might be a better way to do this, but I'll do some more homework later. I do have another question though, in the onComplete hook of my page out transition of Barba I'd like to reset a timeline to its starting values, in the starting state it would be on a page load. Is there a specific function for that? tl_overlay_in.invalidate().restart(); The code above doesn't seem to work, is there something that I can use? barba.init({ transitions: [{ name: 'transition-base', leave: function(data) { var done = this.async(); gsap.to('.overlay', {left: 0, duration: .5, ease: 'cubicbezier'}); // Somewhere here or in the onComplete I need to reset a specific timeline to its starting values gsap.to(data.current.container, 0.5, { opacity: 0, onComplete: done }); }, enter: function(data) { var done = this.async(); gsap.to('.overlay', {left: '100%', duration: .5, delay: .5, ease: 'cubicbezier', clearProps: 'all'}); gsap.from(data.next.container, 0.5, { opacity: 0, onComplete: done }); } }] });
  14. Hey there! I don't know if this is or might be related but I am still going to post it here instead of opening a new thread, because I think it might be a related problem. Since upgrading to GSAP v3 I noticed some issues with timelines, too, when using with Barba.js. My transition-animations (set-up when GSAP v2.x was still in use) still work as fine as before, but when I am trying to play any timeline (even when it was set up in global scope) after the transition has finished, it won't play the animations of that timeline at all. This seems pretty odd, because onComplete-functions or .then-functions included in those timelines are being executed as expected. I hope this is somewhat understandable - don't know how to set up a codepen that would be working with barba-transitions. Any idea what the problem might be?
  15. Hey mdelp. I assume the click function is the problematic one? If so, that looks to be completely unrelated to Barba. The logic inside of the click function seems fine. Not sure what could be going wrong. Any other details or a working demo would be helpful in us aiding you.
  16. I used your example code in my Barba instance. Thats what happens: const transition = { name: 'def from Zach', sync: true, enter: ({ current, next }) => { gsap.to(current.container, next.container, { duration: 3, y: "-100vh", onStart: function() { this.targets()[0].style.zIndex = "1"; console.log("start leave"); }, onComplete: function() { document.body.removeChild(this.targets()[0]); gsap.set(this.targets()[1], { y: 0 }); console.log("complete leave"); } }); } }
  17. It doesn't have to necessarily be in a sandbox. But you shouldn't need Barba to recreate the realistic situation once the content has been loaded. I am still not understanding what is wrong with the approach I gave above
  18. I already tried to make a codepen/codesandbox working with barbaJS, but it doesnt because of the prefetch of barba. This doesnt work with sandboxes. But I can send you a private message with a link to what I want to achieve.
  19. Hey Zach, Thank you! Yes the way I do it in the example is not optimal, but its just a very small and downsized version of what I exactly want to do. Maybe more information will help here. I use BarbaJS to translate between page loads. So the first container in the example is the "current.container" in Barba's "leave" function. The Second is the container pulled by BarbaJS into the DOM to replace the first in Barba's "enter" function. Both functions are sync'd. Thats why I need to split the two animations. My example doesn't work because both container are on their position in DOM and TranslateY works relative to the start position of the container. GSAP uses always TranslateY as far as I see, when I use { y: 100% } ? The result at the end should be look as follows: The first container should slide up or at least the height of the container should go to 0. The second Container should be at maybe 40% top and slide up to top 0 while the first container animates. I hope thats kinda useful.. 😅 Thanks for your Feedback!
  20. Not sure how to link multiple pages in a codepen but here's how I think this could be implemented in v2 `done` is a function that's returned when the current action is complete so it's called after the tl is played and reversed. next.container ensures the animation doesn't reverse until the page that's being transitioned to is available Hope this helps const timeline = gsap.timeline({paused: true}) timeline.to('.cover', {left: '100%', ease: 'power2.out'}) barba.init({ transitions: [ { leave: () => { var done = this.async() timeline.play().then(() => done()) }, enter: ({next}) => { var done = this.async() next.container && timeline.reverse().then(() => done()) } } ] })
  21. Hey dotun12 and welcome. Unfortunately we don't have the capacity to help with issues with third party libraries like Barba. This is especially true if you don't provide a working demo (your CodePen demo fails to load all of your resources - check out this post on including external resources in CodePen). Most likely it will be easier to use GSAP with Barba if you use GSAP 3 because it has better support for promises using .then().
  22. 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); });
  23. Can you please explain how did you fix it? I am using GSAP v2 with Barba js v2 and ScrollMagic
  24. 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.
  25. That seems like more of a Barba question. Most likely it's one of two things: The elements that GSAP and ScrollMagic are trying to animate are removed on the page transition and they are never added back. 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.
×