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. Hey jackew and welcome to the GreenSock forums. Given that site uses GSAP for its animation I'd say it's quite doable with GSAP With that being said there are multiple aspects to that transition: A tool like Barba or Swup to transition between pages. A clip-path animation to hide content inside of the container. Translations on all the content in the viewport to animate it in as well. Creating something like this requires building each piece and combining it all together. There's no one plugin that you can throw in there to do it all for you
  2. thank you so much! yes, i just signed up for your free gsap and barba js course, i am taking it with great pleasure! thank you!
  3. Hi @GeS, Zach is right, I have created some Barba.js learning resources that could help you. More specifically here is an example of Barba + Smooth ScrollBar + GSAP and GitHub repo. I would recommend learning Barba.js by watching this YouTube playlist first. Hope that helps.
  4. Hey GeS. @Ihatetomatoes made some useful articles about GSAP + Barba that you should check out. The core issue here is that you are not recreating/updating the relevant ScrollTrigger and smooth scroll stuff when the new page loads. Unfortunately we don't have the capacity to fix all of the issues for you though. Some pointers related to your tweens though: tl.to(".blue", { // ... left: "-100%", ease: "Expo.easeInOut", }); It's best to use translations instead of left/right/etc. So x: "-100%". But if you have that, it's better to use xPercent. "Expo.easeInOut" is an invalid ease. You're mixing the old and the new syntax. It should just be "expo.inOut". Read more about those and other mistakes in the most common GSAP mistakes article.
  5. GeorgeErshov

    GSAP+BarbaJS

    Hello, everybody. Not so long ago I started studying GSAP and fell in love with its features. I have achieved almost everything I wanted for my project and not long ago I started to study the Barba js bibliography. My question probably concerns GSAP + Barba interaction. If you open the project and scroll through not much to a block with a project called Blue (there are guys on a moto), you can click on the photo and you will be redirected to another page, absolutely the same. Apart from the fact that the first block says: this PROJECT PAGE or this INDEX PAGE First the gsap animation is played, and then there is a transition and at this point all my scripts stop working, you can see that the base scrollbar is back and smooth animation with ScrollTrigger stopped working. I saw an example of barba + gsap + locomotivescroll, but I don't know much about it yet and I'm asking you to look specifically at my example. Help me set up my script correctly so that my animation will play, and then the page will open and all scripts will work correctly. https://codepen.io/GeorgeDesign2020/project/editor/ZLrYEY
  6. Hey Max and welcome to the GreenSock forums. It's pretty hard for us to help debug things without being able to see the full code and edit things ourselves. I think it would be easier if you didn't load JS dynamically and just killed and created some ScrollTriggers based on which character you want to make active. If you are going to load things dynamically, I might recommend actually switching out the content as well so you don't have to render things when they're not being used. Barba.js is a handy tool to help out with this. @Ihatetomatoes made an article on the subject and we'll release our own Barba.js + GSAP demo in the couple of weeks.
  7. Are you guilty of any of the most common mistakes people make in their ScrollTrigger code? Nesting ScrollTriggers inside multiple timeline tweens Creating to() logic issues Using one ScrollTrigger or animation for multiple "sections" Forgetting to use function-based start/end values for things that are dependent on viewport sizing Start animation mid-viewport, but reset it offscreen Creating ScrollTriggers out of order Loading new content but not refreshing Why does my "scrub" animation jump on initial load? Or my non-scrub animation start playing? Tip: How to make scrub animations take longer Navigating back to a page causes ScrollTrigger to break Note: There's also a separate article that covers the most common GSAP mistakes. Debugging tip: In many cases, the issue isn't directly related to ScrollTrigger, so it's helpful to get things working without ScrollTrigger/any scroll effects and then, once everything else is working, hook things up to ScrollTrigger. Nesting ScrollTriggers inside multiple timeline tweens A very common mistake is applying ScrollTrigger to multiple tweens that are nested inside a timeline. Logic-wise, that can't work. When you nest an animation in a timeline, that means the playhead of the parent timeline is what controls the playhead of the child animations (they all must be synchronized otherwise it wouldn't make any sense). When you add a ScrollTrigger with scrub, you're basically saying "I want the playhead of this animation to be controlled by the scrollbar position"...you can't have both. For example, what if the parent timeline is playing forward but the user also is scrolling backwards? See the problem? It can't go forward and backward at the same time, and you wouldn't want the playhead to get out of sync with the parent timeline's. Or what if the parent timeline is paused but the user is scrolling? So definitely avoid putting ScrollTriggers on nested animations. Instead, either keep those tweens independent (don't nest them in a timeline) -OR- just apply a single ScrollTrigger to the parent timeline itself to hook the entire animation as a whole to the scroll position. Creating to() logic issues If you want to animate the same properties of the same element in multiple ScrollTriggers, it’s common to create logic issues like this: gsap.to('h1', { x: 100, scrollTrigger: { trigger: 'h1', start: 'top bottom', end: 'center center', scrub: true } }); gsap.to('h1', { x: 200, scrollTrigger: { trigger: 'h1', start: 'center center', end: 'bottom top', scrub: true } }); Did you catch the mistake? You might think that it will animate the x value to 100 and then directly to 200 when the second ScrollTrigger starts. However if you scroll through the page you’ll see that it animates to 100 then jumps back to 0 (the starting x value) then animates to 200. This is because the starting values of ScrollTriggers are cached when the ScrollTrigger is created. See the Pen ScrollTrigger to() logic issue by GreenSock (@GreenSock) on CodePen. To work around this either use set immediateRender: false (like this demo shows) or use .fromTo()s for the later tweens (like this demo shows) or set a ScrollTrigger on a timeline and put the tweens in that timelines instead (like this demo shows). Using one ScrollTrigger or animation for multiple "sections" If you want to apply the same effect to multiple sections/elements so that they animate when they come into view, for example, it's common for people to try to use a single tween which targets all the elements but that ends up animating them all at once. For example: See the Pen ScrollTrigger generic target issue by GreenSock (@GreenSock) on CodePen. Since each of the elements would get triggered at a different scroll position, and of course their animations would be distinct, just do a simple loop instead, like this: See the Pen ScrollTrigger generic target issue - fixed with scoping by GreenSock (@GreenSock) on CodePen. Forgetting to use function-based start/end values for things that are dependent on viewport sizing For example, let's say you've got a start or end value that references the height of an element which may change if/when the viewport resizes. ScrollTrigger will refresh() automatically when the viewport resizes, but if you hard-coded your value when the ScrollTrigger was created that won't get updated...unless you use a function-based value. end: `+=${elem.offsetHeight}` // won't be updated on refresh end: () => `+=${elem.offsetHeight}` // will be updated Additionally, if you want the animation values to update, make sure the ones you want to update are function-based values and set invalidateOnRefresh: true in the ScrollTrigger. Start animation mid-viewport, but reset it offscreen For example try scrolling down then back up in this demo: See the Pen ScrollTrigger reset issue by GreenSock (@GreenSock) on CodePen. Notice that we want the animation to start mid-screen, but when scrolling backwards we want it to reset at a completely different place (when the element goes offscreen). The solution is to use two ScrollTriggers - one for the playing and one for the resetting once the element is off screen. See the Pen ScrollTrigger reset issue - fixed with two ScrollTriggers by GreenSock (@GreenSock) on CodePen. Creating ScrollTriggers out of order If you have any ScrollTriggers that pin elements (with the default pinSpacing: true) then the order in which the ScrollTriggers are created is important. This is because any ScrollTriggers after the ScrollTrigger with pinning need to compensate for the extra distance that the pinning adds. You can see an example of how this sort of thing might happen in the pen below. Notice that the third box's animation runs before it's actually in the viewport. See the Pen ScrollTrigger creation order issue by GreenSock (@GreenSock) on CodePen. To fix this you can either create the ScrollTriggers in the order in which they are reached when scrolling or use ScrollTrigger's refreshPriority property to tell certain ScrollTriggers to calculate their positions sooner (the higher the refreshPriority the sooner the positions will be calculated). The demo below creates the ScrollTriggers in their proper order. See the Pen ScrollTrigger creation order issue - fixed by GreenSock (@GreenSock) on CodePen. Loading new content but not refreshing All ScrollTriggers get setup as soon as it's reasonably safe to do so, usually once all content is loaded. However if you're loading images that don't have a width or height attribute correctly set or you are loading content dynamically (via AJAX/fetch/etc.) and that content affects the layout of the page you usually need to refresh ScrollTrigger so it updates the positions of the ScrollTriggers. You can do that easily by calling ScrollTrigger.refresh() in the callback for your method that is loading the image or new content. Why does my "scrub" animation jump on initial load? Or my non-scrub animation start playing? Most likely the ScrollTrigger’s start value is before the starting scroll position. This usually happens when the start is something like "top bottom" (the default start value) and the element is at the very top of the page. If you don’t want this to happen simply adjust the start value to one that’s after a scroll position of 0. Tip: How to make "scrub" animations take longer The duration of a "scrub" animation will always be forced to fit exactly between the start and end of the ScrollTrigger position, so increasing the duration value won't do anything if the start and end of the ScrollTrigger stay the same. To make the animation longer, just push the end value down further. For example, instead of end: "+=300", make it "+=600" and the animation will take twice as long. If you want to add blank space between parts of a scrubbed animation, just use empty tweens as the docs cover. Navigating back to a page causes ScrollTrigger to break If you have a single-page application (SPA; i.e. a framework such as React or Vue, a page-transition library like Highway.js, Swup, or Barba.js, or something similar) and you use ScrollTrigger you might run into some issues when you navigate back to a page that you've visited already. Usually this is because SPAs don't automatically destroy and re-create your ScrollTriggers so you need to do that yourself when navigating between pages or components. To do that, you should kill off any relevant ScrollTriggers in whatever tool you're using's unmount or equivalent callback. Then make sure to re-create any necessary ScrollTriggers in the new component/page's mount or equivalent callback. In some cases when the targets and such still exist but the measurements are incorrect you might just need to call ScrollTrigger.refresh(). If you need help in your particular situation, please make a minimal demo and then create a new thread in our forums along with the demo and an explanation of what's going wrong. Still need some help? The GreenSock forums are the best place to get your questions answered. We love helping people develop their animation superpowers.
  8. Zach you totally nailed it! Switched those two statements around and everything works fine. Thank you so much for taking the time to help...I figured this wasn't a Greensock issue but it's sooo hard to not post on here when the support is always so good!! Barba does have a Slack channel but who wants to live like that?!
  9. Hey mulegoat. It's hard to debug larger projects like this. I think these statements should be switched in order for one: // Bad initSmoothScroll(data.next.container); scroll.destroy(); // Good scroll.destroy(); initSmoothScroll(data.next.container); I'm also not sure if you need this: // reinit locomotive scroll scroll.init(); Overall questions like these are not really focused on GSAP so we can't spend our time helping out too much. It might be better suited for a site like StackOverflow. If only Barba had a good forum for it...
  10. 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
  11. I also have a question relating to this. I'll post it here BUT do let me know if I should move this to a new thread @ZachSaucier @GreenSock I am also using barba.js with scrollTrigger and when transitioning to pages it's getting a bit mixed up and now working like it does on page load. I have a function for this that I am refiring when the new page comes in. navReveal: function() { let $elems = document.querySelectorAll('nav.main, a.logo__main'), $trigger; console.log('test 1'); if (ScrollTrigger.getById('nav')) ScrollTrigger.getById('nav').kill(); if (dev.ui.body.classList.contains('home')) { $trigger = document.querySelector('div.home__content'); } else { $trigger = dev.ui.body; } gsap.fromTo($elems, { opacity: 0 }, { opacity: 1, ease: 'none', scrollTrigger: { id: 'nav', trigger: $trigger, start: '0 center', end: '+=100px', scrub: true, markers: true, onUpdate: self => console.log('progress: ', self.progress) } }); } The issue seems to be that when I transition from page to page the trigger position is lost (as is moving about per page). The markers remain in tact but that's okay as they don't remove when you kill the scrollTrigger instance. SO. I'm wondering if from looking at the code if everything looks ok and I'm not doing anything stupid? The idea is that if the instance has already been created, then kill it, and then when it gets to the gsap.fromTo part it should be creating it (again).
  12. Hey Zach, Many thanks for your quick reply and confirmation! Yes, that makes perfect sense. I thought that was the case after reading through the docs, but just wanted to make sure. I'd not used GSAP until about two weeks ago and have been playing about in CodePen and, really, it's a must-have for me. I had tried to mess with css transitions before but found them rather laborious, but GSAP puts the fun back into the dev I'm sure I will be asking some coding questions in the next few weeks as I try to get my head round everything. I'm going to be using it alongside barba.js, and I seem to remember reading on one of the posts that you were doing a demo of this as part of the learning section. Is that still on the cards ? Many thanks again!
  13. Hi there, This is my first post and my first project with GSAP. I'm using it in conjunction with Barba.js. As barba js basically creates a single page app, im having to kill and reinitialise my scrolltriggers on each page load so that they dont keep getting initialised on top of each other. Im doing this with this code: ScrollTrigger.getAll().forEach(t => t.kill()); This is working. However i also have some scrolltriggers that are outside of my barba container (eg, inside the footer that remains constant and does not reload). These are also being killed within the above code and i need them not to be. So i believe that what i need to do is only kill the scrolltriggers contained within my barba container but not the ones outside of the barba container. Can i do this by targeting all scrolltriggers within a container div that has an id? thanks for any help
  14. Hey rootx86. It's impossible for us to tell what's going on given the information that you've provided. It's almost guaranteed to be an issue with your setup, not anything with GSAP. Unfortunately we don't have the capacity to debug every Barba project that uses GSAP. If you have a question specific to GSAP please ask and we'll do our best to help!
  15. Hey @rootx86 This is probably not related to GSAP at all, but more to the way barba.js handles things. The thing with transiton-libraries, such as barba.js is, that on transition they remove the old contents and add in the new contents. If your GSAP animations refer to any of the contents that have been removed, they will stay connected to those contents after the transition. For solving that, so you will need to put those animations you are creating inside a function and call that function after the new contents on your page have been loaded by barba ( best inside one of the hooks provided by barba ). Hope this helps. Cheers, Paul
  16. Hey rubegoldberg and welcome to the GreenSock forums. Thanks for the surprisingly minimal demo! Thank you for not including Barba and your whole setup The issue is that you can't have ScrollTriggers with duplicate IDs. IDs should be unique and you can't select multiple ScrollTriggers that share an ID for some reason using .getById() (it only returns one in that case). But if you're going to kill all of the ScrollTriggers, just use ScrollTrigger.getAll().forEach(st => st.kill()); https://codepen.io/GreenSock/pen/abNmwKm?editors=0010
  17. Hello GSAP Community, Here's my situation: I'm creating a website with barba.js, so it has fluid page transitions. There's a page showing all projects and a page showing all articles, they are displayed as teasers. Since the teasers are supposed to have the same behaviour and animations I gave all of them the same class to use as selector in gsap. What I try to achieve: When scrolling down, triggering a teaser, I would like to scroll to the center of that triggered teaser. So the user purposely gets stopped in his scrolling and goes one element at a time. How I try to achieve it: Basically, I am creating a ScrollTrigger for every teaser when the page is loaded. When I change the page, I call the kill method on existing scroll triggers, so they cease to exist. So when I navigate between pages I make sure the ScrollTriggers get cleaned up before creating the new one that uses the exact same function (and selectors). What my problems are: It seems like the ScrollTrigger itself is being killed – it's undefined and everything after resetting the page and does not trigger the class that is toggled by the ScrollTrigger – but when I add the scrollTo functionality it gets messy. The ScrollTrigger and scrolling to the center of the teaser works for the first page I visit, but when I change to the other page the new ScrollTrigger seems to get stuck where the old teasers were and I can't scroll the page properly (I hope the CodePen explains well what I mean). Maybe there's something obviously wrong with my code or approach? Or any advice on how to make this work as expected? It does not feel very nice to be stopped while scrolling (duh, I know), but since it's a customer requirement I was wondering if there is a way to make it feel less like a restriction but more like the user is being guided? What I already tried: I tried native scroll-snap, which would have been nice and easy to use – but it was buggy at best when it comes to it's behaviour for what I am trying to do. I had a browse through the forums here (great and helpful work all around, btw) and found a similar question, so I adapted my code roughly to the solution suggested there. I guess it feels much different since that example has full screen sections. To make sure my project setup with barba.js is the actual problem I've made a CodePen and recreated the basic things that play together here. So there's the change in page and the creation of the ScrollTrigger for the teasers on the given page, and also the scrollTo functionality. The problem still occurs in the CodePen. I hope you guys can help me out Thanks a lot!
  18. Hello everyone, since a few months I've been working on a wordpress website (with oxygen builder) hosted on digital ocean. Recently I added page transitions thanks to Barbajs and with GSAP I have a swipe up effect. On chrome I have no problem but on Safari the site is slow to load, I don't know if it's the videos that are slow or the GSAP or barba js. The website is currently protected on a private server I can't give you access but here is a piece of my js that calls barba and gsap : function video_text_animation() { let tl = gsap.timeline(); if (tl.scrollTrigger) { tl.scrollTrigger.kill(); } //////// Video Header title ////////////// var childSplit = new SplitText(".bloc_header--header", {type:"lines", linesClass: "bloc_header--header-child"}); var parentSplit = new SplitText(".bloc_header--header", { type: "lines", linesClass: "bloc_header--header-parent"}); var w = window.innerWidth; var size = w > 1366 ? "big" : "small"; if (size === "big") { tl = gsap.timeline(); tl.addLabel("animateVideo").from(childSplit.lines, { duration: 0.5, yPercent: 100, ease: "power4", stagger: 0.1 }); } return tl; } function animation_scroll_text() { gsap.registerPlugin(ScrollTrigger); let tl = gsap.timeline(); if (tl.scrollTrigger) { tl.scrollTrigger.kill(); } //////// Diptyque title ////////////// new SplitText(".dyptique__card-heading--title", {type:"lines", linesClass: "dyptique__card-heading--title-child"}); new SplitText(".dyptique__card-heading--title", {type:"lines", linesClass: "dyptique__card-heading--title-parent"}); var w = window.innerWidth; var size = w > 1366 ? "big" : "small"; if (size === "big") { gsap.utils.toArray(".dyptique__card-heading--title").forEach((section, i) => { tl = gsap.timeline({ scrollTrigger: { id: "trigger2", start: "center 80%", trigger: section, toggleActions: "play pause pause pause", }, }); tl.addLabel("animateDiptyque").from(section.querySelectorAll(".dyptique__card-heading--title-child"), { duration: 0.5, yPercent: 100, ease: "power4", stagger: 0.1 }); }); } //////// Content title ////////////// new SplitText(".bloc_contents--title", {type:"lines", linesClass: "bloc_contents--title-child"}); new SplitText(".bloc_contents--title", {type:"lines", linesClass: "bloc_contents--title-parent"}); if (size === "big") { gsap.utils.toArray(".bloc_contents--title").forEach((section, i) => { tl = gsap.timeline({ scrollTrigger: { id: "trigger3", start: "center 80%", trigger: section, toggleActions: "play pause pause pause", }, }); tl.addLabel("animateTitle").from(section.querySelectorAll(".bloc_contents--title-child"), { duration: 0.5, yPercent: 100, ease: "power4", stagger: 0.1 }); }); } return tl; } function add_scripts() { jQuery(document).ready(function ($) { "use strict"; $('head').append('<link href="https://wordpress-364904-1405009.cloudwaysapps.com/accueil/?xlink=css&ver=5.4.2" rel="stylesheet" type="text/css">'); $('head').append('<link href="https://wordpress-364904-1405009.cloudwaysapps.com/le-mag/?xlink=css&ver=5.4.2" rel="stylesheet" type="text/css">'); $('.center-title').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '1',}); $('.title-anim').attr({'data-aos-enable': 'true','data-aos': 'slide-up','data-aos-anchor-placement': 'top-bottom','data-aos-easing': 'ease','data-aos-duration': '400','data-aos-offset': '50',}); $('.center-title2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '1',}); $('.title-anim-02').attr({'data-aos-enable': 'true','data-aos': 'fade',}); $('.diptyque__card').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.bloc_contents--text').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '200',}); $('.quadriptyque__card_1').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card_2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '400','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card_3').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card_4').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '400','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card--image').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-once': 'true',}); $('.triptyque__card_2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom','data-aos-delay': '200',}); $('.triptyque__card_3').attr({'data-aos-enable': 'true','data-aos-anchor-placement': 'center-bottom','data-aos-delay': '400','data-aos': 'fade',}); $('.triptyque__card').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.diptyque__card2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '400','data-aos-anchor-placement': 'center-bottom',}); $('body').addClass('oxygen-aos-enabled'); }); AOS.init({}); window.dispatchEvent(new Event('resize')); } function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } // Preload Animation function pageTransition_init() { var tl = gsap.timeline(); tl.set(".footer-main", {display: "none"}); tl.set(".logo-img-pre", {y:100}); tl.set(".loading-screen", {bottom: "-100%", opacity: 1}); tl.to(".loading-screen", {duration: 1.7, height: "100%", bottom: "0%", ease: "Expo.easeInOut",}); tl.to("#video_home_top video", {duration: 0, display: "block"}); tl.to(".header-main", {duration: 0, display: "block"}); tl.to(".footer-main", {duration: 0, display: "block"}); tl.to(".logo-img-pre", {duration: 0.7, delay:-0.7 , y:0, opacity:1, ease:"power4",}); tl.to(".loading-screen", {duration: 1, delay:1, height: "100%", bottom: "100%", ease: "power4",}); tl.to(".logo-img-pre", {duration: 0.3, delay:-1, opacity: 0, display:"none"}); return tl; } // Transition Functions function pageTransition() { var tl = gsap.timeline(); tl.set(".loading-screen", {bottom: "-100%", opacity: 1}); tl.to(".loading-screen", {duration: 1.2, height: "100%", bottom: "0%", ease: "Expo.easeInOut",}); tl.to(".loading-screen", {duration: 1, height: "100%", bottom: "100%", ease: "Expo.easeInOut",}); return tl; } function load_video() { const list_videos = document.getElementsByTagName("video"); for (var i = 0; i < list_videos.length; i++) { list_videos[i].load(); console.log(list_videos[i].readyState); } } jQuery(document).ready(function ($) { "use strict"; jQuery('html, body').animate({scrollTop:0}); var masterTimeline = new gsap.timeline(); masterTimeline .add(pageTransition_init()) .add(video_text_animation(), "-=1"); $(function () { barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); pageTransition(); await delay(1000); done(); } , enter(data) { jQuery('html, body').animate({scrollTop:0}); load_video(); var tl = gsap.timeline(); tl.set("#video_home_top video", {duration: 0, display: "block"}); tl.to(".header-main", {duration: 0, display: "block"}); tl.to(".footer-main", {duration: 0, display: "block"}); } }, ], views: [{ namespace: 'index', beforeEnter(data) { document.body.classList.add("oxy-overlay-header"); add_scripts(); switch_footer(); animation_scroll_text(); video_animation(); }, } }); }); });
  19. Would React users need Barba.js though when they can instead use React Router ? https://www.google.com/search?q=react+gsap+page+transitions
  20. Hey Vinu and welcome to the GreenSock forums. To do that sort of transition you will need to use the FLIP animation technique along with something that transitions between your page's content (like Barba.js). GSAP has a handy FLIP helper function to help with it. I am actually creating a tutorial on doing this effect right now. If you can hold out a week or so it should be on our learning section. You can follow it to receive updates
  21. Good to hear you got it working And yes. The part with data.current.container.remove(); is another barba-related thing that needs to be done in certain scenarios like yours, because there is a timespan when both - the new and the old barba-container - are in the DOM at the same time. So you need to make sure the old stuff is gotten rid of before ScrollTrigger is being applied, so it does its' magic to the right portion of the code. Again, that is not really related to GSAP per se - just to clear things up for future readers. On a side note: I love, how you melted Zach and Jack into one person named Zack
  22. Amazing, Got it working !!! Thank you guys 😁 I've used Zack's code and akapowl method - Before rendering a new page KILL all ScrollTrigger and re-initialize again. ####People who's using Barba Js + ScrollTrigger You still need to add this piece of code to make it work - "data.current.contaier.remove();" barba.init({ sync: true, transitions: [ { async leave(data) { data.current.container.remove(); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach(t => t.kill()); }, async enter(data) { // animation function }, async once(data) { // animation function }, }, ], }); Whoever need it please check my codepen link. https://codepen.io/william_bella/project/editor/AxLLKq
  23. Well, I guess that is very well more related to the way barba works, than it is a GSAP issue. You have to kill the 'old' ScrollTriggers on page transition and re-initialize them fresh on entering the new page. What worked for me was this nifty piece of code I grasped from Jack or Zach once (don't know which one of you it was) let triggers = ScrollTrigger.getAll(); triggers.forEach( trigger => { trigger.kill(); }); You will have to find the right barba-hooks for your project to kill the 'old' ScrollTriggers and re-initialize the 'new', though. Hope this helps a bit. Cheers, Paul
  24. Hi, Can someone help please!!!! I am currently having an issue with Barba + GSAP on page transition. It work fine on the first page, when clicking on different link the scrollTrigger doesn't work... it load the animation before scrolling to the viewport. I've tried to Reset & Kill -> contentTl.kill(true) but it didn't work. Thank you. That's the link for codepen -> https://codepen.io/william_bella/project/editor/AxLLKq
  25. Thanks Zach for your response. Working link should be at - https://repl.it/@eest/GSAP-and-Barba-Rules I was wondering whether the problem was with how I was using a GSAP animation. Barba seems to be running ok and the animation is initialising but not showing. It may be a Barba problem in which case it isn't appropriate for the forum. Thanks again Zach.
×