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. Hey @neo420 It's always kind of hard to give any good advice without an example - especially with the combination of barba and other libraries. My guess is, that you will probably have to kill/destroy both, your ScrollTriggers AND locomotive-scroll when leaving a page, and reinitialize both after your transition. So first off, locomotive-scroll gets knwoledge of the new environment it is supposed to be working in, and then your ScrollTriggers get that same information and can also adjust to locomotive-scroll. A good way to kill all your ScrollTriggers is this let triggers = ScrollTrigger.getAll(); triggers.forEach( trigger => { trigger.kill(); }); Locomotive-scroll has a .destroy method of its own. Give it a try and see if it helps. Cheers, Paul
  2. Hey @Sanady - welcome to the forums. That most likely is related to how things work with barba. Whenever you transition between pages, barba gets rid off the old content and adds in new content. My guess would be that you init your scrollTo function only once on page load. That would result in it only knowing the contents that are in place at that time and none of the contents that will be added in later on. Thus it has nothing to relate to after you transitioned and things result in errors. You'd probably have to wrap your scrollTo-functionality inside a function, and init that function in a barba hook every time you enter a new page (and best, also destroy it in some way for the old content when leaving a page). Hope this helps. Cheers, Paul
  3. Im use barba first time, and i think my scripts failed w/o errors on console, and locomotive doesnt destroy because script failed before destroy, and I get some scrollTrigger errors, and think I need destroy locomotive scroll and scrollerProxy, thank you for help, i'm just confused, but now I found reasons why I get this errors
  4. I'm not sure, how i can use barba on codepen, where shoul redirect links, but i don't ask for debug, main question its how i can fully destroy script for scrollerProxy
  5. Hi, everyone! I am new to gsap. I am trying to get my scrollTrigger animation to work with gsap. Take a look at my demo: https://codepen.io/Ollymolly/project/editor/AOxzmn I have everything working fine except one. As you will see in the code, I am trying to put a scale animation on the headline. I put it all right, but nothing works. And I got the idea that I didn't connect scrollProxy correctly. Any ideas how to fix it? I have a great barba js with smoothScroll. But somehow scrollTrigger.... does not work with them.
  6. This way you would only be creating new instances over and over again, whenever you transition between pages - because you never kill or destroy the old instances - the same goes for the smooth-scrollbar in your initial demo. For killing off old ScrollTriggers you could use a function that contains this let triggers = ScrollTrigger.getAll(); triggers.forEach( trigger => { trigger.kill(); }); preferably in a global hook of barba. A way to destroy the old smooth-scrollbar could be to use Scrollbar.destroy(scrollBar); alongside my example of how to set it up in the first place. I personally use the beforeEnter global-hook to destroy old instances (because in the following enter-hook I remove the current.container of barba) and the afterEnter global hook to initiate new instances barba.hooks.beforeEnter(({ current, next }) => { var beforeEnterPromiseAll = new Promise(function (resolve) { killOldScrollTriggers(); destroySmoothScrollbar(); resolve(); }); return beforeEnterPromiseAll; }); barba.hooks.enter(({ current, next }) => { var enterPromiseAll = new Promise(function (resolve) { current.container.remove(); resolve(); }); return enterPromiseAll; }); barba.hooks.afterEnter(({ current, next }) => { var afterEnterPromiseAll = new Promise(function (resolve) { initSmoothScrollbar(); initScrollTriggers(); resolve(); }); return afterEnterPromiseAll; }); Depending on your set-up and how exactly you want things to work, you'd have to find a way of your own for this. There is no real one-type-fits-all solution. If you search the forum for 'barba' you will find quite a few other recent threads on that topic.
  7. thank you for the answer. But unfortunately in your demo version, there is no barba shell. I thought I did the right thing. I have been reading the barba js forum for a long time and I understand how it works. I saw that I had to delete the scripts and initialize them, that's what I did with smoothScrollbar. In my version I re-run smoothScrollbar when I go from one page to another. And I thought to do it by analogy with scrollTrigger.... maybe I did not initialize it correctly. It's just strange, I couldn't find the code to reinitialize on the official barba.js website in the documentation... I'll look more closely
  8. Hey @OlgaKondr - welcome to the forums. There is a whole lot of things to keep in mind, when combining all of these libraries together. None of what you are experiencing is actually related to GSAP or ScrollTrigger itself - just to the way things need to be set up with smooth-scrollbar or barba. First off, you should iniate your Smooth-Scrollbar, before setting up your ScrollTriggers. Second, I would recommend putting your #viewport for your smooth-scrollbar inside of your data-barba="container" because Third, you will have to re-initialize every script you want to run (flawlessly) on a certain page, after barba has transitioned. Thus, before the transition you will have to kill of your old ScrollTriggers and/or GSAP-Animations, and re-initiate them after the transition for the new page (ideally the same applies for your smooth-scrollbar, too, if you want it to work flawlessly). That is because barba removes everything inside the old container and puts the contents of the new container in the old's place, so ScrollTrigger needs to calculate things for the new page layout. On a further note, it is best to initiate your smooth-scrollbar like this scrollBar = document.getElementById('viewport'); bodyScrollBar = Scrollbar.init(scrollBar, { damping: 0.07 }); See this example of your demo for the use of smooth-scrollbar together with ScrollTrigger https://codepen.io/akapowl/pen/079a512ae9e9030aceb7388d007ee5f2 Before using libraries like these, especially when it is several together, I highly recommend thoroughly inspecting the documentations of those, and trying to understand, how things work. Otherwise you will run into a whle lot of problems further down the road. Hope this helps a bit. Paul
  9. 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
  10. 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!
  11. 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
  12. 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.
  13. 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.
  14. 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.
  15. 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?!
  16. 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...
  17. 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).
  18. 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!
  19. 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
  20. 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!
  21. 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
  22. 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!
  23. 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
  24. Would React users need Barba.js though when they can instead use React Router ? https://www.google.com/search?q=react+gsap+page+transitions
  25. 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
×