Jump to content
GreenSock

Search the Community

Showing results for 'barba'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  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!
  2. Would React users need Barba.js though when they can instead use React Router ? https://www.google.com/search?q=react+gsap+page+transitions
  3. Hey Vinu and welcome to the GreenSock forums. To do that sort of transition you will need to use the FLIP animation technique along with something that transitions between your page's content (like Barba.js). GSAP has a handy FLIP helper function to help with it. I am actually creating a tutorial on doing this effect right now. If you can hold out a week or so it should be on our learning section. You can follow it to receive updates
  4. Hi, Can someone help please!!!! I am currently having an issue with Barba + GSAP on page transition. It work fine on the first page, when clicking on different link the scrollTrigger doesn't work... it load the animation before scrolling to the viewport. I've tried to Reset & Kill -> contentTl.kill(true) but it didn't work. Thank you. That's the link for codepen -> https://codepen.io/william_bella/project/editor/AxLLKq
  5. 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!!
  6. Thank you. I received an answer on Barba github, there is an option to prevent clicks during the transition preventRunning. Somehow it solves my problem! I wouldn't know how to make a Codepen demo, it's a fiddly setup in Wordpress.
  7. Hi @ZachSaucier , nope I'm not using the markers but the markers are indicating from what i gather anyway where the animation starts so getting them in the right position is key and then turn them off . So I was just using them as a guide really , oh hahahah I found a workaround so but I'll try that either if I run into this very problem again hahaha . No I completely understand the honus is not on you as that is not your problem really , if i ever run into Barba problem again , do you have any forums I could use ? Thanks a million for your help over last few days , think I'll just about be able to launch it in large part thanks to you . Youre a sound man , see ya again i imagine lol 👌😂 Cheers Adam
  8. Well I tried to add a timeout but it didn't change anything... even with a giant timeout, nothing happens... As you can see markers are appearing on top of page even if i put like 10 sec timeout : Sorry to bother you with my barba.js problems....
  9. I just answered another question about Barba.js: The main issue there was that the content had not been fully loaded before recreating the ScrollTrigger. Adding a simple setTimeout for the function that created the ScrollTrigger fixed the issue. Please try doing the same thing in your project
  10. Okay , thank you sm @mdelp, I followed all the steps you suggested and the website is running a lot smoother now. Followed all those cutting down on code steps and cut down my JS code into one file called main.js as suggested by you and @Yannis Yannakopoulos. This works a lot better than multiple JS files , so thank you . I've fixed my actual problem it was Barba acting up so just had to reclare variables on a beforeEnter hook to the next container . Now I'm just having a minor issue with pinning and using horizontal scrollTrigger . My aim is to scroll until the .factsContainer , create a timeline like i've done before , then have the heading fade in and then scroll little more and pin the .factsContainer_sm container containing the facts , then create a smooth snapping horizontal scroll for the offsetWidth of that container , then unpin and continue . I have created a codepen of what I want and copied the code directly into my actual website as is and it's not working as desired , just wondering could anyone help me please. main.js const scroll_facts_tl_func = () => { let scroll_tl = gsap.timeline({ scrollTrigger: { trigger: '.factsContainer', start: "top center", // pin: true, scrub: true, end: "+=300", // markers: true, } }), facts = [...document.querySelectorAll('.fact')] scroll_tl.to('.factsContainer h2', { scale: 1.5, duration: 1, ease: "slow" }) gsap.to(facts, { xPercent: -85 * (facts.length - 1), scrollTrigger: { trigger: ".factsContainer_sm", start: "center center", end: `+=${factsContainer_sm.offsetWidth}`, // 414 pin: true, pinSpacing:false, markers: true, scrub: 1, snap: 1 / (facts.length - 1), // // base vertical scrolling on how wide the container is so it feels more natural. // end: `+=${factsContainer_sm.offsetWidth}` } }); } Codepen - https://codepen.io/Adamoc/pen/RwrgyRv Website - https://adamoceallaigh.netlify.app/about.html but to get extent of what i'm working with you have to go https://adamoceallaigh.netlify.app/index.html and click 'About' Cheers Adam
  11. Like this: let viewBox = "", heading_Pos = [0, 0], displayState = "" hamburger_display_button = Array.from($('.mobile_nav_sticky'))[0] opened_nav_buttons = document.querySelector('.options') logo = $(".Actual_Logo_Svg"); // Morphing Circles and ellipses to paths to be able to morph them and checking the viewbox for device size MorphSVGPlugin.convertToPath("ellipse"); shapes = Array.from($('.Logo_In_Shapes path')) const init = () => { viewBox = "", heading_Pos = [0, 0], displayState = "" hamburger_display_button = Array.from($('.mobile_nav_sticky'))[0] opened_nav_buttons = document.querySelector('.options') logo = $(".Actual_Logo_Svg"); // Morphing Circles and ellipses to paths to be able to morph them and checking the viewbox for device size MorphSVGPlugin.convertToPath("ellipse"); shapes = Array.from($('.Logo_In_Shapes path')) } barba.hooks.afterEnter(() => { logo_tl_func() init() hamburger_display_button.onclick = () => { opened_nav_buttons.classList.toggle('open') }; }); ??
  12. I may be completely wrong (someone correct me) but does Barba.js work correctly in regular Codepens I can't recall seeing it? Try instead using a Codepen Project that will work better for this sort of thing. I believe that is the issue you are encountering and nothing related to GSAP itself.
  13. Hey Sanjana and welcome to the GreenSock forums! This sort of thing likely is more complicated than what you think. Optimally you wouldn't even need a loading screen, you could just fade out the previous page's content and transition in the new content. But if you do need a loading screen, you likely want to use something like Barba.js to help you detect when the new content is loaded. With that being said, if you don't want to wait for the entire timelines to reverse you can move the playhead to the beginning immediately instead. A good way to do that is to use .pause(0). https://codepen.io/GreenSock/pen/zYrrGJX?editors=0010 Some side notes: You had some pointless .delays that I removed. It's best to use the position parameter instead of delay when you're using timelines. It's good to use functions to make your code more DRY (don't repeat yourself). I write more about doing that in my article on animating efficiently. In GSAP 3 we recommend that you put the duration in the vars parameter so that you can use defaults. You don't need yoyo: true on all of your timelines.
  14. Thanks a lot @Yannis Yannakopoulos. Your answer really helps as it confirms my assumption. I have now found the events the theme dispatches before and after the transitions (it's not barba js but gsap they're using btw) and I'm listening for transitionOutStart (here I want to kill ScrollTrigger and transitionsDone (here I'll have to initialize ScrollTrigger if used on that page). But I don't really know on how to use ScrollTrigger.kill() as it's not orking as expected. This is how I init ScrollTrigger: gsap.registerPlugin(ScrollTrigger); let tl = []; let projects = ['omrfestival', 'mini', 'porsche', 'boa', 'dinnerberlin']; for (i = 0; i < projects.length; i++) { let tl = gsap.timeline({ scrollTrigger: { trigger: ".portfolio--" + projects[i], start: "top 70%", end: "top 55%", } }); tl.addLabel("animateTitle") .fromTo(".portfolio--"+projects[i]+" .portfolio__heading", {opacity: 0, x: -50}, {opacity: 1, x: 0, duration: 0.8}) .addLabel("animatePlane") .fromTo(".portfolio--"+projects[i]+" .portfolio-img__plane", {opacity: 0, scaleX: 0, transformOrigin:'0% 0%', ease: "expo. out"}, {opacity: 1, scaleX: 1, duration: 0.5}, "-=0.3") .addLabel("animateImage") .fromTo(".portfolio--"+projects[i]+" .portfolio-img__image", {opacity: 0, x: -10}, {opacity: 1, x: 0, duration: 0.6}, "-=0.2") .addLabel("animateDesc") .fromTo(".portfolio--"+projects[i]+" .portfolio__desc", {opacity: 0, x: -10}, {opacity: 1, x: 0, duration: 0.6}, "-=0.2") .addLabel("animateCTA") .fromTo(".portfolio--"+projects[i]+" .portfolio__cta", {opacity: 0, x: -10}, {opacity: 1, x: 0, duration: 0.6}, "-=0.2"); } And here's the eventListener (function($) { function exitPage() { console.log("sempliceTransitionOutStart"); if (tl !== undefined) { tl.kill(); console.log("kill ScrollTrigger"); } } function transitionsDone() { console.log("sempliceTransitionsDone"); } window.addEventListener("sempliceTransitionOutStart", exitPage ); window.addEventListener("sempliceTransitionsDone", transitionsDone ); })(jQuery); In the console it show me that the kill section is beeing called but it doesn't destroy it as expected. I've tried both: tl.kill() and ScrollTrigger.kill(). None of them is working. What am I doing wrong? Thanks so much for the help! PS: I know that the code above can be optimized. I'm just strating to get into JS. I think utils.toArray() is what I'll have to look into next, right?
  15. CodePen projects aren't very forkable... So here's untested code function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } function pageTransition() { var tl = gsap.timeline(); tl.fromTo(".loading-screen", {width: 0, left: 0}, { duration: 1, width: "100%", left: "100%", ease: "expo.inOut", delay: 0.3, }); tl.to("#svg-1", { duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2, }); tl.to(".loading-screen", { duration: 1, width: "100%", left: "100%", ease: "expo.inOut", delay: 0.3, }); tl.set(".loading-screen", { left: "-100%", }); tl.set("#svg-1", { opacity: 1, y: 0 }); } function contentAnimation() { var tl = gsap.timeline(); tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 }); } $(function () { barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); pageTransition(); await delay(2000); done(); }, async enter(data) { contentAnimation(); }, async once(data) { contentAnimation(); }, }, ], }); }); I don't know if you can change the cursor with only JS... You can just set it in CSS: .loading-screen { cursor: progress; }
  16. Thanks @ZachSaucier, fantastic. Could you show what I should change in this snippet and also how to not mixing ease formatting? function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } function pageTransition() { var tl = gsap.timeline(); tl.to(".loading-screen", { duration: 1, width: "100%", left: "0%", ease: "Expo.easeInOut", }); tl.to("#svg-1", { duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2, }); tl.to(".loading-screen", { duration: 1, width: "100%", left: "100%", ease: "Expo.easeInOut", delay: 0.3, }); tl.set(".loading-screen", { left: "-100%", }); tl.set("#svg-1", { opacity: 1, y: 0 }); } function contentAnimation() { var tl = gsap.timeline(); tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 }); } $(function () { barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); pageTransition(); await delay(2000); done(); }, async enter(data) { contentAnimation(); }, async once(data) { contentAnimation(); }, }, ], }); }); Would be very helpful
  17. Search for threads related to Barba.js and GSAP like this one:
  18. @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.
  19. 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
  20. Hi this is my website http://gallarii.appycodes.com/portfolio I wan to built the effect like this example site: https://antoni.de/cases/ When user clicks on the thumb image the image must scale to full page and then load new page can you give me hint how to proceed. My js file : http://gallarii.appycodes.com/wp-content/themes/generatepress/bbc-working.js?ver=4.9.8 var PortFolioTransition = Barba.BaseTransition.extend({ start: function() { this.originalThumb = lastElementClicked; Promise .all([this.newContainerLoading, this.enlargeThumb()]) .then(this.showNewPage.bind(this)); }, enlargeThumb: function() { var deferred = Barba.Utils.deferred(); var thumbPosition = this.originalThumb.getBoundingClientRect(); // this.cloneThumb = this.originalThumb.cloneNode(true); // this.cloneThumb.style.position = 'absolute'; // this.cloneThumb.style.top = thumbPosition.top + 'px'; // this.oldContainer.appendChild(this.cloneThumb); var image = $(this.originalThumb).find("img"); var tl = new TimelineLite({onComplete:deferred.resolve()}); tl .timeScale(0.2) .set(image , { autoAlpha: 1, "z-index":"9999999" }) .fromTo(image,1, { scale: 1, }, { scale:5, top:0 }) return deferred.promise; }, showNewPage: function() { var TTLite = new TimelineLite({ onCompleteScope: this, onComplete: function() { this.done() , afterDomReloaded() } }); TTLite.set([this.oldContainer, this.newContainer], { position: "absolute", top: 0, left: 0, width: "100%" }).set(this.oldContainer, { autoAlpha: 0 }).set(this.newContainer, { autoAlpha: 1 }).set(this.newContainer, { clearProps: "position, top, left, width" }) } }); Please help me if , Thanks or give me some info how to start
  21. 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.
  22. 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.
  23. @akapowl thanks for the feedback, that makes sense! @ZachSaucier thanks for the help again! Time to dig deeper in both Barba and GSAP now.
  24. @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.
  25. 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!
×