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. Hi, What is the best practice for gsap with barba ? Should I kill gsap annim on beforeEnter hook ? Thanks, Best regards
  2. Hi everyone, So i'm using gsap splittext plugin to split sentence into words and lines and then animating words. Everything works fine on first load of a page but when i'm navigating to different page and then get back something weird happens and sentence breaks only on last word. We are using gsap with barba js. Here is the demo of a problem, also i tried to replicate problem on codepen but it is lot of work to integrate barba there to make it more accurate. Screen Recording 2021-08-17 at 12.23.45.mov Here is how it looks when it's inspected Sometimes it works as expected, but most of the time it breaks and breaks
  3. 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.
  4. Sigh! I too walked on this path of "I am new to JS but I am having problems using Barba + GSAP" My 2 cents! STOP! Don't start with JS+GSAP+Barba. Start instead with JS, understand it's simple concepts, arrays, objects, scope etc ( I am still learning this btw ) Then afterwards it will become MUCH MUCH easier solving problems which arise after integrating 3rd party libraries. With nothing but love Fellow Newbie
  5. Hello Paul, this really is more about how barba works and less related to GSAP - so you might want to consider taking a deeper dive into barba. This here is a nice tutorial that should help understand some things better: https://waelyasmina.com/barba-js-v2-tutorial-for-total-beginners/ Adding a minimal demo is always helpful, even if you think that you are 99% there - with libraries like barba things can become quite complex rather quick - so if you are asking somebody else to give you some help, it would be great to provide them with the tools for being able to offer that help. I created a project for you over on stackblitz with the code provided by @ihatetomatoes For triggereing an animation / setting up ScrollTriggers on page load, you will need to do so either in your 'load' function (where the init() happens) or you could use barbas 'once' hook , if I am not mistaken. In the example I did it in the function on 'load'. If you want to trigger animations / create ScrolTriggers after transitions, you will need to do so in the respective 'hooks' provided by barba (or if you need to do specific things for specific pages only, in the 'views') - or alternatively in an onComplete callback of that loaderAway animation if you want the transition to be complete before you trigger any animation - so it would be best to work with re-useable functions. In this example I used the onComplete callback of the loaderAway tween to trigger a tween on the headline after the page transition is finished completely and I used the after hook provided by barba to set up a ScrollTrigger for the footer. For ScrollTriggers it is also important to kill off the old ones before creating the new, so I added that to the afterLeave hook provided by barba here. I hope all this will help a bit. https://stackblitz.com/edit/web-platform-j6l93d
  6. function init(){ const loader = document.querySelector('.loader'); // reset position of the loading screen gsap.set(loader, { scaleX: 0, rotation: 0, xPercent: -5, yPercent: -50, transformOrigin: 'left center', autoAlpha: 1 }); function loaderIn() { // GSAP tween to strech the loading screen across the whole screen return gsap.fromTo(loader, { rotation: 0, scaleX: 0, xPercent: -5 }, { duration: 0.5, xPercent: 0, scaleX: 1, rotation: 0, ease: 'Power4.inOut', transformOrigin: 'left center' }); } function loaderAway() { // GSAP tween to hide loading screen return gsap.to(loader, { duration: 0.5, scaleX: 0, xPercent: 0, rotation: 0, transformOrigin: 'right center', ease: 'Power4.inOut' }); } // do something before the transition starts barba.hooks.before(() => { document.querySelector('html').classList.add('is-transitioning'); barba.wrapper.classList.add('is-animating'); }); // do something after the transition finishes barba.hooks.after(() => { document.querySelector('html').classList.remove('is-transitioning'); barba.wrapper.classList.remove('is-animating'); ga('set', 'page', window.location.pathname); ga('send', 'pageview'); }); // scroll to the top of the page barba.hooks.enter(() => { window.scrollTo(0, 0); }); barba.init({ transitions: [{ async leave() { await loaderIn(); }, enter() { loaderAway(); } }] }) } window.addEventListener('load', function(){ init(); });
  7. Thanks a million for taking the time to respond... I have spent this afternoon 'trial and erroring' barba based on what you sent but still no cigar... the whole transition i have on my site works as it should do... infact it looks great... its just the bit where the animations don't play once entering the new page after transition. I noticed in your GSAP you included .then(resolve()); which i thought fixed the problem... the transitions work, the animations work... but the link doesnt go anywhere, just stays on the page I am on... Maybe I am out of my depth with GSAP... I am so close I don't want to give up on it as it does exactly what I want... I am 99% there! eeek!
  8. Hey! Thanks so much for your quick response... I would happily set up a demo to help get to the bottom of this but this: could be what I am after. The site loads up perfect I then click a button to reveal a Barba transition to another page. However all the animations on the revealed page are frozen and I (think) need a command in either the Barba code or a GSAP command to PLAY these animation once the transition to the new page has been made. I seems a super simple fix, but my coding is basic. I hope this is clear and maybe @Ihatetomatoes could point me in the direction as I think it might be a Barba thing as opposed to a GSAP thing. I don't want to give up yet! I am literally using this exact code.. https://ihatetomatoes.net/demos/page-transitions-tutorial-with-gsap/ But imagine each page in this demo has animations on it... they WON'T play after each transition. I hate to be a burden to people but I feel I can really crack on once I have this part of my project solved. Enjoy the rest of your weekend
  9. Hi @pauljamiekidd. Thanks for being a Club member! I didn't quite understand your question - did you have a GSAP-specific question? I'm not at all familiar with Barba.js and you're correct about us not supporting 3rd party libraries - are you asking about lifecycle events in Barba where you'd have to put your GSAP code to have it fire when the page finishes loading or something? If you still need help, please make sure you provide a minimal demo like on CodeSandbox or something. It's super difficult to troubleshoot blind
  10. Hey Guys! Great work with GSAP... I have recently installed @Ihatetomatoes's Barba on my site (kinda sucessfully) After each transition the the resulting animations dont work... as a noob to GSAP and Barba, I am probably missing a piece of code to play animations on page load... this is the bit I am stuck with... I know you dont offer 3rd party support, but I think this may be a simple GSAP fix... I can see there are (barba) hooks to return to the top of the page once the page has loaded, is there one for PLAY animations / Scrolltrigger once page is loaded... Barba has seeming broke my site, but I am not giving up on it... any help would be MORE than appreciated...
  11. Hi @japgroevemaker I moved your thread to the GSAP forum as it's not Banner related. It's hard to say what is wrong as we don't provide support for third party tools like Barba, and it's even harder to say what the issue is without a working demo we can play with. Have you searched the forum for Barba questions, maybe some of these can help you out?
  12. Hi guys I am new to Greensock and recently I have created a template website using both gsap and barba js. The full code can be found in https://github.com/kitsonchan/template_architecture and you can also view the website directly here https://kitsonchan.github.io/template_architecture/. So now the problem that I have been struggling with is the timeline that was using scrolltrigger. In both of my page Ihave a timeline called tlStage1 and tlStage2. The tlStage1 works completely fine at all conditions but I don't know why tlStage2 only works when you refresh the page. I am not sure if the issue is related to barba js lol so i decide to ask here. Thanks!
  13. Hello Devs, Please someone to kindly help edit this fade in and out code, to slide up and down or swipe left or right page transitions with Gsap + Barba js here's my code. // Animation - Transition function pageTransition() { var tl = gsap.timeline(); tl.to(".main-fade", { duration: .4, ease: "Power0.easeNone", opacity: "0" }); tl.set(".main-fade", { y: 0, opacity: "1" }); tl.set(".loading-screen", { opacity: 0 }); } thanks
  14. Apologies in advance for the question that is more related to Barba.js than GSAP but you guys always point me in the right direction. I have researched different methods, but my JS knowledge is limited so I am not sure on what strategy to use. I want to do a simple page transition between two pages with separate JS files that have many GSAP timelines and event listeners. Ideally I would like to use the views / beforeEnter hook to re initialise my JS scripts, but I don't know how to do this. Or do I need to break up my JS files into functions and call them using hooks; I also have different JS files for mobile version so if it is possible to on page transition to load / run my JS files that would be ideal. barba.init({ views:[ { namespace: 'detail', beforeEnter(){ } } ], transitions: [ { name: 'general-transition-opacityfade', once({next}){ animationEnter(next.container) }, leave: ({current}) => animationLeave(current.container), enter({next}){ animationEnter(next.container); } }, { name: 'detail', to:{ namespace:['detail'] }, once({next}){ navigation1(next.container) }, leave: ({current}) => animationLeave(current.container), enter({next}){ navigation1(next.container); navin2(next.container); navin3(next.container); } } ] })
  15. Here's an example: https://www.azzerad.com/ For a month I've been trying to learn how to do nice page transitions which look seamless like on the page above. I am using the SPA framework Nuxt.js which has a lot of stuff for this kind of transition. However, I was never successful in utilizing it perfectly. Either my content loads way too fast and the curtain effect is not there or the routing doesn't work the way I want. I tried vue's navigation guards, nuxt loader component but without a good result. Of course, for animations, I use GSAP which should help the transitioning between pages easier. Let's say I click on the link, transition in the curtain, load the content behind and then transition out. This should be doable with the timeline I believe. Does anybody know how to nail this kind of page transition? I took a look at barba.js but that is basically the same as vue's transition hooks but still, I can't use it properly for the curtain.
  16. Hi guys, I have a generall question while starting to use GSAP with barba. I wonder if someone of you could bring light into my JS-darkness at this early point. I am trying to find a solid basic setup with both of the libraries together. barba.init({ views: [{ namespace: 'home', afterEnter(data) { initTimeline1(data.next.container); initTimeline2(data.next.container); initTriggeredTween(data.next.container); }, }] }); const initTimeline1 = (next) => { const tl = gsap.timeline({}) .to(next.querySelector('el1'),{'GSAP MAGIC'}) return tl } const initTimeline2 = (next) => { const tl = gsap.timeline({scrollTrigger:{}}) .to(next.querySelector('el2'),{'GSAP MAGIC'}) return tl } const initTriggeredTween = (next) => { next.querySelector('el3').addEventListener('click', () => { gsap.to(next.querySelector('targetEl'),{'GSAP MAGIC'}) }) } barba.hooks.beforeEnter( () => { ScrollTrigger.getAll().forEach(trigger => { trigger.kill() }); ScrollTrigger.refresh(true) } ) I leaned so far, that I have to kill the ScrollTriggers, because things dont work, if I return to the page with namespace"home". But if I reinititate the timelines, tweens and events again and again I am wondering if I am causing a memory leaks. Do I have to kill, remove, destroy all of them manually or does the garbage collection take care of things by itself? And if I have to manage the things, are there similar support functions like ScrollTrigger.getAll() for helping me out? I just read, that killAll is deprecated. Sorry for my English, and the question which may be a little off topic. Many thanks in advance
  17. Here is the link - https://cdpn.io/elsueno/project/editor/XmqJWg Here I'm working on the footer parallax effect from this example - If I apply Barba.js and click navigation "Home", "about" & "Product" then the footer gsap parallax effect as per the link not working properly because Barba not reloading the page and content for the inner page is less compare to the home page. Barba hooks are not handy in this situation because the footer is not included in the Barba container. Can you guys help me?
  18. Sure, you can rewrite it with gsap 3, check migration guide The similar examples you can find by chosing filter by Technologies on awwwards site, chose Barba.js, GSAP Animation, Highway.js... filters
  19. @Jloafs I stumbled across this thread as I was having a similar issue. So what solved the issue for me was having an init() function run on both page load and the after hook. In this init function give each scrollTrigger an id relative to the section or functionality store those ids in an array then using the before hook loop through each id using `ScrollTrigger.getById(id)` and then run the kill() function Not tested the below code but should help understand what fixed my issue gsap.registerPlugin(ScrollTrigger); const prefix = 'className'; let triggerIDs; init(); function init() { const sections = document.querySelectorAll('sections'); triggerIDs = []; sections.forEach(function(element, index) { const ID = prefix + '__' + index; const tl = gsap.timeline({ scrollTrigger: { id: ID, markers: true, trigger: element, }, }) triggerIDs.push(ID) }); } barba.hooks.beforeLeave((data) => { triggerIDs.forEach(function(id) { ScrollTrigger.getById(id).kill(); }); }); barba.hooks.after((data) => { init(); });
  20. Hey all. I have a Barba with GSAP setup for my website. Everything works fine. The navigation on my site also works as intended initially but stops animating suddenly after i navigate to 2 to 3 pages. I am not sure why this is happening. Heres a demo link. http://fingerprints.co.in/protectmyphone/ (Try to navigate to 2 to 3 pages) The text in the menu will stop animating suddenly. Requesting some help in this as i am new to barba and GSAP. Thank you. Burger menu animation code: function pageTransition() { // Toggle Icone hamburger $(document).ready(function () { $('.barres').click(function () { $('.barres').toggleClass('active'); }) }) // Greensock Animations var timeline = new TimelineMax(); timeline.to(".menu", 0.8, { left: '0%', ease: Expo.easeInOut, delay: 0 }); timeline.staggerFrom(".menu ul li", 0.3, { x: -100, opacity: 0 }, 0.1); timeline.reverse(); $(document).on('click', '.barres', function () { timeline.play(); }); $(document).on('click', 'a', function () { timeline.reverse(); $('.barres').toggleClass('active'); }) } Barba setup: barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); data.current.container.remove(); pageTransition(); await delay(1000); done(); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach(t => t.kill()); }, async enter(data) { contentAnimation(); }, async once(data) { contentAnimation(); }, }, ], }); barba.hooks.enter(() => { window.scrollTo(0, 0); });
  21. Hello, I write in the hope of finding a solution to my problem. I am running a website using Gsap (ScrollTrigger), Barba.Js, LocomotiveScroll. Basically when I perform the first page load, the trigger is well positioned (in the middle of the page as in the first image in attached) and everything works perfectly. The problem comes when I change the page (whatever it is). I don't know why the trigger (I use the first navbar as an example, but consequently they all have the same problem) have an offset (see second image). I extrapolate the part of the code that I think (probably) needs to be revised. // NAVBAR function gsapAnim(){ const bg = gsap.timeline({ scrollTrigger: { trigger: "#HPTrigger", scroller: ".smooth-scroll", start: "center top", end: "bottom top", duration: 1, ease: "power4.out", toggleActions: 'play none reverse none', markers: true } }); bg.to(".bg-navbar", {backgroundColor:"rgba(255,255,255,1)"},0); bg.to(".leftline", {borderLeft:"1px solid rgba(230,230,230,1)"},0); bg.to(".rightline", {borderRight:"1px solid rgba(230,230,230,1)"},0); bg.to(".bottomline", {borderBottom:"1px solid rgba(230,230,230,1)"},0); bg.to(".nav-link", {color:"rgba(0,0,0,1)"},0); bg.to(".icon-bar", {backgroundColor:"rgba(0,0,0,1)"},0); } // TRANSITION AND UPDATE function pageTransitionIn({container}) { const tl = gsap.timeline({ defaults: { duration: 1, ease: 'power2.inOut' } }); tl .set(loaderInner, { autoAlpha: 0 }) .fromTo(loader, { yPercent: 100 }, {yPercent: 0 }) .fromTo(loaderMask, { yPercent: -80 }, {yPercent: 0 }, 0) .fromTo(transitionText, {autoAlpha:0},{autoAlpha:1},0.25) .to(container, { y: -150}, 0); return tl; } function pageTransitionOut({container}) { const tl = gsap.timeline({ defaults: { duration: 1, ease: 'power2.inOut' }, // PROBABLY HERE IS THE PROBLEM onStart: () => { window.scrollTo(0, 0); initScript(); } }); tl .to(loader, { yPercent: -100 }) .to(loaderMask, { yPercent: 80 }, 0) .to(transitionText,{autoAlpha:0},0) .fromTo(".comparsa", {y: 100, opacity: 0,},{y: 0, opacity: 1, ease: "power4.out", duration: 3},0.5) .to(".text", { y: "0%", opacity: 1, duration: 2, ease: "power2.out"},0.5) .from(container, { y: 150}, 0); return tl; } // BARBA JS PART function initPageTransitions() { barba.init({ sync:true, /* debug: true, */ /* timeout:7000, */ transitions: [{ name: 'overlay-transition', once(data) { // do something once on the initial page load initSmoothScroll(data.next.container); initLoader(); }, async leave(data) { // animate loading screen in pageTransitionIn(data.current); await delay(1000); data.current.container.remove(); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach(tl => tl.kill()); scroll.destroy(); initSmoothScroll(data.next.container); await delay(1000); }, async enter(data) { // animate loading screen away pageTransitionOut(data.next); } }] }); } The integration of the 3 libraries I think I did it well, so I don't think the problem is with Barba or LS. It is as if there is a problem resetting the trigger. I hope that any solution to this problem will be of help to other people as well. Thanks in advance.
  22. Hi,

     

    I have used Barba js(latest) in my wordpress website but when page changes the header and video & other elements not showing full. Also the tabs and some elements not working properly.

     

    Can you please help.

     

    Thanks,

    J

  23. Hi all, I'm building a site that uses Barba.js to handle the page transitions. All is going well but I'm running into a small issue with my navigation timeline that only works on first page load. After I navigate to another page the barba transitions fire and the new page loads, but my timeline seems to stop working after that. I've included the important parts of the code I use, I suspect I need to set the reversed state of the timeline somewhere inside the Barba function, but after trying different approaches I still haven't found the solution. Update: reworked the Barba code based on their v2 version. All help is appreciated!
  24. 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
  25. 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(); }, } }); }); });
×