Search the Community
Showing results for 'barba'.
-
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. -
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') }
-
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 -
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();
-
Hey blopiblop. I haven't used Swup before but it looks like it does page transitions and has some built in animation support. It looks like you can hook into Swup's events to do your own animations (like GSAP animations) if you want to. So you could do the enter or leave or both animations with GSAP. Or you could use GSAP for all the non-page-transition animations on your page. Or you could use a different tool like Barba which just does the content switching and then hook it up to GSAP for the animation part. Lots of possibilities.
-
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!
-
Thanks. I've looked at this. I realize I still wasn't very clear. It appears that barba.js involves ajax and change of actual page urls. All my html is javascript generated on the SAME page. Basically, a function fills a div tag with the page content. When I run the function again, all the content changes. I need to make the div contents 'transition' from the old content to the new content. I have a div: <div id='divContent'></div> I have another div <div id='divTransition'><div> Both are css position:absolute so they can move. I have a <div id='divBackground'></div> which is the 'anchor' and potential image background of the page. The first transition is to be a fade. Basically, the html in divContent fades out, then the html changes and the div fades back in. I feared that the time it takes to fill the content may be noticeable so if needed I could fill divTransition and then do the fade between the 2 divs. I thought this would be easy. So far, I can't do it. The second transition would be the old content slowly moves to the right & off screen while the new content moves right and onto the screen. I haven't tried that one yet.
-
Thanks for the feedback Zach! I was able to get it working perfectly with GSAP and Barba hooks but ended up using a different approach.
-
Hi all, I'm looking to build a fairly simple slider but lack the knowledge to do so, hope someone can point me in the right direction. I have a slider that contains 3 images, and when the page loads I want one of those images (random) to show. Then I want to bind an event (will be a Barba page transition, but could be a button too), that fades out the current image that is showing and fades in another random image. Everytime the event is triggered, the current slide has to fade out and a random other one has to fade in. Is this possible with gsap?
-
Right @mdelp, this is what I manage to get out of my buddy. fadeOut: function () { var deferred = Barba.Utils.deferred(); TweenLite.to('.site-main', 0.4, { onComplete: function () { deferred.resolve(); } }); return deferred.promise; }, And then: fadeOut: function () { var deferred = Barba.Utils.deferred(); TweenLite.to('.barba-container', 0.4, { onComplete: function () { deferred.resolve(); } }); return deferred.promise; }, Whether it works or is of any help, I have no clue. I offer no warranties or endorse this product. I'm just the messenger.
-
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
-
Hello everyone, thanks guys for gsap and all about it. I use barba + locomotive + gsap on my project, i try to destroy all ScrollTriggers with ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); But i have some errors from ScrollerProxy, and i think my code doesnt destroy all ScrollTriggers, especially scrollerProxy. There my code for scrollerProxy, almost duplicate from docs if (scrollContainer) { window.locoInstance.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { return arguments.length ? window.locoInstance.scrollTo(value, 0, 0) : window.locoInstance.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: scrollContainer.style.transform ? 'transform' : 'fixed', }) } There error Uncaught TypeError: Cannot read property 'scroll' of null at ScrollTrigger.scrollTop [as scroll] at _updateAll Sorry for my english, sorry it's not codepen, and if it's something stupid, i just tired and don't know why and how to fix this, thanks
-
Hi Zach, I have not created any codepen but you can check my demo site here. You can go through the pages from menu to check. http://s784828798.websitehome.co.uk/apnewsite/ I have used Barba js + GSAP + VelocityJS for text animation but not working like i want. I would like the same way on Ouiwill website does. Please let me know if any solution.
-
Unfortunately that example doesn't help much in regards to your transition problem, because it doesn't include barba. You'd probably have to use something like codesandbox or a codepen project to make a working example. When you enter a new page, do you initiate everything again? (Sorry if that question might sound stupid, but maybe you don't and that would explain it not working) Also, I don't know if that actually is or can be source ofproblems, but you are using GSAP v3.3.4 with ScrolTrigger's latest beta. scrollerProxy was only introduced in GSAP 3.4.0. So maybe try updating those files you load to the most recent version and see if it changes anything.
-
Hey @neo420 It's always kind of hard to give any good advice without an example - especially with the combination of barba and other libraries. My guess is, that you will probably have to kill/destroy both, your ScrollTriggers AND locomotive-scroll when leaving a page, and reinitialize both after your transition. So first off, locomotive-scroll gets knwoledge of the new environment it is supposed to be working in, and then your ScrollTriggers get that same information and can also adjust to locomotive-scroll. A good way to kill all your ScrollTriggers is this let triggers = ScrollTrigger.getAll(); triggers.forEach( trigger => { trigger.kill(); }); Locomotive-scroll has a .destroy method of its own. Give it a try and see if it helps. Cheers, Paul
-
Im use barba first time, and i think my scripts failed w/o errors on console, and locomotive doesnt destroy because script failed before destroy, and I get some scrollTrigger errors, and think I need destroy locomotive scroll and scrollerProxy, thank you for help, i'm just confused, but now I found reasons why I get this errors
-
I'm not sure, how i can use barba on codepen, where shoul redirect links, but i don't ask for debug, main question its how i can fully destroy script for scrollerProxy
-
Hi, everyone! I am new to gsap. I am trying to get my scrollTrigger animation to work with gsap. Take a look at my demo: https://codepen.io/Ollymolly/project/editor/AOxzmn I have everything working fine except one. As you will see in the code, I am trying to put a scale animation on the headline. I put it all right, but nothing works. And I got the idea that I didn't connect scrollProxy correctly. Any ideas how to fix it? I have a great barba js with smoothScroll. But somehow scrollTrigger.... does not work with them.
-
Hey jackew and welcome to the GreenSock forums. Given that site uses GSAP for its animation I'd say it's quite doable with GSAP With that being said there are multiple aspects to that transition: A tool like Barba or Swup to transition between pages. A clip-path animation to hide content inside of the container. Translations on all the content in the viewport to animate it in as well. Creating something like this requires building each piece and combining it all together. There's no one plugin that you can throw in there to do it all for you
- 1 reply
-
- 1
-
-
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!
-
thank you so much! yes, i just signed up for your free gsap and barba js course, i am taking it with great pleasure! thank you!
-
Hey GeS. @Ihatetomatoes made some useful articles about GSAP + Barba that you should check out. The core issue here is that you are not recreating/updating the relevant ScrollTrigger and smooth scroll stuff when the new page loads. Unfortunately we don't have the capacity to fix all of the issues for you though. Some pointers related to your tweens though: tl.to(".blue", { // ... left: "-100%", ease: "Expo.easeInOut", }); It's best to use translations instead of left/right/etc. So x: "-100%". But if you have that, it's better to use xPercent. "Expo.easeInOut" is an invalid ease. You're mixing the old and the new syntax. It should just be "expo.inOut". Read more about those and other mistakes in the most common GSAP mistakes article.
-
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!!
-
Zach you totally nailed it! Switched those two statements around and everything works fine. Thank you so much for taking the time to help...I figured this wasn't a Greensock issue but it's sooo hard to not post on here when the support is always so good!! Barba does have a Slack channel but who wants to live like that?!
-
Barba + ScrollTrigger Janky Timeline After Transition
ZachSaucier replied to mulegoat's topic in GSAP
Hey mulegoat. It's hard to debug larger projects like this. I think these statements should be switched in order for one: // Bad initSmoothScroll(data.next.container); scroll.destroy(); // Good scroll.destroy(); initSmoothScroll(data.next.container); I'm also not sure if you need this: // reinit locomotive scroll scroll.init(); Overall questions like these are not really focused on GSAP so we can't spend our time helping out too much. It might be better suited for a site like StackOverflow. If only Barba had a good forum for it...- 3 replies
-
- 2
-
-
- barba.js
- locomotive-scroll
- (and 2 more)
