Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for 'barba'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. 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"); } }); } }
  2. 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
  3. 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.
  4. 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!
  5. 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()) } } ] })
  6. 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().
  7. 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); });
  8. Can you please explain how did you fix it? I am using GSAP v2 with Barba js v2 and ScrollMagic
  9. 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.
  10. 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.
  11. 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.
  12. Less specific help case here and more a general query into how files are structured/organized when doing bigger builds. As of late I've been using the approach provided ya'll folks in my various code pens. I generally keep vars/timeline vars/scrollmagic scenes at the top, then preloader and intro animation, then timelines/media query watcher goodness and lastly misc helpers/stuff. However this has been for single pages with tons of scroll based animations. I've recently figured out how to use barba.js with wordpress and am now trying to figure out best approach to structure all this for multiple pages with animation. I generally am just building eye candy websites and dont use vue, react or angular. Should I just have one massive js file? Should it be broken up into a few different files? Should those files be broken up based on functionality? ie: scroll.js, gsap.js, misc.js, barba.js I will assume like most code related issues there is many ways to skin this cat. Mostly looking to see how the big boys do it and incorporate the parts that make sense to me. Any pointers or suggestions will be greatly appreciated
  13. Others might have worked. I know that one can use Barba + GSAP and WordPress together as I've met others who have worked with it. I just haven't done myself. Hopefully someone will chime in on the matter is you'll find enough information in the other threads.
  14. ZachSaucier and Dipscom, thanks for feedback. I thought someone could have had the same problem using barba.js, GSAP and wordpress, because I see many sites that use GSAP with page transitions, I will keep searching.
  15. There have, however, been other discussions here about using Barba in the past, maybe if you search around you'll find something that might be of use? https://greensock.com/forums/search/?page=1&q=barba
  16. Hey clickdeproduto, your site looks nice! That's quite a broad statement. The issue with page transitions in WordPress using something like Barba is that Barba assumes that you have all of the HTML of the next page already. So since WordPress doesn't have set .html pages, I can see it being difficult if not impossible to use something like Barba to transition between pages in WordPress. Maybe there's a WordPress plugin that can help with full page transitions similar to Barba? I don't know ?‍♂️ In any case, this is a bit unrelated to GreenSock so I don't know how much help you'll be able to receive on this forum.
  17. If you're talking about the full screen transitions when you click links, this looks like a worpress site thas is using animation to load new page content, may be using barba.js or they may have created their own ajax loader, either way as Jack said this type of whole site construction advice would be beyond the scope of this forum. if you search barba.js you'll find several posts that discuss it on the forum. That being said anyone who wants to take it on are welcome to jump in... Happy tweening!
  18. So i'm having trouble getting an SVG to draw when the index.html is first reached. The problem only seems to be on chrome for mac, the animation works fine on any other browser and loads on page load as intended. The SVG will also start to draw as soon as the page is refreshed, just not on the first load automatically. I am using barbajs for smooth internal page navigation and have included all my tweens in the relevant page 'onEnter' function, i guess this is why its working on the other browsers. var Indexpage = Barba.BaseView.extend({ namespace: 'indexpage', onEnter: function() { var drawlogo = new TimelineMax(); // TweenMax.from("main.home",8,{autoAlpha:0}); TweenMax.to("main.home", 1, {autoAlpha:1, ease: Expo.easeOut, force3D:true}); TweenMax.from(".logotop",2,{autoAlpha:0}); TweenMax.from(".frontlogo1,.frontlogo2",5,{drawSVG:0}); TweenMax.to("main.home",1,{autoAlpha:0,delay:5}); TweenMax.to(".logotop",1,{autoAlpha:0,delay:5}); TweenMax.to(".frontlogo1,.frontlogo2",1,{autoAlpha:0,delay:5}); TweenMax.from(".logoblue",2,{autoAlpha:1,x:-220,ease: Expo.easeOut,delay:4.8}); TweenMax.from(".burger",1,{autoAlpha:1,x:100,ease: Expo.easeOut,delay:4.6}); TweenMax.to("#intro",3,{autoAlpha:1,ease:Expo.easeOut,delay:5.8}); TweenMax.to("#sectionone",3,{autoAlpha:1,ease:Expo.easeOut,delay:6}); TweenMax.to("#sectiontwo",3,{autoAlpha:1,ease:Expo.easeOut,delay:6.2}); TweenMax.to("#sectionthree",3,{autoAlpha:1,ease:Expo.easeOut,delay:6.4}); TweenMax.to("#contactus",3,{autoAlpha:1,ease:Expo.easeOut,delay:6.6}); console.log("enter"); }, onEnterCompleted: function() { // TweenMax.to("main.home", 1, {autoAlpha:1, ease: Expo.easeOut, force3D:true}); // TweenMax.to(".title-container *", 1, {autoAlpha:1, ease: Expo.easeOut, force3D:true}, 0.1); }, onLeave: function() { }, onLeaveCompleted: function() { // The Container has just been removed from the DOM. } }); // Don't forget to init the view! Indexpage.init(); Ive tried adding the tweens to barbas default fade in function but as expected, doesn't effect anything. Maybe i'm missing something simple?
  19. Hi! Not sure if I should ask here on on Barba JS forums, so apologies if this is the wrong place! I'm trying to slightly customise this awesome pen by Blake. I've got it to work how I want but I'm using Barba JS for page transitions. When you click on the box it fills the browser and transitions to the next page. Perfect! On the second page I have these boxes again but when click them the animation no longer works. Is there any way to reset it when you hit the new page. Thanks
  20. Yup, it doesn't work. I tried using clearProps like this below. Paused tweens doesn't reinit. Barba.Dispatcher.on('transitionCompleted', function(currentStatus, prevStatus) { for (var i = 0; i < element.length; i++) { element[i].anim = TweenLite.to(element[i], {clearProps:"all"}); } });
  21. @GreenSock Thank you for the response. Yup totally understand that! I sucked it up & spent the last 40 mins getting it down to... well... still a lot of code but I've noted the problem area on lines 76 - 120. The previous code is needed for the menu to open (needed to show you the problem) and the code after is just to init barba (also needed to show you in context) Sorry for the jumble but it's the best I can do lol. Maybe you can make something of it? Cheers, Will https://codepen.io/wsdesign/project/editor/XveMOR
  22. We must be both working on a very similar site judging from your last post & now this one haha. Anyway, It's a complex topic often using barba.js & other libraries to do AJAX transitions for fluidity. I'm working on a project tiles to project page transition for a personal project using barba & gsap. I'm happy to inbox you that when I'm done & see what you can extract from it. That being said... I've learned a lot from the following sources: To start you off getBoundingClientRect is your friend & helps if you want to do something like this (half page transition). This next example is probably what you need (not using gsap though). You can easily convert over & use timelines etc with it. Here is one using Vue & GSAP together Here is React & GSAP And finally, this one is mostly css but I've included it anyway incase you want to learn from it. Hope that all helps!
  23. Rodrigo

    circle rotation

    Ok so I spotted a few things that really don't add up in your code. To begin you have this: var loader = $(".preloader"), tl = new TimelineMax(loader); tl .to( '.loader_rotate' , 3, { rotation: 360, ease: Power0.easeNone, repeat: -1 }) .to(loader, 0.5, {zIndex:"-10", opacity: 0}) t1.stop(); A timeline constructor accepts a configuration object and while a jQuery selector returns an object, is not really the type of object the constructor is expecting. Then you have chained the to() methods and then you add t1.stop(). First t1 is not defined so I'll assume that it refers to tl. This is exactly a good use for the config object I was talking before, if you want the timeline to stay put until a specific point in your code or perhaps an event, in this case most likely a page transition: var loader = $(".preloader"), tl = new TimelineMax(); tl .to( '.loader_rotate' , 3, { rotation: 360, ease: Power0.easeNone, repeat: -1 }) .to(loader, 0.5, {zIndex:"-10", opacity: 0}); Then you have some jQuery transitions there in the barba configuration. IMO if you're already using GSAP no need for that there. Also you create a different timeline in this part of your code: Barba.Pjax.getTransition = function() { $(".preloader").removeAttr("style"); var loader = $(".preloader"), tl = new TimelineMax(loader); tl.to( '.loader_rotate' , 3, { rotation: 360, ease: Power0.easeNone, repeat: -1 }) .to(loader, 0.5, {zIndex:"-10", opacity: 0}); return FadeTransition; }; Again there are a few issues here, you're removing the style attr in the DOM node you're animating. If you want to remove all the styles applied by GSAP use clear props. Then you're creating a brand new timeline, identical to the one you already created, you should re-use that. Finally if you want to stop the animation after the the fade out part of the code, that is the tween that sets the opacity to 0 you can use a .call() method to stop the animation: var loader = $(".preloader"), tl = new TimelineMax(); // no need for configuration here tl .to( '.loader_rotate' , 3, { rotation: 360, ease: Power0.easeNone, repeat: -1 }) .to(loader, 0.5, {zIndex:"-10", opacity: 0}) .call(function(){ tl.stop(); }); And when you want to start the timeline again just call tl.restart() and that should do it, like that there's no need for two different timelines here. Happy Tweening!!
  24. rakan

    circle rotation

    @Shaun Gorneau @Rodrigo Thanks.. But how can I stop rotation after loading the page? Also I'm using barba.js to transit between pages so when I go to the next page, the animation doesn't work. Why it doesn't work as when I refresh the page? https://codepen.io/rakan49/pen/OdwMVY
  25. I have been using BarbaJs on some recent projects, and I have been through this same challenge. The solution I found to redefine the elements for the initial states is to use the BarbaJs Views system (see how it works at this link). Then when rendering the new Container you can use the ClearProps or TweenMax.set or TweenMax.fromto, in the event: let Homepage = Barba.BaseView.extend({ namespace: 'homepage', onEnterCompleted: function() { TweenMax.fromTo($el, time, {stateInitial},{stateTarget}) } }); Homepage.init(); I hope this helps you. Any questions just ask.