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. Welcome to the GSAP forums @gn90 Sure, wrapping all you need to re-setup in a function and call that function in a barba hook / view on / after enter, sort of like in the stackblitz example linked below, should actually work. Additionaly you will have to make sure though, to kill any old ScrollTriggers when/after leaving a page and probably also remove any eventListeners, too. The latter you will also have to add again alongside your STs then, when entering a new page. https://stackblitz.com/edit/web-platform-j6l93d?file=js%2Fmain.js For animations to be triggered in fake-horizontal-scrolling scenarios as such, you will want to have a look at the containerAnimation property (and for tying it to the scroll an additional look at scrub). This piece on containerAnimation is from the docs: containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a demo here and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. I hope that'll help a bit. Happy tweening
  2. Hi, i am quite new to GSAP but i love it so far. I build a small horizontal scrolling dummy where everything works fine. My page transitions are made with the help of barba.js. But as soon my new content is loaded my Scrolltrigger breaks and now it scrolls vertically. I tried to call the getMaxWidth function and initiate the ScrollTween again as soon the new content is loaded but now its not scrolling in any direction. Is there any solution to recreate the Scrolltrigger when a new page is loaded? The page transition in codepen doesnt work because i cant create a second page. (enter function of barba where i try to initiate the gsap stuff again is on line 102) And another question down the line: Is it possible to animate the whole text (like a fadeout) as soon as i scroll to the right side and fade it in as soon as i come back? maybe the opacity based on the scrollposition. Thanks in advanced, Guillermo
  3. If you can set up a minimal demo an there is anything directly related to GSAP we can help you with, we'll be glad to try and do so. For things to work with barba, you will have to either create a project on codepen (regular pens won't work with barba) or use another platform like codesandbox or stackblitz. This here is a rather minimal demo that I recently made on stackblitz for another thread. Maybe you can fork and edit that one. https://stackblitz.com/edit/web-platform-j6l93d
  4. //Barba Page Transitions barba.init({ views: [ { namespace: 'home', afterEnter() { links.forEach((link) => { link.style.color = '#fefefe'; }); copywright.style.color = '#fefefe'; linkHarpreetLI.style.flex = '0'; linkWorkLI.style.flex = '1'; linkCollab.textContent = 'Collab'; linkProjects.textContent = 'projects'; linkHarpreet.href = '../aboutme/aboutme.html'; animateSlides(); cursorAnimate(); }, beforeLeave() { ScrollTrigger.refresh(true); }, }, { namespace: 'projects', afterEnter() { //CHANGE COLOR links.forEach((link) => { link.style.color = '#000'; }); copywright.style.color = '#000'; //CHANGE HREF linkHarpreet.href = '../aboutme/aboutme.html'; linkWork.href = '../index.html'; linkCollab.href = '../collab/collab.html'; linkStar.style.fill = '#000'; //CHANGE STYLE // linkHarpreetLI.style.flex = '1'; // linkWorkLI.style.flex = '1'; linkCollab.textContent = 'Collab'; linkProjects.textContent = ''; featuredProjects(); cursorAnimate(); }, }, { namespace: 'collab', afterEnter() { links.forEach((link) => { link.style.color = '#000'; }); copywright.style.color = '#000'; linkHarpreet.href = '../aboutme/aboutme.html'; linkWork.href = '../index.html'; linkProjects.href = '../projects/project.html'; linkStar.style.fill = '#000'; linkCollab.textContent = ''; linkHarpreetLI.style.flex = '2'; linkWorkLI.style.flex = '0'; linkProjects.textContent = 'projects'; animateCollab(); cursorAnimate(); }, beforeLeave() {}, }, { namespace: 'about', afterEnter() { links.forEach((link) => { link.style.color = '#fff'; }); linkHarpreet.href = '../index.html'; linkCollab.textContent = 'Collab'; linkCollab.href = '../collab/collab.html'; linkProjects.href = '../projects/project.html'; linkProjects.textContent = 'projects'; linkStar.style.fill = '#cbd5e1'; linkWork.href = '../index.html'; animateAboutMe(); cursorAnimate(); }, }, ], transitions: [ { leave({ current, next }) { let done = this.async(); //An Animation const tl = gsap.timeline({ defaults: { ease: 'power2.inOut' } }); tl.fromTo( '.wrapper', 1, { y: '0%' }, { y: '-100%', ease: 'power2.inOut' } ); tl.fromTo(current.container, 1, { opacity: 1 }, { opacity: 0 }); tl.fromTo( '.slider', 0.75, { x: '-100%' }, { x: '0%', onComplete: done }, '-=0.5' ); }, enter({ current, next }) { let done = this.async(); //Scroll to the top window.scrollTo(0, 0); //An Animation const tl = gsap.timeline({ defaults: { ease: 'power2.inOut' } }); tl.fromTo( '.slider', 1, { x: '0%' }, { x: '100%', stagger: 0.2, onComplete: done } ); tl.fromTo(next.container, 1, { opacity: 0 }, { opacity: 1 }); tl.fromTo( '.wrapper', 1, { y: '-100%' }, { y: '0%', ease: 'power2.inOut' } ); }, }, ], });
  5. IT WORKS !! thanks a lot man, i tried it and it works, and what matters is now i unsterstand more the barba lifcycle! the next container should be cleared after the flip work is done... now i need to fix the zIndex of the img element, i want it to be on top of everything... thanks again.
  6. Hello Ali, I tinkered around with your code a bit, and I don't think any of what you are experiencing is related to GSAP but rather to the logic of how barba works and your code having some flaws with regard to that, the following being the biggest I think: When both containers are in the DOM at the same time, they are not stacked above each other on the z-axis but rather like this ...which you can test by logging out their .offsetTop first thing in the enter-hook e.g. Here's how I see it: Since you are not waiting for a promise to be fulfilled in the enter-hook, barbas lifecycle will continue the moment your tween starts, but in between the afterEnter and the after hooks of barba, the current-container will be removed... [ that image is from the barba docs, but also to be found in this very helpful tutorial: ] [ https://waelyasmina.com/barba-js-v2-tutorial-for-total-beginners/ ] ...thus there will be a layout shift in the DOM. So the values that you recorded by getting the state of the image before the tween started will probably not be correct anymore just a moment later. Although I used bit of a different logic than you did, I got it to work with one of the key-elements being setting the next-container to position fixed (and aditionaly inset 0 and zIndex -1) and in the onComplete callback of the tween, clearing it again. gsap.set(next.container, { position: "fixed", inset: "0", zIndex: "-1" }) I'm not sure how much that will help you, but you can try tinkering with your code with the afore-mentioned in mind and see where it gets you. I hope that will help a bit though.
  7. Hello everyone, I faced a problem using gsap Flip plugin, in the leavebarba hoook works fine, also when i leave the home page, but after a page transition from about page to home, something doesnt work properly, the item moves from the original container to a different postion from the desired container... i tried a lot of solutions, using barba global hooks, also the async await, i used the flip.fit and also the flip.to, and i read the answers in this forum about this topic, honestly nothing worked for me. here is a github link of the project: https://github.com/Ali-Dakoumi/Page-Transition-Gsap-Flip-Plugin you can see it live here : https://ali-dakoumi.github.io/Page-Transition-Gsap-Flip-Plugin/about.html the leaving home animation works fine, But after leaving the about page with a simple fade out animation, the problem is when i used a flip animation while entering home, it doesnt work... const leavingHome = (container) => { const state = Flip.getState(about); about.classList.add("bigimage"); return Flip.fit(about, ".fullscreen", { duration: 3, ease: Expo.easeInOut, absolute: true, clearProps: "all", }); }; barba.init({ debug: true, sync: true, transitions: [ { name: "from-home-transition", to: { namespace: ["about"], }, async leave({ current }) { const hometitle = document.querySelector(".hometitle"); const infos = document.querySelectorAll(".info"); const img = document.querySelector(".item > img"); const tl = gsap.timeline(); await tl.to(hometitle, 0.5, { opacity: 0 }).to( infos, 0.5, { opacity: 0, }, "-=0.5" ); await leavingHome(current.container); }, enter({ next }) { enterAnimation(next.container, 0); }, }, { name: "to-home-transition", to: { namespace: ["home"], }, async leave({ current }) { await leaveAnimationAbout(current.container); }, enter({ next }) { const fullscreen = document.querySelector(".fullscreen"); const item = document.querySelector(".item"); const img = document.querySelector(".img"); gsap.to(next.container, 0, { opacity: 1, }); const newstate = Flip.getState(img); (img.parentNode === item ? fullscreen : item).appendChild(img); Flip.to(newstate, { duration: 1, ease: "power1.inOut", delay: 1, absolute: true, }); }, }, ], });
  8. Hello folks, I was using the library Locomotive-Scroll with Barba js and Scrolltrigger proxy. But I saw the latest release of GSAP and it seems that the new ScrollSmoother plugin can correct a lot of problem I have (especially on safari IOS because Locomotive can't handle smooth : true for mobile). Unfortunately, I am struggling making things work. I set the following structure in my HTML : <body data-barba="wrapper"> <div id="smooth-wrapper"> <!-- fix content (not reinjected by barba) --> <main id="smooth-content"> <!-- I tried to invert smooth-content with barba container bu it results the same --> <div data-barba="container" data-barba-namespace="home"> </div> </main> </div> <script type="module" src="./js/main.js"></script> <!-- script where I create instance for ScrollSmoother --> </body> I have this error message : Invalid property – "overscrollBehavior" – "set to" – "none" – "Missing plugin? gsap.registerPlugin()" at load and the browser is lagging a lot. I didn't set CSS Plugin in my main.js (I tried) but I still have the issue. In the Main JS file I set: import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import SplitText from "gsap/SplitText"; import ScrollSmoother from "gsap/ScrollSmoother"; import ScrollToPlugin from "gsap/ScrollToPlugin"; gsap.registerPlugin(ScrollTrigger, SplitText, ScrollSmoother, ScrollToPlugin); If you have an idea, I would be super happy. And thank you in advance !!
  9. 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
  10. 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
  11. 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(); });
  12. 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!
  13. 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
  14. 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
  15. 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...
  16. 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?
  17. Hello everybody, I'm facing a problem with my scrolltrigger. I made an horizontal scroll with scrolltrigger with pin true, but when i navigate to the page with barba my pin breaks. It looks like it is breaking through my pin. When i refresh the page it is working as expected. I don't know how to create an codepen using barba so i hope that i'm clear enough. I'm attaching some images that shows my problem. When i navigate: When i refresh: I've tried to kill al my scrolltriggers and re-init them again, but nothing seems to solve my problem. I hope somebody can help me. function initTimeline() { var main = gsap.timeline({ scrollTrigger: { trigger: container, snap: 1 / (items.length - 1), start: "top top", end: "+=" + (totalWidth / (items.length - 1)).toString(), scrub: 1, pin: true, invalidateOnRefresh: true, } }) } // adding items to timeline main.to(items, { xPercent: -100 * (items.length - 1), ease: "none", }); // Kill scrolltriggers in beforeLeave barba hook barba.hooks.beforeLeave(() => { ScrollTrigger.getAll().forEach(tl => tl.kill()); }) //Re-init scrolltrigger in after hook barba.hooks.after(initTimeline); Thanks in advance! Cheers
  18. 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.
  19. 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
  20. @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(); });
  21. Welcome to the forums, @COG Digital. It's pretty tough for us to troubleshoot without a minimal demo. This kinda sounds like it might a Barba issue, like you're not tapping into its lifecycle events properly so that your GSAP code runs when the corresponding elements exist but I'm not sure at all. Once we see a minimal demo, perhaps we'll have more insight. Did you add a console.log() right where your tweens are supposed to be firing just to make absolutely sure that they're even getting executed?
  22. Hi, I've added the below scripts to the header.php file of our website. <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js id='gsap-js'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollToPlugin.min.js' id='gsap-scroll-js'></script> <script type='text/javascript' src="https://unpkg.com/@barba/core"></script> My HTML and JS is below. I can console.log out from within the functions so I know they're loading however the GSAP does not seem to be. I'm also not getting any errors in console. The website is on wordpress divi theme if this is any help. <div id="intro"> <section class="video-panel" data-section="creative" data-permalink="#" style="right: 50%;"> <div class="video-holder"> <video class="overview-reel" playinline="" loop="" muted="" autplay="" preload="auto" src="/wp-content/uploads/2021/11/2.mp4"> </video> <h1> <span>Projects</span> </h1> </div> </section> <section class="video-panel" data-section="solutions" data-permalink="#"> <div class="video-holder"> <video class="overview-reel" playinline="" loop="" muted="" autplay="" preload="auto" src="/wp-content/uploads/2021/11/2.mp4"> </video> <h1> <span>Client Services</span> </h1> </div> </section> </div> gsap.registerPlugin(ScrollToPlugin); window.addEventListener("load", function(e) { (function onIntroLeave(e) { gsap.to('#intro .video-panel[data-section="creative"]', { duration: 0.5, right: '50%', ease: "power3.out" }) }) (function onIntroHover(e) { var per = (e.pageX - window.innerWidth / 2) / (window.innerWidth * 2); var dir = Math.min(1, Math.max(-1, e.pageX - window.innerWidth / 2)); var pow = Math.pow(per * 5.5, 2); var right = Math.min(100, Math.max(0, 50 + (50 * pow * dir))) + '%'; gsap.to('#intro .video-panel[data-section="creative"]', { duration: 0.5, right: right, ease: "power3.out" }) }) (function onIntroClick(e) { intro.removeEventListener('mousemove', onIntroHover); var section = this.dataset.section; var permalink = this.dataset.permalink; if (section === 'creative') { var headerX = '-3em' var right = '0%' var otherVideo = intro.querySelector('.video-panel[data-section="solutions"] video') } else { var headerX = '3em' var right = '100%' var otherVideo = intro.querySelector('.video-panel[data-section="creative"] video') } otherVideo.pause() barba.prefetch('/' + section) gsap.to('#intro .video-panel[data-section="creative"]', { duration: 0.5, right: right, ease: "power3.inOut" }) gsap.to('#intro .video-panel[data-section="' + section + '"] video', { duration: 0.5, width: '100vw', height: '100vh', ease: "power3.inOut" }) var circle = gsap.to('#intro .video-panel[data-section="' + section + '"] video', { duration: 1, css: { clipPath: 'ellipse(101vw 101vw)' }, ease: "power3.inOut" }) gsap.to('#intro .video-panel[data-section="' + section + '"] h2', { duration: 0.5, x: headerX, ease: "power3.inOut" }) circle.eventCallback('onComplete', openPage, [section, permalink]) }) // (function videoLoaded() { // vLoaded++; // if (vLoaded === vCount) { // introLoaded(); // pageLoaded(); // } // }) }); Thanks
  23. Hi @GNSNTG. Welcome to the forums. It looks like you're using 2 other 3rd party libraries (LocomotiveScroll and Barba.js) - those aren't GreenSock products so we can't really support them here but if you're dynamically loading content into the same page (so it's not actually refreshing the page and going to a new URL that runs the code from the start), make sure you .kill() all your old ScrollTriggers/animations first and then create the new ones and call ScrollTrigger.refresh() to force it to re-calculate all the start/end trigger positions once things are fully loaded and rendered to the screen. If you want to kill ALL of the ScrollTriggers, you can do that like ScrollTrigger.getAll().forEach(t => t.kill()); If you still need help, please provide a minimal demo, hopefully with no 3rd party libraries. But if you do use 3rd party libraries, don't include your whole project - just isolate the issue in the most minimal way possible (a few <div> elements, for example). Happy tweening/scrolling!
  24. hi, my plan is to play barba.js page layers transition first - and - then animation for a svg logo. but both are start at a time, have tried delay options, but it's not working. or another option i am trying too.. first logo animation plays - and - then the page layer transition.
  25. Hi, I'm currently working on a website using Gsap ScrollTrigger. What I'm trying to achieve is showing a "previous-next post" button when the user has reached the bottom of the page. Which is working almost ok when the page is not resized. So on the page I have 2 scrollTriggers: 1. A horizontal gallery of images (with a media match) 2. The previous-next button. 1: let slider = document.querySelector('.hor-slide--project'); setTimeout(function(){ ScrollTrigger.matchMedia({ "(min-width: 992px)": function() { gsap.to(slider, { x: () => -(slider.scrollWidth - document.documentElement.clientWidth) + 'px', ease: 'none', scrollTrigger: { trigger: '.hor-slider-container', start: 'top top', //pinReparent: true, invalidateOnRefresh: true, pin: true, // scrub: .25, scrub: 0, // end: () => '+=' + slider.offsetWidth // end: 4000, end: () => slider.scrollWidth, } }); }, }); }, 1); 2: setTimeout(function(){ ScrollTrigger.create({ trigger: '.single-project', start: 'bottom bottom+=50px', //end: 'bottom bottom', invalidateOnRefresh: true, //markers: true, onEnter: self => { gsap.to('.prev-next', 1, {y: '-100%', ease: Expo.easeOut}) }, onLeaveBack: self => { gsap.to('.prev-next', .5, {y: '0', ease: Expo.easeOut}) } }); }, 100); I'm using setTimeout because in addition to gsap scrollTrigger I'm using Barba.js, and I need to delay, but it doesn't seem to be the problem, I removed the setTimeout and the problem still occurs. For the second scrollTrigger, I have used onEnter and onLeaveBack, this might not be the best way but that's the only way I found so far (I might be part of the problem), so 50px before the bottom of the '.single-project' block reach the bottom of the viewport (start: 'bottom bottom+=50px'), show the prev-next, otherwise hide it. The problem is that when I resize the window from mobile (< 992px) to desktop (> 992px), the prev-next button is now showing to early, before I reach the bottom of the page. Step to reproduce the bug: 1. Load the page on desktop, scroll to the bottom, the prev-next is showing (great) 2. Resize the window (< 992px), the first horizontal gallery scroll is "killed", scroll to the bottom, the prev-next is still showing at the right time (amazing) 3. Re-resize the window (> 992px), the first horizontal gallery is "recreated", and now if you scroll around the page, you can see prev-next showing too early, before you reached the end of the page. I tried refresh and also invalidateOnRefresh true or false, without success, it doesn't want to work. I guess I'm doing something wrong, probably the way I try to show the prev-next, using onEnter and onLeaveBack. Must be a more clever way to do that. Thank you.
×