Jump to content

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. 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?
  2. 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!
  3. sorry. I mean they are not deleted in html if you look in devtool. I've tried all the barba hooks but the triggers remain. that's why I created triggers separately from animation. they are so removed, but not created and there is no control over the animation. anyway, thank you very much for trying to help me.
  4. 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().
  5. Hey @pietM That's actually hard to tell without seeing the full code, as Zach already mentioned - in your codepen demo you don't have any killing/destroying going on. Have you tried a method similar to what is described in this thread (which is for barba - but I guess the core concept would apply for swup, too) ? I don't think a simple re-initiation as you described in your original post will be enough, you will also have to make sure to kill the old ScrollTriggers - and it would probably also be best to destroy the old locomotive-scroll instance before creating a new one. I'll also link to the recently added section in the most common ScrollTrigger mistakes article, so any future readers who stumble upon this and don't know why that is neccessary can get a quick explenation on that.
  6. Hey @Kyle Craven and welcome to the GreenSock forums. No, we haven't been able to get to a more full tutorial with Barba.js yet (though I started work on it a while back). The closest thing currently is the introduction/overview video in the Flip docs. That along with the Flip how-to pens and showcase should get you started. If you have a specific question please ask! It'd probably be best to start a new thread though
  7. @ZachSaucier are there any tutorials yet on using Flip with Barba.js?
  8. Hey! By far, the BEST GSAP lessons you can get is Bella by @Ihatetomatoes Petr is a great teacher and not only you will learn super GSAP and ScrollTrigger techniques, but you will learn how to properly structure code, how to implement Barba and LOT more. It catapult me to another level. Highly recommended πŸ‘
  9. Please help how i can implement WordPress and Barba do you have any source code I can look at? or learning resources?
  10. Hey, Personally, I don't use jQuerry. I see no reason for it, mostly if not entirely made of syntactic sugar. Using Vue, Nuxt, Tailwind, plain ol' JS (also express, node, mongodb/firebase/sqlite.) Depending on what you need I guess. If I go without vue, I tend to gravitate towards highway.js and barba.js for transitions.
  11. Hello guys, I am developing a sit with different transition and barba js, this error often happens after a page transition, but I can't understand in which part of the code as it doesn't give me any reference to my scripts What could it depend on? ScrollTrigger.js?ver=5.6:605 Uncaught TypeError: Cannot read property 'splice' of undefined at Tween.Se.refresh (ScrollTrigger.js?ver=5.6:605) at _callback (twennmax.js?ver=5.6:10) at _renderZeroDurationTween (twennmax.js?ver=5.6:10) at Tween.render (twennmax.js?ver=5.6:10) at Timeline.render (twennmax.js?ver=5.6:10) at ea (twennmax.js?ver=5.6:10) at updateRoot (twennmax.js?ver=5.6:10) at twennmax.js?ver=5.6:10 at Array.forEach (<anonymous>) at kk (twennmax.js?ver=5.6:10)
  12. 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.
  13. Hi @ZachSaucier, once more many thanks. I really can't put into words how cool GSAP and the forums are. With that in mind I am much more confident to expand my little barba app and integrate a lot more of wonderful GSAP Library. As I said. You really rock.
  14. Hi I am new to GSAP (not great at JavaScript to begin with) Client wants to mimic the scrolling effect (fade-in/fadeout) of sections/pages on https://meiomi.com/. No eCommerce, etc. I am using Oxygen Builder for layout. I have been struggling with getting GSAP and barba.js to work correctly. I am looking for a mentor to look at what I am doing and show me what I am doing wrong. I have a few hundred dollars I am willing to split off of what I quoted. The site is to go live Feb 12. Thank you, This is as far as I have gotten: https://codepen.io/RNDL/pen/LYRobjx
  15. Hey super.asdf and welcome. Can you please provide a minimal example in Vue of what you're trying to accomplish? That will make it a lot easier for us to help you with the transition Side note: We will eventually be coming out with a tutorial about doing some basic page transitions with Flip. It will be focused on using libraries like Barba to do so, but perhaps it can also include some basic demos of React and Vue as well.
  16. The second step mentioned gets all active ScrollTriggers and kills every single one of them in the global afterLeave-hook of barba - after leaving a page and thus before creating the new ScrollTriggers. Maybe it works for you without that step, but my advice is to add it if you want to prevent possible future conflicts possibly resulting in performance or logical issues.
  17. Thanks @akapowl It's works fine now. I don't understand 2and step. So I just try 1st step and then directly 3rd step before as you mention. Now I got it How and why I need to kill and re-initiate animation after barba trigger.
  18. Hi Avabrooks, Thanks for the info... I usually don't rely on 'plugins' as they do often cause more problems than good. Luckily, I'm fully able to design and code for WP - I've recently updated a bespoke core theme I built using Bootstrap 4 to now include GSAP + Barba. The gallery that prompted this post was an issue specifically at a client's request and I've now built it. Personally, I hate the result and I'm hoping for him to realize how horrible it is and use the alternatives I've shown him using GSAP.
  19. Hi, I'm new to GSAP and have been playing around with it for a few weeks. So far I love the results and have made/modified slideshows etc (from Codepens etc). I managed to integrate GSAP/Barba into WordPress for page transitions and basic animations so far and I'm hoping to stick with GSAP but my client suddenly decided he doesn't like full page slideshows etc I've made and got an idea he wants something very specific that looks/functions like this: http://www.jquerycarouselimagevideo.com/wordpressplugin/whiteResponsivePerspective.html Personally, I hate the example he's given and it look so out of date (to me) but I need to prove my case by creating something similar first - I found a pen and played around with it but so far I cant figure out how to get an overlap (which he wants) and I've found no GSAP examples even close to this... Any ideas where to start? Thanks
  20. Thanks, Zach I tried using barba, the leave animation worked great, but the enter never worked. Again, I read there are issues with Oxygen builder and tried the remedies i found in those forums, but no good.
  21. That question doesn't make much sense. ScrollTrigger is for scroll-based animations. That's it You can create the effect that you see on the Meiomi site using GSAP + ScrollTrigger without issue but GSAP and ScrollTrigger don't have any built-in functionality to dynamically load new content and replace the current content. You can use a different library (like Barba or Highway) for that part. When the new content loads you can then use GSAP and ScrollTrigger to animate things as you want to. Or you could have all of the content on the same page and just use GSAP and ScrollTrigger to animate it. Does that make sense?
  22. Hi there, I've completed a project with GSAP + Barba.js before. Here it is: https://hyphenco.com Here's another project I did that has many scroll-based animations https://www.overlapassociates.com I can do unconventional animations based on your needs. Please email me about the details to balapa95@gmai.com Looking forward to hearing from you, Bhakti
  23. We are looking for some assistance on an internal site rebrand, with a tight deadline and innovative scroll-triggered animations. Essentially, we would like to work with someone to handle the animation portion of the site which would involve full-screen sections of the site that would animate in when the user scrolls. These animations would be triggered by classes that I can set to sections to indicate whether they are an animated section and then to elements in that section to determine the animation and some parameters. I'm not 100% sure if this is a job for Greensock, or if that would be overkill, but there are some aspects of the animation and transitions we want that are unconventional. We also are looking to have a page-to-page transition which would be a wipe from the content on one page to that of the other. Something like Barba.js may be useful in this regard. I can't post publicly our designs, but please respond here and I can email you the spec docs for the animations, designs, and motion demonstrations. Budget is 2-3k, with flexibility. Deadline is Jan 26, need to start right away.
  24. Hi, this is my first time working with GSAP (and barba.js), and so far its been amazing. I've got some super basic page transitions running, but I'd really appreciate some advice/guidance how to take them to the next step.. I'd really like to be able to recreate something like this websites page transitions, specifically between 'work' and 'contact' https://alitwotimes.com/ It feels like a totally seamless transition, the old content slides out as the new content slides in.. its so nice but I'm pretty lost on how to create anything even remotely similar I believe I can create an easing thats similar here (please correct me if I'm wrong) https://greensock.com/docs/v3/Eases but I'm lost on how to do the rest of the animation, are there any specific docs I should take a look at? I'm kinda confused as to how I can 'learn' or 'improve' my abilities with GSAP.. thanks for looking πŸ˜ƒ below is my current simple & basic page transitions // Function to add and remove the page transition screen function pageTransitionIn() { // GSAP methods can be chained and return directly a promise // but here, a simple tween is enough return gsap // .timeline() // .set(loadingScreen, { transformOrigin: 'bottom left'}) // .to(loadingScreen, { duration: .5, scaleY: 1 }) .to(loadingScreen, { duration: 1, scaleY: 1, transformOrigin: 'bottom left'}) } // Function to add and remove the page transition screen function pageTransitionOut(container) { // GSAP methods can be chained and return directly a promise return gsap .timeline({ delay: 1 }) // More readable to put it here .add('start') // Use a label to sync screen and content animation .to(loadingScreen, { duration: 1, scaleY: 0, skewX: 1, transformOrigin: 'top left', ease: 'slow.out' }, 'start') .call(contentAnimation, [container], 'start') }
  25. Thanks for this. In the end I gave up on Barba. I just couldn't work out how to kill and refresh the scrollTriggers - I could get other js to fire on events but GSAP didn't work for me. I switched over to Swup (https://swup.js.org) - this does what I needed it to do, and I can get scroll trigger to survive the transitions in a predictable way. If you're interested here is the working JS (assuming gsap and swup are already loaded): /*SCROLL TRIGGER*/ gsap.registerPlugin(ScrollTrigger); function boxRoll(){ const boxes = gsap.utils.toArray('.box'); boxes.forEach(box => { gsap.from(box, { scrollTrigger: { trigger: box, toggleActions: "restart pause resume pause", start: "top "+scrubStart+"%", end: "top "+scrubEnd+"%", //markers: true, scrub: 0.5, id: 'boxRoll', }, rotate: 360, x: '50vw', }) }); } function tileFade(){ const tiles = gsap.utils.toArray('.tile'); tiles.forEach(tile => { gsap.from(tile, { scrollTrigger: { id: 'tileFade', trigger: tile, toggleActions: "restart pause resume pause", start: "top 100%", end: "top 75%", scrub: 0.5, //markers: true, //stagger: 1, }, opacity: 0, scale: "random(0.5, 0)", }) }); } /*Swup*/ const swup = new Swup({ //plugins: [new SwupHeadPlugin(), new SwupBodyClassPlugin()] }); swup.on('contentReplaced', function () { window.scrollTo(0, 0); /*GSAP */ boxRoll(); tileFade(); }); /*Seems to work better if these are called after swup*/ boxRoll(); tileFade();