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. Thanks for this. In the end I gave up on Barba. I just couldn't work out how to kill and refresh the scrollTriggers - I could get other js to fire on events but GSAP didn't work for me. I switched over to Swup (https://swup.js.org) - this does what I needed it to do, and I can get scroll trigger to survive the transitions in a predictable way. If you're interested here is the working JS (assuming gsap and swup are already loaded): /*SCROLL TRIGGER*/ gsap.registerPlugin(ScrollTrigger); function boxRoll(){ const boxes = gsap.utils.toArray('.box'); boxes.forEach(box => { gsap.from(box, { scrollTrigger: { trigger: box, toggleActions: "restart pause resume pause", start: "top "+scrubStart+"%", end: "top "+scrubEnd+"%", //markers: true, scrub: 0.5, id: 'boxRoll', }, rotate: 360, x: '50vw', }) }); } function tileFade(){ const tiles = gsap.utils.toArray('.tile'); tiles.forEach(tile => { gsap.from(tile, { scrollTrigger: { id: 'tileFade', trigger: tile, toggleActions: "restart pause resume pause", start: "top 100%", end: "top 75%", scrub: 0.5, //markers: true, //stagger: 1, }, opacity: 0, scale: "random(0.5, 0)", }) }); } /*Swup*/ const swup = new Swup({ //plugins: [new SwupHeadPlugin(), new SwupBodyClassPlugin()] }); swup.on('contentReplaced', function () { window.scrollTo(0, 0); /*GSAP */ boxRoll(); tileFade(); }); /*Seems to work better if these are called after swup*/ boxRoll(); tileFade();
  2. ZachSaucier

    GSAP + SWUP

    Hey blopiblop. I haven't used Swup before but it looks like it does page transitions and has some built in animation support. It looks like you can hook into Swup's events to do your own animations (like GSAP animations) if you want to. So you could do the enter or leave or both animations with GSAP. Or you could use GSAP for all the non-page-transition animations on your page. Or you could use a different tool like Barba which just does the content switching and then hook it up to GSAP for the animation part. Lots of possibilities.
  3. Thanks. I've looked at this. I realize I still wasn't very clear. It appears that barba.js involves ajax and change of actual page urls. All my html is javascript generated on the SAME page. Basically, a function fills a div tag with the page content. When I run the function again, all the content changes. I need to make the div contents 'transition' from the old content to the new content. I have a div: <div id='divContent'></div> I have another div <div id='divTransition'><div> Both are css position:absolute so they can move. I have a <div id='divBackground'></div> which is the 'anchor' and potential image background of the page. The first transition is to be a fade. Basically, the html in divContent fades out, then the html changes and the div fades back in. I feared that the time it takes to fill the content may be noticeable so if needed I could fill divTransition and then do the fade between the 2 divs. I thought this would be easy. So far, I can't do it. The second transition would be the old content slowly moves to the right & off screen while the new content moves right and onto the screen. I haven't tried that one yet.
  4. Less specific help case here and more a general query into how files are structured/organized when doing bigger builds. As of late I've been using the approach provided ya'll folks in my various code pens. I generally keep vars/timeline vars/scrollmagic scenes at the top, then preloader and intro animation, then timelines/media query watcher goodness and lastly misc helpers/stuff. However this has been for single pages with tons of scroll based animations. I've recently figured out how to use barba.js with wordpress and am now trying to figure out best approach to structure all this for multiple pages with animation. I generally am just building eye candy websites and dont use vue, react or angular. Should I just have one massive js file? Should it be broken up into a few different files? Should those files be broken up based on functionality? ie: scroll.js, gsap.js, misc.js, barba.js I will assume like most code related issues there is many ways to skin this cat. Mostly looking to see how the big boys do it and incorporate the parts that make sense to me. Any pointers or suggestions will be greatly appreciated
  5. There have, however, been other discussions here about using Barba in the past, maybe if you search around you'll find something that might be of use? https://greensock.com/forums/search/?page=1&q=barba
  6. Thanks for the feedback Zach! I was able to get it working perfectly with GSAP and Barba hooks but ended up using a different approach.
  7. Hi all, I'm looking to build a fairly simple slider but lack the knowledge to do so, hope someone can point me in the right direction. I have a slider that contains 3 images, and when the page loads I want one of those images (random) to show. Then I want to bind an event (will be a Barba page transition, but could be a button too), that fades out the current image that is showing and fades in another random image. Everytime the event is triggered, the current slide has to fade out and a random other one has to fade in. Is this possible with gsap?
  8. Hello everyone, thanks guys for gsap and all about it. I use barba + locomotive + gsap on my project, i try to destroy all ScrollTriggers with ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); But i have some errors from ScrollerProxy, and i think my code doesnt destroy all ScrollTriggers, especially scrollerProxy. There my code for scrollerProxy, almost duplicate from docs if (scrollContainer) { window.locoInstance.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { return arguments.length ? window.locoInstance.scrollTo(value, 0, 0) : window.locoInstance.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: scrollContainer.style.transform ? 'transform' : 'fixed', }) } There error Uncaught TypeError: Cannot read property 'scroll' of null at ScrollTrigger.scrollTop [as scroll] at _updateAll Sorry for my english, sorry it's not codepen, and if it's something stupid, i just tired and don't know why and how to fix this, thanks
  9. Hi Zach, I have not created any codepen but you can check my demo site here. You can go through the pages from menu to check. http://s784828798.websitehome.co.uk/apnewsite/ I have used Barba js + GSAP + VelocityJS for text animation but not working like i want. I would like the same way on Ouiwill website does. Please let me know if any solution.
  10. Unfortunately that example doesn't help much in regards to your transition problem, because it doesn't include barba. You'd probably have to use something like codesandbox or a codepen project to make a working example. When you enter a new page, do you initiate everything again? (Sorry if that question might sound stupid, but maybe you don't and that would explain it not working) Also, I don't know if that actually is or can be source ofproblems, but you are using GSAP v3.3.4 with ScrolTrigger's latest beta. scrollerProxy was only introduced in GSAP 3.4.0. So maybe try updating those files you load to the most recent version and see if it changes anything.
  11. 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
  12. If you're talking about the full screen transitions when you click links, this looks like a worpress site thas is using animation to load new page content, may be using barba.js or they may have created their own ajax loader, either way as Jack said this type of whole site construction advice would be beyond the scope of this forum. if you search barba.js you'll find several posts that discuss it on the forum. That being said anyone who wants to take it on are welcome to jump in... Happy tweening!
  13. 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
  14. 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
  15. 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.
  16. 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
  17. 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!
  18. 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.
  19. Hi! Not sure if I should ask here on on Barba JS forums, so apologies if this is the wrong place! I'm trying to slightly customise this awesome pen by Blake. I've got it to work how I want but I'm using Barba JS for page transitions. When you click on the box it fills the browser and transitions to the next page. Perfect! On the second page I have these boxes again but when click them the animation no longer works. Is there any way to reset it when you hit the new page. Thanks
  20. 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?!
  21. 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...
  22. Right @mdelp, this is what I manage to get out of my buddy. fadeOut: function () { var deferred = Barba.Utils.deferred(); TweenLite.to('.site-main', 0.4, { onComplete: function () { deferred.resolve(); } }); return deferred.promise; }, And then: fadeOut: function () { var deferred = Barba.Utils.deferred(); TweenLite.to('.barba-container', 0.4, { onComplete: function () { deferred.resolve(); } }); return deferred.promise; }, Whether it works or is of any help, I have no clue. I offer no warranties or endorse this product. I'm just the messenger.
  23. 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).
  24. 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!
  25. 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!
×