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. I have a transitions I'm trying to perform that works. But when I change page I should reset my javascript but I can't. Someone to help me? Thanks My code: function delay(n){ n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n) }) } function pageTransition(){ let tl = gsap.timeline(); tl .to(fermerTest, {display:'none', duration:0.01}) .to(ouvrirTest, {display:'block'}, '<') .to('.loading-screen', { duration:1.2, height:"100%", top:'0%', ease:'Expo.easeInOut', },'<') .to('.loading-screen', { duration:1, height:"100%", top:"100%", ease:'Expo.easeInOut', delay:0.3, }) .to('.ul-navbar', { y:'-100%', duration:0.1, }, '-=0.90') .to('.deuxieme-slide', { y:'-100%', duration:0.1 }, '<'); } function contentAnimation(){ document.querySelector('body').classList.remove('overflow') document.querySelector('body').classList.remove('open')” } barba.hooks.enter(() => { window.scrollTo(0,0); }) barba.init({ sync:true, transitions:[{ async leave(data){ let done = this.async(); pageTransition(); await delay(1500); done(); }, async enter(data){ contentAnimation() }, async once(data){ contentAnimation() }, }], }) <!DOCTYPE html> <html lang="fr"> <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"> <script src="https://kit.fontawesome.com/6434cb6a94.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="{{asset('css/style.css')}}"> <title>Martin Manderveld</title> </head> <body data-barba="wrapper"> <div class="load-container"> <div class="loading-screen"></div> </div> <div class="cursor"></div> <div class="scrollbar"></div> <div class="clickScrollbar"></div> <div class="div-loader"> <div class="div-gauche"> <div class="div-animation-loader"> <div class="rond-loader rond1"></div> <div class="rond-loader rond2"></div> <div class="rond-loader rond3"></div> <div class="rond-loader rond4"></div> </div> </div> </div> @include('partial/navbar') <div data-barba="container" data-barba-namespace="home-section"> @include('page/home') <div class="div-cache"> @include('page/about') @include('page/projet') @include('page/service') @include('page/contact') </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/@barba/core"></script> {{-- <script src="https://unpkg.com/@barba/core"></script> --}} <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script> <script class="main-script" src="{{asset('js/main.js')}}"></script> </body> </html>
  2. hello i have problem with transition animation and also text. 1.For page transitions I want it to appear from the bottom and disappear to the top, but when I press the button for a short time, the transition appears from top to bottom... 2.And for the fade in text animation I have the same problem, namely if I press the button quickly sometimes the last animation has not been completed, so the animation occurs twice. I want when the button is clicked the transition always appears bottom->up, and the text always from 0 to 1 opacity. This is my code https://codesandbox.io/s/elegant-sara-5wz41g
  3. 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
  4. HI Folks! I've been trying (very unsuccessfully) to build a portfolio site with GSAP and Barba.js I initially built everything with CSS animations as per www.frontenddevelopment.com.au/dev, but failed to get it working yesterday, so I rebuilt it stripped down in a couple of hours today with GSAP. Unfortunately, despite following Barba's documentation, I cant seem to get it working and after 9 hours today I'm pretty frazzled. It may be something silly that I've overlooked due to being so tired. Obviously CodePen is not the right vehicle for a multipage site and I'm not enamoured with it enough to buy a full membership, I spent it on a Club Greensock membership instead. I know that this is a bit off topic, but GSAP and Barba.js is a formidable combination, so I'm hoping that someone can help me get this wireframe working! AS you can see form the site on my dev server, I'm also embedding canvas elements as well. Thanks so much! Andy :) about.html contact.html index.html projects.html main.js transitions.js main.css
  5. Hi All, I'm integrating ScrollSmoother in my new website and am using Barba.js to handle the page transitions. Everything seems to be working, just one little thing where I'm stuck. A Codepen is a little tricky because there's alot going on, but I'll try to explain. Since Barba doesn't use page refreshes the ScrollSmoother is not created each page but instead uses the instance of the first load. So I need to create a ScrollSmoother every new page transition, which is OK, but after every page enter I need to scroll to the top and this needs to be instant, otherwise it uses the scroll position of the previous page. What happens now is that the page transition fires, but then the window.scrollTo() is a smooth while it needs to be instant. I tried to .kill() the ScrollSmoother every page leave, but since the ScrollSmoother is created in a Barba hook each time I can't access the variable. Maybe I'm missing something or making it too complicated? Any help would be appreciated! Edit: you can see whats happening on https://dev.mathieudelporte.be/md/. Scroll to the footer and click on 'Over mij', you'll see the transition and the scroll to top happening this way.
  6. Hi! @akapowl helped me out yesterday to get pinned animation working with Locomotive and Barba, but after that i've realised that pinSpacing is not working as expected after going to the other page and coming back. https://stackblitz.com/edit/web-platform-vhx7k3?file=index.html,styles.css,index.js Also, the animation jumps on mobile, and if remove the code below it works but it is extremely jittery. pinType: container.querySelector('[data-scroll-container]').style .transform ? 'transform' : 'fixed',
  7. I am looking for a page transition effect when clicked on a smaller image and then that small image is going to animate and cover the full screen and now will behave as a different page... Refer to this portfolio website :- https://www.chriswilcock.co/ (Just click on any image like: Discovery Land co, Bear Grylls, etc..), a liquid kind of page transition happens, if you look at the url while transitioning, it is actually a different page... Addon:- I think this page is using barba.js for the transitions, but please help me, because I want to create a similar transition, and I am also using locomotive scroll on my website.
  8. That definitely sounds like a barba.js question. I'm totally unfamiliar with that tool. We love helping with GSAP-related questions, but unfortunately we just don't have the resources to support other 3rd party tools/frameworks. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.
  9. Niiitraam

    Barba bug

    Hi, I have a problem with Barba. When i change the page, my Javascript block on this page. Someone can help me? Thanks
  10. I'm not really sure whether you're after barba or nuxt or vue... You've commented on a couple of threads But maybe this is helpful https://codepen.io/cassie-codes/pen/LYQaOBm At the end of the day it's all the same thing really - you just need to wrangle the right entrance/exit/mounted/onmount events, which takes a bit of docs reading and some trial and error sometimes. Pop back with a demo and make a new thread if you need more specific help. Good luck!
  11. Hi folks, I'm struggling to work out why the GSAP transition isn't firing as apart of the barba.js transition? https://codepen.io/matt-rudd/project/live/ApLrbb (Ignore the 404 below, link works!) I've read and re-read pretty much all the other GSAP/barba.js/loco scroll posts on here, tried to dissect @akapowl's stackblitz but can't fathom what I'm doing wrong - likely around killing and refreshing the ScrollTriggers, or potentially some basic errors in my functions? Been staring at this for days. This seems like the very last technical hurdle I'm facing...so any insight at all will be massively appreciated!
  12. Hi there, I'm looking for help to complete a project - my freelance portfolio. It's a two-page framework I'm building to showcase my creative work. I'm seriously stuck - have been learning javascript, GSAP and now barba from scratch, and just can't seem to find a solution, despite reading through the amazing forum here and receiving some direct help. It's highly likely that I've not set up my timelines and ScrollTriggers fully as they should be! I've read and watched pretty much every tutorial out there about how to combine ScrollTrigger, Locoscroll and Barba, but can't figure out how and where to implement the necessary inits and kills to make sure that everything works as it should in combination. Here's the project so far: https://stackblitz.com/edit/web-platform-naq1gl?file=js/app.js The specifics of what I'm looking for: The timeline on the index page working fully The loader in and away transition working when link to subpage is clicked (no real issues here at this stage!) The subpage pinned sidebar timeline working on both first load (it only currently works after a manual page refresh) and subsequent loads as barba.js replaces the container in the DOM. Some brief annotations to explain what changes were made to the JS/hooks/views etc to get this functional. My budget for this is around $100 dollars, as I believe this fix isn't a big/long job for someone well-versed in these three libraries. Thanks in advance - I'd HUGELY appreciate a fix for this.
  13. Experiencing a strange repeat instance of a Lottie animation in my project... The top disco ball on black is the expected instance, and the one showing in the next div down (purple) isn't wanted/ I've been sure to retain the ScrollTrigger.refresh in the helper function Fully appreciate that a demo is likely required to showcase the issue, but as I'm not sure which bits of code are conflicting it's a tough one for me to strip down into a simple pen! The way I'm setting up the lottie/scrolltrigger animation works on its own without any repeating, but when I add it in with a bunch of other GSAP animations (as well as ScrollSmoother and barba.js) the second view of it in the next div appears. Long shot with what I'm able to provide here but figured one of you experts might know of a common cause? It's bound to be some of my dodgy code clashing with the Lottie helper function. I've been sure to keep the ScrollTrigger.refresh in there, but not sure what could be causing this? I'd fade it out with an onComplete after the full Lottie has scrubbed through, but that's not a good fit for the page. (PS - just a sample animation... wish I was really adding a giant disco ball... 🕺)
  14. 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();
  15. Hi, i encounter a problem trying to use Locomotive Scroll and Barba, the pinned section is in wrong position on the initial load, but after going to next page and coming back it works fine. I've combined to demos that i found to show the problem. https://codesandbox.io/embed/smoosh-hill-qb6er4?fontsize=14&hidenavigation=1&theme=dark LE: By providing the demo i found out that resizing the window (in codesandbox) it works fine but i still don't know how to solve it. The actual question: how can i add ScrollTrigger.refresh() without resizing the window?
  16. Hey everyone! I'm hoping this is considered a GSAP question rather than a Barba.js one. I've looked through this forum posts related to scrollTrigger and barba, which from I understand that scrollTriggers need to be killed off during barba transition then reinitiated after page transition. My environment is in WordPress and I'm getting no errors transitioning between pages. I've tried to simplify down what I'm using, so I hope this would be enough to troubleshoot... The below works, killing off all ScrollTriggers and then running "scrollFunction()". const cleanGSAP = () => { ScrollTrigger.getAll().forEach( t => t.kill(false) ) ScrollTrigger.refresh() window.dispatchEvent(new Event("resize")) } function delay(ms) { return new Promise( resolve => setTimeout(resolve, ms) ) } barba.init({ sync: true, transitions: [ { async leave(data) { const leaveDone = this.async() await delay(1000) leaveDone() }, async afterLeave(data) { cleanGSAP() }, async beforeEnter(data) { }, async enter(data) { $(window).scrollTop(0) }, async afterEnter(data) { }, async after(data) { //scrollFunction() this works //ScrollTrigger().refresh() this doesn't work } } ] }) function scrollFunction() { //gsap stuff here } My issue is the "scrollFunction()" is declared in another file and can't be moved to the file with the barba.js hooks. Replacing "scrollFunction()" with ScrollTrigger().refresh() in the after hook doesn't work or is this not how it's meant to be used? If not is there a global function that can innit all scrollTriggers? I'd appreciate and tips or help on this 😀 Cheers
  17. Hello, I can't make ScrollSmoother work with AJAX transitions using barba.js library. The problem is, that the ScrollSmoother isn't updating properly. It's not updating the content height, and the effects on new page won't apply. How should I approach it? Below are the basic functions I use, and the structure. I used it exactly the same with Locomotive Scroll, before I tried to move to GSAP solution. ScrollTrigger.refresh(); doesn't seem to do anything. I will appreciate your help. Thanks. <div id="site" data-barba="wrapper"> <div id="smooth-wrapper"> <div id="smooth-content"> <main data-barba="container"> <?php the_content(); ?> </main> </div> </div> </div> initScroll: () => { Site.smoother = ScrollSmoother.create({ wrapper: '#smooth-wrapper', content: '#smooth-content', smooth: 1.5, effects: true, smoothTouch: 0.1, }); }, initTransitions: () => { barba.init({ transitions: [ { name: 'default-transition', leave(data) { }, enter() { }, } ], }); barba.hooks.beforeLeave((data) => { }); barba.hooks.after((data) => { Site.reinit(); ScrollSmoother.scrollTop(0); ScrollTrigger.refresh(); }); },
  18. Hi, i am quite new to GSAP but i love it so far. I build a small horizontal scrolling dummy where everything works fine. My page transitions are made with the help of barba.js. But as soon my new content is loaded my Scrolltrigger breaks and now it scrolls vertically. I tried to call the getMaxWidth function and initiate the ScrollTween again as soon the new content is loaded but now its not scrolling in any direction. Is there any solution to recreate the Scrolltrigger when a new page is loaded? The page transition in codepen doesnt work because i cant create a second page. (enter function of barba where i try to initiate the gsap stuff again is on line 102) And another question down the line: Is it possible to animate the whole text (like a fadeout) as soon as i scroll to the right side and fade it in as soon as i come back? maybe the opacity based on the scrollposition. Thanks in advanced, Guillermo
  19. limbo

    Barba.js + Smoother

    Anyone else found that adding SmoothScroller via GSAP registerPlugin kills barba? (page transition killed and current URL reloaded) I know this is a very loose question - but just thought I'd check before setting up a pen / test somewhere.
  20. //Barba Page Transitions barba.init({ views: [ { namespace: 'home', afterEnter() { links.forEach((link) => { link.style.color = '#fefefe'; }); copywright.style.color = '#fefefe'; linkHarpreetLI.style.flex = '0'; linkWorkLI.style.flex = '1'; linkCollab.textContent = 'Collab'; linkProjects.textContent = 'projects'; linkHarpreet.href = '../aboutme/aboutme.html'; animateSlides(); cursorAnimate(); }, beforeLeave() { ScrollTrigger.refresh(true); }, }, { namespace: 'projects', afterEnter() { //CHANGE COLOR links.forEach((link) => { link.style.color = '#000'; }); copywright.style.color = '#000'; //CHANGE HREF linkHarpreet.href = '../aboutme/aboutme.html'; linkWork.href = '../index.html'; linkCollab.href = '../collab/collab.html'; linkStar.style.fill = '#000'; //CHANGE STYLE // linkHarpreetLI.style.flex = '1'; // linkWorkLI.style.flex = '1'; linkCollab.textContent = 'Collab'; linkProjects.textContent = ''; featuredProjects(); cursorAnimate(); }, }, { namespace: 'collab', afterEnter() { links.forEach((link) => { link.style.color = '#000'; }); copywright.style.color = '#000'; linkHarpreet.href = '../aboutme/aboutme.html'; linkWork.href = '../index.html'; linkProjects.href = '../projects/project.html'; linkStar.style.fill = '#000'; linkCollab.textContent = ''; linkHarpreetLI.style.flex = '2'; linkWorkLI.style.flex = '0'; linkProjects.textContent = 'projects'; animateCollab(); cursorAnimate(); }, beforeLeave() {}, }, { namespace: 'about', afterEnter() { links.forEach((link) => { link.style.color = '#fff'; }); linkHarpreet.href = '../index.html'; linkCollab.textContent = 'Collab'; linkCollab.href = '../collab/collab.html'; linkProjects.href = '../projects/project.html'; linkProjects.textContent = 'projects'; linkStar.style.fill = '#cbd5e1'; linkWork.href = '../index.html'; animateAboutMe(); cursorAnimate(); }, }, ], transitions: [ { leave({ current, next }) { let done = this.async(); //An Animation const tl = gsap.timeline({ defaults: { ease: 'power2.inOut' } }); tl.fromTo( '.wrapper', 1, { y: '0%' }, { y: '-100%', ease: 'power2.inOut' } ); tl.fromTo(current.container, 1, { opacity: 1 }, { opacity: 0 }); tl.fromTo( '.slider', 0.75, { x: '-100%' }, { x: '0%', onComplete: done }, '-=0.5' ); }, enter({ current, next }) { let done = this.async(); //Scroll to the top window.scrollTo(0, 0); //An Animation const tl = gsap.timeline({ defaults: { ease: 'power2.inOut' } }); tl.fromTo( '.slider', 1, { x: '0%' }, { x: '100%', stagger: 0.2, onComplete: done } ); tl.fromTo(next.container, 1, { opacity: 0 }, { opacity: 1 }); tl.fromTo( '.wrapper', 1, { y: '-100%' }, { y: '0%', ease: 'power2.inOut' } ); }, }, ], });
  21. Hello everyone, I faced a problem using gsap Flip plugin, in the leavebarba hoook works fine, also when i leave the home page, but after a page transition from about page to home, something doesnt work properly, the item moves from the original container to a different postion from the desired container... i tried a lot of solutions, using barba global hooks, also the async await, i used the flip.fit and also the flip.to, and i read the answers in this forum about this topic, honestly nothing worked for me. here is a github link of the project: https://github.com/Ali-Dakoumi/Page-Transition-Gsap-Flip-Plugin you can see it live here : https://ali-dakoumi.github.io/Page-Transition-Gsap-Flip-Plugin/about.html the leaving home animation works fine, But after leaving the about page with a simple fade out animation, the problem is when i used a flip animation while entering home, it doesnt work... const leavingHome = (container) => { const state = Flip.getState(about); about.classList.add("bigimage"); return Flip.fit(about, ".fullscreen", { duration: 3, ease: Expo.easeInOut, absolute: true, clearProps: "all", }); }; barba.init({ debug: true, sync: true, transitions: [ { name: "from-home-transition", to: { namespace: ["about"], }, async leave({ current }) { const hometitle = document.querySelector(".hometitle"); const infos = document.querySelectorAll(".info"); const img = document.querySelector(".item > img"); const tl = gsap.timeline(); await tl.to(hometitle, 0.5, { opacity: 0 }).to( infos, 0.5, { opacity: 0, }, "-=0.5" ); await leavingHome(current.container); }, enter({ next }) { enterAnimation(next.container, 0); }, }, { name: "to-home-transition", to: { namespace: ["home"], }, async leave({ current }) { await leaveAnimationAbout(current.container); }, enter({ next }) { const fullscreen = document.querySelector(".fullscreen"); const item = document.querySelector(".item"); const img = document.querySelector(".img"); gsap.to(next.container, 0, { opacity: 1, }); const newstate = Flip.getState(img); (img.parentNode === item ? fullscreen : item).appendChild(img); Flip.to(newstate, { duration: 1, ease: "power1.inOut", delay: 1, absolute: true, }); }, }, ], });
  22. Hello everybody, I'm facing a problem with my scrolltrigger. I made an horizontal scroll with scrolltrigger with pin true, but when i navigate to the page with barba my pin breaks. It looks like it is breaking through my pin. When i refresh the page it is working as expected. I don't know how to create an codepen using barba so i hope that i'm clear enough. I'm attaching some images that shows my problem. When i navigate: When i refresh: I've tried to kill al my scrolltriggers and re-init them again, but nothing seems to solve my problem. I hope somebody can help me. function initTimeline() { var main = gsap.timeline({ scrollTrigger: { trigger: container, snap: 1 / (items.length - 1), start: "top top", end: "+=" + (totalWidth / (items.length - 1)).toString(), scrub: 1, pin: true, invalidateOnRefresh: true, } }) } // adding items to timeline main.to(items, { xPercent: -100 * (items.length - 1), ease: "none", }); // Kill scrolltriggers in beforeLeave barba hook barba.hooks.beforeLeave(() => { ScrollTrigger.getAll().forEach(tl => tl.kill()); }) //Re-init scrolltrigger in after hook barba.hooks.after(initTimeline); Thanks in advance! Cheers
  23. @StudioProjects, I made a simple Codesandbox you could use as a starting point to integrate Barba, see https://codesandbox.io/s/scrollsmoother-barba-js-3dwykz?file=/index.html:328-387. You technically only need a leave and enter animation and setup Barba correctly, you should be good to go in to time.
  24. Hi again! I've uploaded it to github at https://github.com/StudioProjects/barba also to Stackblitz at https://stackblitz.com/edit/web-platform-n7jjbk?file=index.html A huge thanks again for your valuable time in helping me with this! It's about time that I started using github, I've got a couple of hundred small projects and websites from when I was a Flash Dev 15 years ago...I've just returned to coding after an 11 year break and pretty much had to start from scratch over the last 12 months! My 57 year old brain is a bit overwhelmed, but I've made good progress Andy
  25. Hmm, it's really hard to inspect the code from devtools and troubleshoot. There's a nice working example of barba & gsap here: https://stackblitz.com/edit/web-platform-j6l93d?file=js%2Fmain.js If you could make a demo of your site on stackblitz that would be so much easier. Also you can check that example above and see if it helps to adjust your code to look similar. Another thing I noticed you have "sync: false" in wrong line, it should be inside transition object like this: barba.init({ transitions: [ { sync: true, async leave(data) { const done = this.async(); $(data.next.container).addClass('fixed'); pageTransition(); await delay(1000); done(); }, }, ], });
×