Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

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. I can not really give you any advice on that without seeing it in context, I'm afraid. There are just too many possible reasons why it doesn't work as you'd expect. It might be just another logic problem that you'd have to find a solution for within the context of barba (which would be my best guess here), like having to kill all your ScrollTriggers when leaving a page and re-initializing the page-specific ScrollTriggers when entering a new page. You'll find a link collection to different threads on that one in this thread here. It might just as well be something totally different, though. This thread here might also be helpful, as it links to another code example of GSAP together with Barba and to @ihatetomatoes' learning ressources. He also offers awesome courses on GSAP with Barba, the latest of them also with ScrollTrigger incorporated, if I am not mistaken. These forums actually try to stay focussed on GSAP specific questions, but if none of those ressources linked to does help you find a solution, I could take a peek at your code, if you'd update your codepen project (or even better create a minimal new one so the context of the previous questions remains intact) and I find the time.
  2. @akapowl thank you very much - I would have never figured that out on my own. Plus I have not seen any other examples setup this way anywhere. I feel like I have seen these types of pages transitions using GSAP & Barba. This has solved my initial issue and your explanation makes sense. I am just not 100% sure I understand the pattern, but again not a JS expert at all. I got these changes added to a more complex framework and got the base page transitions working. Based on this page type is leaves & enters how i want - and set it for 2 different pages types! Now, I am running into other issues where I need to reset GSAP arrays... So within the individual page enter function, we are animating other elements after the page loads and when the user scrolls down the page - we have images staggering/animating in with a parallax effect. Any thoughts on how to reset these too? using your (el) to reset the elements within these functions. So these work on the initial page load, but not when you go to next container with the same namespace these arrays are not starting from scratch. example of one of the arrays - how would I reset something like this? sap.utils.toArray('.section-parallax .parallax-content').forEach((section, i) => { const heightDiff = section.offsetHeight - section.parentElement.offsetHeight; gsap.fromTo(section, { y: -heightDiff }, { scrollTrigger: { id: 'collectionParallax', trigger: section.parentElement, scrub: true }, y: 90, ease: "none" }); }); Is my issue a combination of GSAP & Barba ? Or strictly a Barba issue? Or is it how I am structuring my JS? I guess I was naïve to think that I could just reset everything back to the initial starting point when the next container loads. Let me know if you if you have any thoughts or other examples we can take a look at. Thank you for the help. Made it over a big hurdle! No on to the next one!
  3. Hey @digitalfunction My initial response was totally heading in the wrong direction, so I hope this time I got your problem right. If so, it is a barba related logic problem, that I myself actually stumpled upon in a bit different way and that one of my first questions here was about, so I'll try to help you out here. The reason the individual elements do not animate in anymore on page-change is because in your JS you only get the elements once on page load. Since the elements that are being stored in those variables will get wiped by barba on page-change, there will be no more reference to any elements anymore that you could animate in. So on every page-change you'll have to get the neccessary elements from scratch, as they will change every time. I did that inside each of the functions you are calling here for the animations, and it seems to work just as I'd expect. Is that what you were going for? https://codepen.io/akapowl/project/editor/d04bbd7aa2fcc207f1ab0b363835fab2
  4. Here is the link to the codepen project files - https://codepen.io/jeff-stark/project/editor/XLQNOO Again the demo is static, but the site I am working on is dynamic so the different page types will have different animations - so if you navigate from one subpage to another subpage (namespace = the same name) everything should reset or recalculate so the animations start all over from scratch. Same concept for portfolio page types to the next portfolio page type. I am not sure if my issue is with gsap3 or barba. I am basically trying to reset/refresh/recalculate all the animations to start from scratch when you go back and forth between the 2 pages. When the page initially loads and leaves all the animation trigger - main container. black background, the page title, then the content. It all animates out as I want it, but the next container only animates the main container and everything beyond that does not. I have tried everything - kill, restart, to, from, fromTo etc... I can get the main container within the barba wrapper to animate between the pages, but data-barba="container" data-barba-namespace="subpage" does not reset. Once it goes to the next page/container the timeline inline styles are removed from the data-barba-namspace="subpage" containers so it does not animate. Not sure why this is happening. GSAP - Again, I have tried just about everything - I am novice to JavaScript so having a hard time figuring this out. Barba - tried "views", different transition namespaces, all the different hooks - just not sure where to put the kill or reset or whatever I am missing to make it reset all the timeline values on the next container. I am hoping someone can help. PLEASE and thank you for your time. Let me know what else you need.
  5. Hi everyone, I'm trying to implement some simple scrollTriggered timelines to a project that's using Barba.js for page transitions and locomotive scroll (with [data-scroll-container] as the ScrollTrigger Proxy). I've managed to get it working on first page load however after transitioning to another page the same timelines appear very janky. If you check teh codepen demo you'll see that images scale smoothly on the index but not the about page. I've tried killing all ScrollTrigger instances with Barbas beforeEnter hook but I think I must be doing something wrong when re-initializing locomotive scroll. If anybody has any experience in using these libraries together and has any advice that would be great! Many thanks https://codepen.io/mulegoat/project/editor/XvJVNP
  6. When working with GSAP and Barba I've found the best approach is to wrap your gsap timelines in functions and call them on barba transitions/views. You tried that? Something like: function pageTransition() { // your splittext / other onload stuff } Then: barba.init({ // barba configurations here transitions: [{ // or 'views' depending on your use case async enter(data) { pageTransition() console.log('Transitions: Enter'); }, }] }); // barba.init
  7. Hi there @vladdesign, It's hard to debug without a look at the barba.js issue but it sounds like it's down to how barba.js is replacing/loading the DOM This thread has links to a few previous forum posts that may prove useful - Good luck with your project - I hope this helps.
  8. https://repl.it/join/wxtqbzvv-eest Hi there. I've run into some trouble implementing Barba JS. The prototype I am working on incorporates BarbaJS for page transitions and Isotope for gallery filtering (which isn't relevant for this query). In the prototype, if you click on 'project' the page transitions from 'home' to 'project' with a swipe. The functionality I would like to implement is that when you close that green project page it swipes the green away to reveal the home page (basically the reverse of the entry tranistion). At the moment, the function to animate that swipe is initiated but the transition doesn't actually occur - the green page just closes. The approach I have taken is to use BarbaJS Rules to designate particular functions on certain events. Any help or comments are greatly appreciated. Of course if a response to another post addresses my query please feel free to point me there. Thanks again.
  9. I'm having a problem and i'm unsure as to whether it's either with Barba or Gsap ScrollTrigger itself I have no clue . So in my website , when I go from the homepage to the about page everything works as normal except the horizontal scroll part that I have put in (Facts Section) , thing is I do this very same action on mobile and it works perfectly sometimes and then other times it does the same as it does with the Desktop Version , so it's either my code and the way I have implemented the horizontal scroll but thing is when I go directly to the page as in not through the homepage and just initiate all the functions in about.js independently , everything including the horizontal scroll works as desired and perfectly , so I don't know which is causing the problem , could ye have a look maybe ?? So here is my homepage.js (Barba Init code) //Variable Declarations and Function Definitions 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 homeInit = () => { 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 logo_tl_func = () => { let logo_tl = gsap.timeline({ onComplete: moveLogo, }) // Morphing into the Logo logo_tl.from(shapes, 1, { y: -600, autoAlpha: 0, ease: "bounce", stagger: 0.15 }) logo_tl.to(shapes, 1, { fill: '#F0C368', stagger: 0.05 }) let firstAnimation = gsap.to('.shapes', { duration: 2, morphSVG: ".Logo_Proper_Background" }); let secondAnimation = gsap.to('.textShape', { duration: 2, fill: '#1D373F', morphSVG: ".Logo_Proper_Text" }); logo_tl.add([firstAnimation, secondAnimation]) } const changeViewBox = media_query => { media_query.matches ? viewBox = "-150 -180 2495 890" : viewBox = "-150 -350 3574 880" media_query.matches ? heading_Pos = [-511, -15] : heading_Pos = [-1540, 40]; media_query.matches ? displayState = "none" : displayState = "block" } const moveLogo = () => { gsap.to(logo, { attr: { viewBox: viewBox }, duration: 3 }) fadeInHeadingAndLinks(); } const fadeInHeadingAndLinks = () => { gsap.to('.nav_links', { display: displayState, scale: 1, duration: 3 }) gsap.to('.logo_heading', { display: "block", x: heading_Pos[0], y: heading_Pos[1], // scale:1, duration: 3 }) gsap.to('.mobile_nav_sticky', { display: "block", scale: 1, duration: 5 }, "+=.7") } const pageTransition = () => { var tl = gsap.timeline(); tl.set('.loading_container img', { scale: 0.3 }) tl.to('.loading_container', { duration: 1.2, width: "100%", left: "0%", ease: "circ.out", }) .to('.loading_container img', { scale: 0.6, duration: 1 }, "-=1.2") .to('.loading_container', { duration: 1.2, width: "0%", right: "0%", ease: "circ.out", }) .to('.loading_container img', { scale: 0.3, duration: 1.2 }, "-=1.3") } // Helper Functions const delay = (ms) => { return new Promise(resolve => setTimeout(resolve, ms)); } // Initialization Methods $(document).ready(() => { window.matchMedia("(max-width: 600px)").matches ? logo.attr('viewBox', '-350 -700 1274 1680') : logo.attr('viewBox', '-680 -380 2074 1080') var viewbox = window.matchMedia("(max-width: 600px)") changeViewBox(viewbox) }) hamburger_display_button.onclick = () => { opened_nav_buttons.classList.toggle('open') } barba.init({ sync: true, transitions: [{ name: 'transition-base', preventRunning: true, timeout: 5000, async leave() { const done = this.async(); pageTransition(); await delay(1000); done(); }, async enter() { window.scrollTo(0, 0); }, }], views: [ { namespace: 'home', afterEnter() { homeInit() window.matchMedia("(max-width: 600px)").matches ? logo.attr('viewBox', '-350 -700 1274 1680') : logo.attr('viewBox', '-680 -380 2074 1080') let viewbox = window.matchMedia("(max-width: 600px)") changeViewBox(viewbox) logo_tl_func(); hamburger_display_button.onclick = () => { opened_nav_buttons.classList.toggle('open') } }, }, { namespace: 'about', afterEnter() { aboutInit() face_tl_func() scroll_p_tl_func() scroll_skills_tl_func() scroll_facts_tl_func() }, } ], }); // //Global Hooks // barba.hooks.leave(() => { // const done = this.async(); // pageTransition(); // await delay(1000); // done(); // }) // barba.hooks.enter(() => { // window.scrollTo(0, 0); // }) and here's my about.js // Variable Declarations and Function Definitions let factsContainer_sm = document.querySelector(".factsContainer_sm") const aboutInit =() => { factsContainer_sm = document.querySelector(".factsContainer_sm") let head = document.getElementsByTagName('head')[0], link = document.createElement('link') link.rel = 'stylesheet' link.href= "../../Resources/CSS/about.css" head.appendChild(link); } const face_tl_func = () => { let face_tl = gsap.timeline(), paths = document.querySelectorAll('.My_Face path'), filledYellowElements = ['.Main_Hair_Part', '.Eyeball_2', '.Eyeball_1', '.Nostril_1', '.Nostril_2', '.Tongue_Part'], filledNavyElements = ['.Pupil_2', '.Pupil_1']; face_tl.set(filledNavyElements, { fill: 'unset' }), face_tl.set(filledYellowElements, { fill: 'unset' }), face_tl.fromTo(paths, { drawSVG: "0%" }, { duration: 1, drawSVG: "100% ", stagger: 0.15 }) let firstAnimation = gsap.to(filledYellowElements, { duration: 2, ease: "slow", fill: '#F0C368' }, "-=.7"), secondAnimation = gsap.to(filledNavyElements, { duration: 2, ease: "bounce", fill: '#1D373F' }, "-=.7") face_tl.add([firstAnimation, secondAnimation]) } const scroll_p_tl_func = () => { let scroll_tl = gsap.timeline({ scrollTrigger: { trigger: '.content', start: "top center", end: "+=1000", markers: true, scrub: true // pin: true } }) scroll_tl.to('.first', { transform: "rotateX(50deg) rotateZ(331deg) translateX(42px)", duration: .5, }), scroll_tl.to('.flag', { scale: 1 }, '-=.1'), scroll_tl.addLabel("first_down") scroll_tl.to('.second', { transform: "rotateX(50deg) rotateZ(331deg) translateX(42px)", duration: 2, }, "first_down-=.1") scroll_tl.addLabel("second_down") scroll_tl.to('.third', { transform: "rotateX(50deg) rotateZ(331deg) translateX(42px)", duration: 2, }, "second_down-=.01") } const scroll_skills_tl_func = () => { let scroll_tl = gsap.timeline({ scrollTrigger: { trigger: '.skillsContainer', start: "top center", markers: true, } }), barWidth = "", bars = [...document.querySelectorAll('.bar')] bars.map(bar => { barWidth = bar.dataset.width; let barAnimation = gsap.to(bar, { width: barWidth, }), percentageAniamtion = gsap.to('.percentage', { scale: 1, }) scroll_tl.add([barAnimation, percentageAniamtion]); }) } 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" }) scroll_tl.to(facts, { xPercent: -85 * (facts.length - 1), scrollTrigger: { trigger: ".factsContainer_sm", start: "center center", 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}` } }); } // //Initialization Methods aboutInit() face_tl_func() scroll_p_tl_func() scroll_skills_tl_func() scroll_facts_tl_func() Here's the website homepage - https://adamoceallaigh.netlify.app/ Here's the about page - https://adamoceallaigh.netlify.app/about.html Appreciate all the help ye can give , if ye can , can ye check both mobile and desktop versions. 🤙 Cheers Adam
  10. Good afternoon. I managed to make a transition animation when clicking on "Back", but when clicking on a link with index.html it is not possible to implement flip. In Slack Barba, only one person answered me, but he says that barba is not very good... But it turns out to make an animation in the cover__div block... P.S.: codesandbox why doesn't it work out the transition here... https://codesandbox.io/s/withered-river-i8cqs?file=/index.html Maybe there is really some option with another plugin for the transition? 😒
  11. I create barba.js page transition whith GSAP animation, barba.js is working but gsap animation is not working, when i change the href path location like href="./html/service.html" to href="service.html" its working fine <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="./html/servics.html">Services</a></li> </ul> </nav>
  12. Hello, I made a simple page transition (block reveal) animation with GSAP and barba.js. The animation works fine, but I have a flickering effect because the new page loads before the "leave" animation is done. I don't know how to fix this ... maybe a JS wizard could help? I attached the file. Thanks, page transition.zip
  13. It might have something to do with the fact that it has redirect to get the latest version, so it will return this. https://unpkg.com/@barba/core@2.9.7/dist/barba.umd.js It might be swapping the instance out in the middle of the transition.
  14. It's really not working all the way. If you change the duration, it won't complete. It should wait 10 seconds before showing the next page. Locally it will work fine. It's just something with codesandbox's environment. 🤷‍♂️ barba.init({ transitions: [ { name: "opacity-transition", leave(data) { return gsap.to(data.current.container, { opacity: 0.2, duration: 10 }); }, enter(data) { return gsap.from(data.next.container, { opacity: 0.8, duration: 10 }); } } ] });
  15. Very interesting, I realized that js barba periodically falls off when it is connected like this: https://unpkg.com/@barba/core But when I saved it and connected it locally as a file barba.umd.js, it stopped falling off
  16. Yes, about him. It's just that if codesandbox couldn't work with barba, then the usual opacity wouldn't work, right?
  17. By the way, this code works, but why doesn't the other option work? barba.init({ transitions: [{ name: 'opacity-transition', leave(data) { return gsap.to(data.current.container, { opacity: 0.2 }); }, enter(data) { return gsap.from(data.next.container, { opacity: 0.8 }); } }] });
  18. I don't know what to tell you. Flip is working as intended. IF you need help with Barba, it would be best to ask questions over on their slack. https://join.slack.com/t/barbajs/shared_invite/enQtNTU3NTAyMjkxMzAyLTkxYWUwZmM1YWQxMmNlYmE0ZjY4NDQxMGUxYjkwYWFlMzEzOWM4OTRhMWRmYTQyYzFlMmQ3OGFmYmI3MWY0OWY If you need finer control over the loading process, perhaps try using a framework with a router, like Vue. https://codepen.io/GreenSock/pen/eYdXZJZ
  19. I have already watched the video, I have practiced doing something from there, taking into account the recommendations of Cassie. And it worked. But here is not a separate working out of flip, namely in the transition. In the gsap topics, I found a description, only according to the old version of barba... I took your example, barba works, but the flip process itself seems to work only at the end, when the page has already opened, there is some flashing of the block on the page. But it does not work during the download process... As in the reference, in it, flip is in the process... https:/ / studio-size. com/ https://prnt.sc/1g61lut - screen Some simple animation of the transition is obtained, but the entire page as a whole, for example, opacity or zoomout, but not a separate block... There is clearly some nuance here that I don't understand and probably just don't know that it exists
  20. Unfortunately, it does not work... Even if I add @id to img in data-flip-id, so that it is different, because img must be different in this data. But it doesn't work out... And on pages like cases.html there should be such a block... There may be a video inside the div.bgimage_block. Therefore, there is a block there. <div class="bgimage_block" style="background-image: url(https://img2.goodfon.ru/original/320x240/1/a1/bow-lake-banff-national-park.jpg); "> </div> Barba work, but without animation..
  21. Codesandbox's server doesn't seem to play nicely with barba. I did this locally, and it seemed to work fine, so it should help you get started. index.js gsap.registerPlugin(Flip); let flipState; barba.init({ transitions: [ { sync: true, beforeLeave(data) { const target = data.current.container.querySelector("[data-flip-id]"); if (target) { flipState = Flip.getState(target); } }, enter(data) { const target = data.next.container.querySelector("[data-flip-id]"); if (target && flipState) { gsap.set(data.current.container, { opacity: 0, position: "absolute" }) return Flip.from(flipState, { targets: target, absolute: true, scale: true }); } } } ] }); index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="styles.css" /> <title>Static Template</title> </head> <body> <div data-barba="wrapper"> <main data-barba="container" data-barba-namespace="home"> <a href="cases.html">Cases</a> <div> <img data-flip-id="img" class="thumbnail" src="https://sun6-22.userapi.com/s/v1/ig2/awq7qUcGZAS-9dsYLrQoqJHwj9fpjNo6pi0DdawtulIcSqr6fqicNesTWXdtTwzynhR9S1oHx8G5gUyZMvOeJ12P.jpg?size=400x0&quality=96&crop=1,136,1077,1077&ava=2" alt="" /> </div> </main> </div> <script src="https://unpkg.com/@barba/core"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js"></script> <script src="index.js"></script> </body> </html> cases.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="styles.css" /> <title>Static Template</title> </head> <body> <div data-barba="wrapper"> <main data-barba="container" data-barba-namespace="cases"> <a href="index.html">Home</a> <div> <img data-flip-id="img" class="bgimage_block" src="https://sun6-22.userapi.com/s/v1/ig2/awq7qUcGZAS-9dsYLrQoqJHwj9fpjNo6pi0DdawtulIcSqr6fqicNesTWXdtTwzynhR9S1oHx8G5gUyZMvOeJ12P.jpg?size=400x0&quality=96&crop=1,136,1077,1077&ava=2" alt="" /> </div> </main> </div> <script src="https://unpkg.com/@barba/core"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js"></script> <script src="index.js"></script> </body> </html> You're probably going to like dynamically adding a data-flip-id attribute on click. myElement.setAttribute("data-flip-id", "img");
  22. I made a project using your link! How to connect barba via beforeLeave/leave with Flip, so that it is like in the given reference in the topic? https://codesandbox.io/s/pedantic-lake-sh77z?file=/index.html:2921-3313 I worked with before in the Fullpage plugin once, but I suffered for three days then... I haven't found an example working on this functionality yet..😟 It feels like I'm missing some theoretical point in the stage, and because of this there is a deadlock...
  23. Then you're loading them dynamically. It's impossible to transition between pages on a hard navigation change because it reloads an entirely new page. Go through their documentation. It shows GSAP usage and even their site uses GSAP. https://barba.js.org/docs/getstarted/basic-transition/ For Flip, you would probably have to save the Flip state to a global variable outside of barba's init, like inside one of the beforeLeave/leave callbacks, and then do the Flip animation in one of the enter or after callbacks. https://barba.js.org/docs/getstarted/lifecycle/
  24. By the way, I was able to connect barba, I thought I read that it is well compatible with gsap, but I can't figure out where to attach the animation yet... And I'm not lucky with examples =_= I found a description here, but with an old version of barba...
  25. I don't have time to look through all your code (in the future, please just post a minimal demo, not your whole site) but my guess is that your 2nd one is relying on elements/assets that haven't fully loaded or something like that. I'm not familiar with Barba.js but you probably need to wait for some kind of lifecycle event that basically says "okay, I'm done altering the layout of the page." and then you can call ScrollTrigger.refresh() which forces ScrollTrigger to update all its start/end values on the page. Also don't forget to kill() any ScrollTriggers when you leave a page (assuming it's a single page application).
×