Search the Community
Showing results for 'barba'.
-
Search for threads related to Barba.js and GSAP like this one:
- 3 replies
-
- 2
-
-
-
- animate
- transitions
- (and 2 more)
-
@bootstrap007 Have a look at this post and linked thread example as reference (no need to bump either thread with comments by the way :--) You won't able to use Barba on Codepen like that. You need to have a Pro account and create a Project instead, or do it live on your own server. -
How to start animating a div exactly same position from previous page?
bootstrap007 replied to bootstrap007's topic in GSAP
Hi ZachSaucier Thanks for your time & support. I know about barba.js and the page transitions effects. You first need a way of keeping track of the position of the clicked on element. You could do that in various ways, but likely the best is to use some sort of data representation of the position state. -- Do you have any example for this please? My question was - If you click a portfolio item from the CENTER of the page then on the NEXT PAGE that item is animating exactly from the center of the screen/page( triggering the position value from the previous page) OR if you click a portfolio item from the left side of the page then on the next page it is starting the animation exactly from that left postion (same as in the previous page). This can be done in Gsap or with the help of Jquery only? Thanks Zack -
You can give Barba.js a try that works with simple HTML templates if you don't want to learn new framework, though at some point you will have to. Check the following thread that discusses Barba.js.
-
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.
-
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.
-
Looks like there is already a solution for integrating with wordpress. Now I'm really stoked about barba this could allow me to combine pretty much everything I use in website. https://www.npmjs.com/package/wp-barba-page-preloader
-
@akapowl thanks for the feedback, that makes sense! @ZachSaucier thanks for the help again! Time to dig deeper in both Barba and GSAP now.
-
@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.
-
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!
-
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.
-
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"); } }); } }
-
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
-
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.
-
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()) } } ] })
-
Can you please explain how did you fix it? I am using GSAP v2 with Barba js v2 and ScrollMagic
-
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.
-
Help - Page Transitions (GSAP + barba.js + wordpress)
Dipscom replied to clickdeproduto's topic in GSAP
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. -
Help - Page Transitions (GSAP + barba.js + wordpress)
clickdeproduto replied to clickdeproduto's topic in GSAP
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. -
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?
-
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"}); } });
-
@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
-
@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
-
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.
-
You can have either one or another. What you can do though is check referrer on your server side and decide which class to add, if it is your site then don't show loader if it is external url then show loader. If you don't want to mess with server-side then look into barba js http://barbajs.org/
