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. If the GSAP timeline is not finished, when I load the next/previous post with Barba, it breaks. This is the problematic transition. Can anyone spot what's wrong here? Thank you { name:"next", leave({ current, next, trigger }) { return new Promise(resolve => { const timeline = gsap.timeline({ onComplete() { current.container.remove() resolve() } }) const image = current.container.querySelectorAll(".photo") timeline .to(image, { opacity: 0 }, 0) }) }, beforeEnter({ current, next, trigger }) { return new Promise(resolve => { const timeline = gsap.timeline({ onComplete() { resolve() } }) const image = next.container.querySelector(".photo img") timeline .to(image, {opacity: 1}, 0) }) }, enter({ current, next, trigger }) { return new Promise(resolve => { const timeline = gsap.timeline({ onComplete() { resolve() } }) const charge = next.container.querySelector("#charge") const years = next.container.querySelector(".years") timeline .set(charge, {opacity: 0, x: "-100%"}) .set(years, {scale: 0}) .to(charge, {opacity: 1, x: 0}, 0) .to(years, {scale: 1}, 1) }) } }
  2. Hi guys! I'm learning GSAP a few months, with the help of community, this is my first work using GSAP, in progress yet. Thanks all for help! And i have another question, about page transitions, shared element transitions between pages. See website reference at link: https://alfacharlie.co/ See the effect of transitions between pages, the softness the animations. I used the barba.js in html + css and it worked, but not working fine in wordpress, someone to help me achieve page transitions in wordpress site?
  3. Hi, I've added the below scripts to the header.php file of our website. <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js id='gsap-js'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollToPlugin.min.js' id='gsap-scroll-js'></script> <script type='text/javascript' src="https://unpkg.com/@barba/core"></script> My HTML and JS is below. I can console.log out from within the functions so I know they're loading however the GSAP does not seem to be. I'm also not getting any errors in console. The website is on wordpress divi theme if this is any help. <div id="intro"> <section class="video-panel" data-section="creative" data-permalink="#" style="right: 50%;"> <div class="video-holder"> <video class="overview-reel" playinline="" loop="" muted="" autplay="" preload="auto" src="/wp-content/uploads/2021/11/2.mp4"> </video> <h1> <span>Projects</span> </h1> </div> </section> <section class="video-panel" data-section="solutions" data-permalink="#"> <div class="video-holder"> <video class="overview-reel" playinline="" loop="" muted="" autplay="" preload="auto" src="/wp-content/uploads/2021/11/2.mp4"> </video> <h1> <span>Client Services</span> </h1> </div> </section> </div> gsap.registerPlugin(ScrollToPlugin); window.addEventListener("load", function(e) { (function onIntroLeave(e) { gsap.to('#intro .video-panel[data-section="creative"]', { duration: 0.5, right: '50%', ease: "power3.out" }) }) (function onIntroHover(e) { var per = (e.pageX - window.innerWidth / 2) / (window.innerWidth * 2); var dir = Math.min(1, Math.max(-1, e.pageX - window.innerWidth / 2)); var pow = Math.pow(per * 5.5, 2); var right = Math.min(100, Math.max(0, 50 + (50 * pow * dir))) + '%'; gsap.to('#intro .video-panel[data-section="creative"]', { duration: 0.5, right: right, ease: "power3.out" }) }) (function onIntroClick(e) { intro.removeEventListener('mousemove', onIntroHover); var section = this.dataset.section; var permalink = this.dataset.permalink; if (section === 'creative') { var headerX = '-3em' var right = '0%' var otherVideo = intro.querySelector('.video-panel[data-section="solutions"] video') } else { var headerX = '3em' var right = '100%' var otherVideo = intro.querySelector('.video-panel[data-section="creative"] video') } otherVideo.pause() barba.prefetch('/' + section) gsap.to('#intro .video-panel[data-section="creative"]', { duration: 0.5, right: right, ease: "power3.inOut" }) gsap.to('#intro .video-panel[data-section="' + section + '"] video', { duration: 0.5, width: '100vw', height: '100vh', ease: "power3.inOut" }) var circle = gsap.to('#intro .video-panel[data-section="' + section + '"] video', { duration: 1, css: { clipPath: 'ellipse(101vw 101vw)' }, ease: "power3.inOut" }) gsap.to('#intro .video-panel[data-section="' + section + '"] h2', { duration: 0.5, x: headerX, ease: "power3.inOut" }) circle.eventCallback('onComplete', openPage, [section, permalink]) }) // (function videoLoaded() { // vLoaded++; // if (vLoaded === vCount) { // introLoaded(); // pageLoaded(); // } // }) }); Thanks
  4. Welcome to the forums, @COG Digital. It's pretty tough for us to troubleshoot without a minimal demo. This kinda sounds like it might a Barba issue, like you're not tapping into its lifecycle events properly so that your GSAP code runs when the corresponding elements exist but I'm not sure at all. Once we see a minimal demo, perhaps we'll have more insight. Did you add a console.log() right where your tweens are supposed to be firing just to make absolutely sure that they're even getting executed?
  5. hi, my plan is to play barba.js page layers transition first - and - then animation for a svg logo. but both are start at a time, have tried delay options, but it's not working. or another option i am trying too.. first logo animation plays - and - then the page layer transition.
  6. Hi @GNSNTG. Welcome to the forums. It looks like you're using 2 other 3rd party libraries (LocomotiveScroll and Barba.js) - those aren't GreenSock products so we can't really support them here but if you're dynamically loading content into the same page (so it's not actually refreshing the page and going to a new URL that runs the code from the start), make sure you .kill() all your old ScrollTriggers/animations first and then create the new ones and call ScrollTrigger.refresh() to force it to re-calculate all the start/end trigger positions once things are fully loaded and rendered to the screen. If you want to kill ALL of the ScrollTriggers, you can do that like ScrollTrigger.getAll().forEach(t => t.kill()); If you still need help, please provide a minimal demo, hopefully with no 3rd party libraries. But if you do use 3rd party libraries, don't include your whole project - just isolate the issue in the most minimal way possible (a few <div> elements, for example). Happy tweening/scrolling!
  7. Hi, What is the best practice for gsap with barba ? Should I kill gsap annim on beforeEnter hook ? Thanks, Best regards
  8. Hi everyone, So i'm using gsap splittext plugin to split sentence into words and lines and then animating words. Everything works fine on first load of a page but when i'm navigating to different page and then get back something weird happens and sentence breaks only on last word. We are using gsap with barba js. Here is the demo of a problem, also i tried to replicate problem on codepen but it is lot of work to integrate barba there to make it more accurate. Screen Recording 2021-08-17 at 12.23.45.mov Here is how it looks when it's inspected Sometimes it works as expected, but most of the time it breaks and breaks
  9. Hi guys I am new to Greensock and recently I have created a template website using both gsap and barba js. The full code can be found in https://github.com/kitsonchan/template_architecture and you can also view the website directly here https://kitsonchan.github.io/template_architecture/. So now the problem that I have been struggling with is the timeline that was using scrolltrigger. In both of my page Ihave a timeline called tlStage1 and tlStage2. The tlStage1 works completely fine at all conditions but I don't know why tlStage2 only works when you refresh the page. I am not sure if the issue is related to barba js lol so i decide to ask here. Thanks!
  10. Hello Devs, Please someone to kindly help edit this fade in and out code, to slide up and down or swipe left or right page transitions with Gsap + Barba js here's my code. // Animation - Transition function pageTransition() { var tl = gsap.timeline(); tl.to(".main-fade", { duration: .4, ease: "Power0.easeNone", opacity: "0" }); tl.set(".main-fade", { y: 0, opacity: "1" }); tl.set(".loading-screen", { opacity: 0 }); } thanks
  11. Apologies in advance for the question that is more related to Barba.js than GSAP but you guys always point me in the right direction. I have researched different methods, but my JS knowledge is limited so I am not sure on what strategy to use. I want to do a simple page transition between two pages with separate JS files that have many GSAP timelines and event listeners. Ideally I would like to use the views / beforeEnter hook to re initialise my JS scripts, but I don't know how to do this. Or do I need to break up my JS files into functions and call them using hooks; I also have different JS files for mobile version so if it is possible to on page transition to load / run my JS files that would be ideal. barba.init({ views:[ { namespace: 'detail', beforeEnter(){ } } ], transitions: [ { name: 'general-transition-opacityfade', once({next}){ animationEnter(next.container) }, leave: ({current}) => animationLeave(current.container), enter({next}){ animationEnter(next.container); } }, { name: 'detail', to:{ namespace:['detail'] }, once({next}){ navigation1(next.container) }, leave: ({current}) => animationLeave(current.container), enter({next}){ navigation1(next.container); navin2(next.container); navin3(next.container); } } ] })
  12. I'm brand new to GSAP and Barba, I have got a basic page transition working with the two, however after the transition scroll trigger seems to break. I've been looking through the forum and see other users have very similar issue to what I have but I cannot find a solution. If either of the pages are accessed directly, scroll trigger works fine. However if either page is navigated to via the barba transition the scroll trigger doesn't work. Using barba views I appear to be able to get scripts to fire post transition, but I cannot work out how to get scroll trigger to reload. When I inspect the element after transition it looks like it's ready to be manipulated (has the inline transform style added to it), but it doesn't animate on scroll. I'm aware this may be a barba issue rather than a GSAP issue, but hopefully someone on the forum has come across this and can help. I have a very basic test pages at the moment (excuse the superfluous loading of every plugin!). First page is: <!DOCTYPE html> <!--[if lt IE 7]><html lang="en" class="lt-ie9 lt-ie8 lt-ie7 ie9"><![endif]--> <!--[if IE 7]><html lang="en" class="lt-ie9 lt-ie8 ie9"><![endif]--> <!--[if IE 8]><html lang="en" class="lt-ie9 ie9"><![endif]--> <!--[if IE 9]><html lang="en" class="ie9"><![endif]--> <!--[if gt IE 9]><!--><html lang="en"><!--<![endif]--> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>tester 1 - Contemporary Chandeliers</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content="tester 1 Description"> <link href="/assets/css/ccc2021.css?1608457279" rel="stylesheet" type="text/css"> </head> <body data-barba="wrapper" class="" id="pageTop"> <div class="page"> <div class="stuck--top"> <h1>Don't want this to change</h1> </div><!--/.stuck--top--> <div class="barbaHolder"> <main data-barba="container" data-barba-namespace="tester"> <div class="container purple"> <h4>tester 01</h4> <p> <a href="tester2.php" title="Next">Go to Page Two</a> </p> <div class="box"> </div><!--/.box--> </div><!--container purple--> <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script> <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script> <script src="https://unpkg.com/@barba/core"></script> <script src="/assets/js/locomotive-scroll.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/Draggable.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/EaselPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/MotionPathPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/PixiPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/TextPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script> </main> </div><!--/.barbaHolder--> </div><!--/.page--> <script src="/assets/js/application.js"></script> </body> </html> Second page is basically the same apart from the link back: <!DOCTYPE html> <!--[if lt IE 7]><html lang="en" class="lt-ie9 lt-ie8 lt-ie7 ie9"><![endif]--> <!--[if IE 7]><html lang="en" class="lt-ie9 lt-ie8 ie9"><![endif]--> <!--[if IE 8]><html lang="en" class="lt-ie9 ie9"><![endif]--> <!--[if IE 9]><html lang="en" class="ie9"><![endif]--> <!--[if gt IE 9]><!--><html lang="en"><!--<![endif]--> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>tester 2 - Contemporary Chandeliers</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content="tester 2 Description"> <link href="/assets/css/ccc2021.css?1608457279" rel="stylesheet" type="text/css"> </head> <body data-barba="wrapper" class="" id="pageTop"> <div class="page"> <div class="stuck--top"> <h1>Don't want this to change</h1> </div><!--/.stuck--top--> <div class="barbaHolder"> <main data-barba="container" data-barba-namespace="tester"> <div class="container purple"> <h4>tester 02</h4> <p> <a href="tester.php" title="Next">Go to Page One</a> </p> <div class="box"> </div><!--/.box--> </div><!--container purple--> <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script> <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script> <script src="https://unpkg.com/@barba/core"></script> <script src="/assets/js/locomotive-scroll.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/Draggable.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/EaselPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/MotionPathPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/PixiPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/TextPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script> </main> </div><!--/.barbaHolder--> </div><!--/.page--> <script src="/assets/js/application.js"></script> </body> </html> The application js controlling the transition and scroll trigger is: /*PAGE TRANSITION*/ barba.init({ transitions: [{ name: 'opacity-transition', leave(data) { return gsap.to(data.current.container, { duration: 0.5, opacity: 0, y: '50px', }); }, enter(data) { gsap.from(data.next.container, { duration: 0.5, opacity: 0, x:'-50px', }); } }], views: [{ namespace: 'tester', beforeLeave(data) { alert('Leaving tester'); }, beforeEnter(data) { alert('Entering tester'); boxRoll(); } }] }); /*SCROLL TRIGGER*/ gsap.registerPlugin(ScrollTrigger); function boxRoll(){ const boxes = gsap.utils.toArray('.box'); boxes.forEach(box => { gsap.to(box, { scrollTrigger: { trigger: box, toggleActions: "restart", scrub: 0.5, id: 'boxRoll', }, rotate: 360, x: 350, }) }); } boxRoll();
  13. Hi, I'm currently working on a website using Gsap ScrollTrigger. What I'm trying to achieve is showing a "previous-next post" button when the user has reached the bottom of the page. Which is working almost ok when the page is not resized. So on the page I have 2 scrollTriggers: 1. A horizontal gallery of images (with a media match) 2. The previous-next button. 1: let slider = document.querySelector('.hor-slide--project'); setTimeout(function(){ ScrollTrigger.matchMedia({ "(min-width: 992px)": function() { gsap.to(slider, { x: () => -(slider.scrollWidth - document.documentElement.clientWidth) + 'px', ease: 'none', scrollTrigger: { trigger: '.hor-slider-container', start: 'top top', //pinReparent: true, invalidateOnRefresh: true, pin: true, // scrub: .25, scrub: 0, // end: () => '+=' + slider.offsetWidth // end: 4000, end: () => slider.scrollWidth, } }); }, }); }, 1); 2: setTimeout(function(){ ScrollTrigger.create({ trigger: '.single-project', start: 'bottom bottom+=50px', //end: 'bottom bottom', invalidateOnRefresh: true, //markers: true, onEnter: self => { gsap.to('.prev-next', 1, {y: '-100%', ease: Expo.easeOut}) }, onLeaveBack: self => { gsap.to('.prev-next', .5, {y: '0', ease: Expo.easeOut}) } }); }, 100); I'm using setTimeout because in addition to gsap scrollTrigger I'm using Barba.js, and I need to delay, but it doesn't seem to be the problem, I removed the setTimeout and the problem still occurs. For the second scrollTrigger, I have used onEnter and onLeaveBack, this might not be the best way but that's the only way I found so far (I might be part of the problem), so 50px before the bottom of the '.single-project' block reach the bottom of the viewport (start: 'bottom bottom+=50px'), show the prev-next, otherwise hide it. The problem is that when I resize the window from mobile (< 992px) to desktop (> 992px), the prev-next button is now showing to early, before I reach the bottom of the page. Step to reproduce the bug: 1. Load the page on desktop, scroll to the bottom, the prev-next is showing (great) 2. Resize the window (< 992px), the first horizontal gallery scroll is "killed", scroll to the bottom, the prev-next is still showing at the right time (amazing) 3. Re-resize the window (> 992px), the first horizontal gallery is "recreated", and now if you scroll around the page, you can see prev-next showing too early, before you reached the end of the page. I tried refresh and also invalidateOnRefresh true or false, without success, it doesn't want to work. I guess I'm doing something wrong, probably the way I try to show the prev-next, using onEnter and onLeaveBack. Must be a more clever way to do that. Thank you.
  14. Hello, a few years ago I worked a lot with GSAP, so 2017/2018. I'm currently building a smaller project where I want to load content via ajax, there are elements in it that I want to pick up and put in a timeline for a transition and I'm getting desperate ^^. I had done something similar a few years ago, but barba.js was involved - its own challenge - but this is overkill and there are promises and async await - so I thought. On the net and here in the forum is not very much to find on this and the little I have tried everything without success. Sorry I don't have a CodePen example yet, but and am now at the point that I have to ask: Does this work at all? Thanks a lot
  15. Welcome to the GreenSock forums! Glad you’re here. It’s a wonderful place to learn and get your questions answered. What topics can I post about here? We love answering questions that are directly related to GreenSock tools. API questions, bug reports, or if you’re wondering why GSAP behaves a certain way - those types of posts are welcome around here. What topics should be avoided? As much as we love solving problems, the following types of questions are beyond the scope of what we generally provide here for free: Logic issues. JavaScript and application logic, CSS setup, and generic troubleshooting that isn’t directly related to GreenSock tools. Third party tools. Frameworks (React, Angular), other JavaScript libraries (LocomotiveScroll, Barba), build tools, etc. We’re happy to help with the GSAP part of things if you strip out as much irrelevant code as possible and provide a minimal demo. “How do I do this cool effect I saw on a trendy website?” Someone here may point you in the right direction but please don't expect a full tutorial on how to create and effect you saw on a slick web site. Where else can I go for help? If your question is primarily about another tool, try looking for a forum or GitHub repository about that tool. If it’s a general programming-related question, try StackOverflow. Want feedback about your working code? We’d be glad to take a peek at GSAP-specific code but for more general topics (like performance or application logic) we’d suggest something like CodeReview. Read first Please read Getting Started with GSAP, common GSAP mistakes (maybe also common ScrollTrigger mistakes), as well as the GSAP docs before asking your question. Often you’ll get your question answered just by doing that! Make a minimal demo This helps provide context and gives us a rough idea of what you’re trying to accomplish. It's WAY better than trying to dig into a live website with lots of other things going on, or looking at a small excerpt of code without much context. Pro tip: It's often easier to create a minimal demo from scratch rather than stripping out irrelevant things from your original project. You will GREATLY increase your chances of getting a prompt answer if you create a minimal demo. After you've posted a demo to our forums, please click the "Fork" button on CodePen before making future changes so that context is not lost for future readers of the forum. Be courteous We try to treat people the way we’d want to be treated around here. Please do the same. Also keep in mind that the people answering your post are doing so for free! Most of our regular contributors gain nothing from helping you except the satisfaction of doing so. Please give them your gratitude and respect. Ask away! We’re eager to help, so make a minimal demo and ask your question! We’ll do our best to answer it promptly. Pay it forward - help someone else The best way to learn is to teach someone. You’d be surprised how much you grow when you try answering some questions here! We are so grateful for the group of volunteers dedicated to helping others in these forums. It’s quite satisfying to come alongside a fellow developer who is struggling and deliver a clever solution to their issue. Become a contributor! You do NOT need to be an expert. Anyone...and we do mean anyone...is welcome here.
  16. Hi guys, I have a generall question while starting to use GSAP with barba. I wonder if someone of you could bring light into my JS-darkness at this early point. I am trying to find a solid basic setup with both of the libraries together. barba.init({ views: [{ namespace: 'home', afterEnter(data) { initTimeline1(data.next.container); initTimeline2(data.next.container); initTriggeredTween(data.next.container); }, }] }); const initTimeline1 = (next) => { const tl = gsap.timeline({}) .to(next.querySelector('el1'),{'GSAP MAGIC'}) return tl } const initTimeline2 = (next) => { const tl = gsap.timeline({scrollTrigger:{}}) .to(next.querySelector('el2'),{'GSAP MAGIC'}) return tl } const initTriggeredTween = (next) => { next.querySelector('el3').addEventListener('click', () => { gsap.to(next.querySelector('targetEl'),{'GSAP MAGIC'}) }) } barba.hooks.beforeEnter( () => { ScrollTrigger.getAll().forEach(trigger => { trigger.kill() }); ScrollTrigger.refresh(true) } ) I leaned so far, that I have to kill the ScrollTriggers, because things dont work, if I return to the page with namespace"home". But if I reinititate the timelines, tweens and events again and again I am wondering if I am causing a memory leaks. Do I have to kill, remove, destroy all of them manually or does the garbage collection take care of things by itself? And if I have to manage the things, are there similar support functions like ScrollTrigger.getAll() for helping me out? I just read, that killAll is deprecated. Sorry for my English, and the question which may be a little off topic. Many thanks in advance
  17. Hi All… Trying to learn GSAP using Barba – I’m self-taught so constantly running into issues and thanks for this forum it has helped in many ways. I am hoping this question can be answered without a demo, because I am working in a dynamic environment and my issue is related to navigating from project to project, which technically is the same layout within the system, just loading in the content dynamically based on the project. To set this up, using JS & HTML, I have the latest versions of GSAP, ScrollTrigger, & Barba plugged up and the page transitions work from one page type to the next – took some time, but slowly figured it out. My issue now, are the project pages of the site within the portfolio section. The first time you navigate to a project, the page transitions and tl animations work as I created. The problem is when I navigate from one project page to the next project, on leave the page transitions out as expected, but then nothing is happening on enter. The page transition and tl animation don’t seem to reload. I have tried kill, reset, & clearProps – it could be the placement, but tried it many places with no luck. Based on the console logs everything is firing based on the sequence I setup, but I feel the whole page/timelines/ScrollTrigger needs to be reset/restart. Also, not sure where to place the reset – within Barba I am using both views and transitions. It is just the page is loading on to itself so how do I reset everything, so it starts all over and goes through all the animations when you go to the next project page. Any direction or link to other examples would be helpful.
  18. 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.
  19. @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!
  20. 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
  21. 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.
  22. Here is the link - https://cdpn.io/elsueno/project/editor/XmqJWg Here I'm working on the footer parallax effect from this example - If I apply Barba.js and click navigation "Home", "about" & "Product" then the footer gsap parallax effect as per the link not working properly because Barba not reloading the page and content for the inner page is less compare to the home page. Barba hooks are not handy in this situation because the footer is not included in the Barba container. Can you guys help me?
  23. 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
  24. 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.
  25. Hey all. I have a Barba with GSAP setup for my website. Everything works fine. The navigation on my site also works as intended initially but stops animating suddenly after i navigate to 2 to 3 pages. I am not sure why this is happening. Heres a demo link. http://fingerprints.co.in/protectmyphone/ (Try to navigate to 2 to 3 pages) The text in the menu will stop animating suddenly. Requesting some help in this as i am new to barba and GSAP. Thank you. Burger menu animation code: function pageTransition() { // Toggle Icone hamburger $(document).ready(function () { $('.barres').click(function () { $('.barres').toggleClass('active'); }) }) // Greensock Animations var timeline = new TimelineMax(); timeline.to(".menu", 0.8, { left: '0%', ease: Expo.easeInOut, delay: 0 }); timeline.staggerFrom(".menu ul li", 0.3, { x: -100, opacity: 0 }, 0.1); timeline.reverse(); $(document).on('click', '.barres', function () { timeline.play(); }); $(document).on('click', 'a', function () { timeline.reverse(); $('.barres').toggleClass('active'); }) } Barba setup: barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); data.current.container.remove(); pageTransition(); await delay(1000); done(); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach(t => t.kill()); }, async enter(data) { contentAnimation(); }, async once(data) { contentAnimation(); }, }, ], }); barba.hooks.enter(() => { window.scrollTo(0, 0); });
×