Search the Community
Showing results for 'barba'.
-
Help - Page Transitions (GSAP + barba.js + wordpress)
mauro33 replied to clickdeproduto's topic in GSAP
Same problem. I am using a plugin called Steroides for Elementor that include Barba.js but I can't get it work. -
For any future readers, I ran into a very similar problem as Adam and was able to solve it with ScrollTrigger’s getAll() and kill() functions. Added to Barba’s afterEnter hook. My ‘cleanGSAP’ function looked like this: const cleanGSAP = () => { let existingScrollTriggers = ScrollTrigger.getAll(); for (let index = 0; index < existingScrollTriggers.length; index++) { const singleTrigger = existingScrollTriggers[index]; singleTrigger.kill(false); } ScrollTrigger.refresh(); window.dispatchEvent(new Event("resize")); };
-
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!
-
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().
-
I read your question a few times but I still don't quite understand what you're asking. We don't support 3rd party tools like Barba.js in these forums typically (I have zero experience with it), but we'd be happy to answer any GSAP-specific questions.
-
I have page transitions with barba.js and a certain element is not always on the page to be animated. So gsap gives a warning that the target is not found. Can I just disable warnings in my production env. Or is there a good way to not let a certain part of the animation timeline play, when the target isn't found?
-
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.
-
I've been using GSAP for a couple of month now and i really really enjoy it! Right now, i'm working on my portfolio using Barba.js for page transitions. I have a little question that might sound weird for a non-beginner but here it is : Let's say i have a long page with a lot of content. How do you animate only the elements that are visible in the viewport when leaving the page ?
-
Hey @Perdixo75 That is really more of a general JS and barba-related question and usually these forums try to stay focussed on things that are directly related to GSAP. What you would have to do before animating is checking for which of the elements that you want to animate are in view currently - for example with a helper function similar to the one explained here That could then look something like this https://codepen.io/akapowl/pen/5d29bd576ad634a694103346560caf3c Of course you would have to tweek it to your liking, because as of now it will only trigger on elements that are completely in view. If you have any other questions directly related to GSAP, we'll be happy to help. Happy tweening. Edit: Of course you could also utilize GSAP's ScrollTrigger to handle the in-view-checking like maybe so https://codepen.io/akapowl/pen/6158772cb43f78df7bc8c2fbcdfa83cf
-
Hi there, I noticed that after going from one page to another the custom mouse starts to lag. At first it's hard to notice but as you load 4 or 5 pages the mouse doesn't flow as smoothly as on the first page load. Am I missing anything that is making the mouse lags? I'm using Barba JS on the site so I'm not sure if I have to kill and restart the mouse function every time I transition between pages? Here's the link to my project: https://codepen.io/rochudo/project/editor/ZgGnON Thanks
-
Hi, guys! I'm relatively new to the GSAP world and this is my first post over here. I'm trying to make something that I feel it's super simple, it would be an effect similar to https://www.marvinschwaibold.com/projects/'s hover effect (image reveal, following the mouse position, background color change) + the transition to its internal page (I'm assuming it involves barba.js, right?) Any tips will be much appreciated!
-
Hi @mrntld Welcome to the forum. We have several threads about follow by mouse. Here's a good one. The background color change should be fairly straightforward. If you're just getting started with GSAP, this is the pace to begin. I'm not sure if they're using barba.js, but that's probably a good guess. Our very own @Ihatetomatoes has a bunch of videos on that topic. If you have any GSAP specific questions as you work on your project, we're happy to help. A demo will give you the best chance at a detailed answer. More info about that. Happy tweening and welcome aboard.
-
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.
-
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.
-
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
-
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
-
@ZachSaucier are there any tutorials yet on using Flip with Barba.js?
-
Help - Page Transitions (GSAP + barba.js + wordpress)
fogseller replied to clickdeproduto's topic in GSAP
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 👍 -
Help - Page Transitions (GSAP + barba.js + wordpress)
alexlytle replied to clickdeproduto's topic in GSAP
Please help how i can implement WordPress and Barba do you have any source code I can look at? or learning resources? -
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.
-
Help - Page Transitions (GSAP + barba.js + wordpress)
Dipscom replied to clickdeproduto's topic in GSAP
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 -
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)
-
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.
- 7 replies
-
- 4
-
-
- barbajs
- garbage collection
- (and 1 more)
-
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
-
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.
