Jump to content

Search the Community

Showing results for 'barba'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hi there! I'm trying to build a WordPress website which has a effect like this: https://artemsemkin.com/rhye/wp/slider-8-circle-covers-v/ If you click on "explore project" the image will expand so that there is a seamless animation into the new portfolio page. After using GSAP from time to time, I came across the Flip Plugin and it looks like that you can achieve a similar effect using this plugin (GSAP Demo Pen below). Since I am using the non-headless WordPress the DOM will change completely switching the pages. So I guess I need the portfolio detail page to be dynamically loaded with for example AJAX in order to make it work with the Flip Plugin, is that correct? I've also read a lot about Barba JS which could help me to achieve it, too (it looks like the author from the WordPress-Theme is using this as well). Is there anyone who build something like this on his own or can tell me briefly what steps need to be taken in order to achieve the animation? Would the Flip Plugin be a good choice here? It looks like my question may not be directly related to GSAP, so I hope you don't mind me asking. Thanks in advance!
  2. Hello @Maddy - welcome to the GreenSock forums. I'm not familiar with Angular at all, but it sounds like you are in an SPA-environment, and the fact that you are seeing the markers multiple times is a sign for you probably having to kill all the old ScrollTriggers when leaving a page and then create them from scratch when you enter the new page. This is from an article on the most common ScrollTrigger mistakes: 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. For how to kill them, have a look at this answer... ... and maybe this thread can help when it comes to specifics of Angular.
  3. It might have something to do with the fact that it has redirect to get the latest version, so it will return this. https://unpkg.com/@barba/core@2.9.7/dist/barba.umd.js It might be swapping the instance out in the middle of the transition.
  4. I have already watched the video, I have practiced doing something from there, taking into account the recommendations of Cassie. And it worked. But here is not a separate working out of flip, namely in the transition. In the gsap topics, I found a description, only according to the old version of barba... I took your example, barba works, but the flip process itself seems to work only at the end, when the page has already opened, there is some flashing of the block on the page. But it does not work during the download process... As in the reference, in it, flip is in the process... https:/ / studio-size. com/ https://prnt.sc/1g61lut - screen Some simple animation of the transition is obtained, but the entire page as a whole, for example, opacity or zoomout, but not a separate block... There is clearly some nuance here that I don't understand and probably just don't know that it exists
  5. Hi Zofia, I don't think it not working anymore is related to GSAP or ScrollTrigger but rather to how Svelte works. I'm logging out the element that you are targetting as the trigger here and except for the first load it will always target the one on the page you left and not the one on the page you are going to. I can only speak from my experience with barba.js where both 'pages' will be in the DOM at the same time for a certain duration so you somehow have to work around that when wanting to target things on the new page - this looks like it might a similar case. So you might have to find out how to target only elements on the new page in Svelte when doing transitions. https://stackblitz.com/edit/sveltejs-gsap-220222-b-dtnpbb
  6. By the way, I was able to connect barba, I thought I read that it is well compatible with gsap, but I can't figure out where to attach the animation yet... And I'm not lucky with examples =_= I found a description here, but with an old version of barba...
  7. Hi Guys, I have been having the same problem and I think I figure it out, this worked for me: Pack all your animations on one single function and call the function once your site load something like: initGsap(); function initGsap(){ // All gsap animations with ScrollTrigger and/or ScrollSmoother } On barba.js init function place this and on the After hook call you initGsap function: async afterLeave(data) { let triggers = ScrollTrigger.getAll(); triggers.forEach(function (trigger) { trigger.kill(); }); }, async after(data) { initGsap(); } And that's it, you will remove the scrollTrigger methods and then reload all your animations. Hope that helps (sorry for my bad english)
  8. Thanks again @akapowl, i wasn't aware of the duplicate, i found out it is because the barba container must be inside the locomotive container. I hope i can do it. Thanks!
  9. The problem is, that with your order of execution you are not sticking to the order that is neccessary for things to work properly. The code for implementing locomotive-scroll to work with ScrollTrigger via .scrollerProxy() that you likely got from the example on the .scrollerProxy() documentation page has comments; one of them (at the very end) says: // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); So you would either have to make sure to stick to the order provided in there to begin with, or you will need to call ScrollTrigger.refresh() again after all your ScrollTriggers have been created. I just quickly threw a .refresh() call at the very end of your Stuck() function, just to show the difference it makes. https://stackblitz.com/edit/web-platform-ydejfq Also, you may not have noticed that you actually appear to be creating more and more instances of locomotive scroll with every page-transition, so that is something I would concentrate on fixing first, because it is the most likely to throw things off with regard to ScrollTrigger in the long run. But as Jack already mentioned, neither locomotive-scroll nor barba.js are GreenSock products, so that is nothing we can help with. Good luck with the project!
  10. Hi @Ocamy. LocomotiveScroll and Barba are not GreenSock products, so we can't really support those here. Sorry. If you have any GSAP-specific questions and can provide an isolated minimal demo that's not using 3rd party tools like that (which are likely the culprits of the problems), we'd be happy to take a peek. You are welcome to post in the "Jobs & Freelance" forum if you'd like to find paid support/consulting. As for the mobile stuff, you could try setting ScrollTrigger.config({ignoreMobileResize: true}) and maybe even ScrollTrigger.normalizeScroll() to see if it helps. Good luck!
  11. Hi tractaNZ, I'm a little unclear about what you're asking here. This really isn't the best place to ask about barba's API, but I would assume that if you transitioned to a new page, then you would need to create your ScrollTriggers again. It's whole a new set elements, so even if your previous ScrollTrigger instances were stored in memory, refreshing isn't going to do anything as those elements don't exist anymore. And you don't need to include a function inside the same file to call it. Assuming you didn't nest scrollFunction inside another function, it should be global. If not, you can always make it global. window.foo = () => { console.log("hello"); }; // in another file foo(); // hello // or window.foo();
  12. 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
  13. 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
  14. Ha, that looks a bit like a best off of my forum answers 😋 ...just kidding; good job getting it all together ! 💪 But it still is a whole lot (too much) to parse through. I even had to look around for the link that is supposed to bring you to the other page for quite a while to begin with. I am pretty sure it is a barba-logic related issue you are having, and as you might already have read in one of the other posts, the GSAP forums would not exactly be the right place to ask about that - as they are supposed to help with directly GSAP related questions. I could offer to have another look, but: If you are having problems with just the transition, it would be great if you could a) reduce everything to that sole problem, so it becomes a lot easier to concentrate on that - everything else doesn't seem needed if all that doesn't work for you is the transition itself. and b) port things over to stackblitz, where I can easily fork and tinker with things - as the number projects one can have on codepen is very limited. One thing I can tell you right away with regard to your ScrollTriggers is that you will definitely have to call ScrollTrigger.sort() after you have set all your ScrollTriggers up [or alternatively set refreshPriorities], because you are not creating them in order of appearance on the page, but are creating (some of) them in loops and your fake-horizontal section for instance doesn't work as supposed to because of that. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort() Edit: And after another look I realized that your loaderIn() and loaderAway() functions are faulty. For one, you are targetting an element, that is supposed to have the class swipeup, but you don't have such an element anywhere - neither on the index.html nor the subpage.html The other thing is, that you can not sequence tweens like that. You will probably want to set up a timeline and return that timeline from that function. // bad function loaderIn() { // GSAP tween to stretch the loading screen across the whole screen return gsap.set(swipeup, { autoAlpha: 1, attr: {d: "M 0 100 V 100 Q 50 100 100 100 V 100 z"} //bottom line }, { duration: .8, ease: "power4.in", attr: {d: "M 0 100 V 50 Q 50 0 100 50 V 100 z"} //arc top }, { duration: .5, ease: "power2", attr: {d: "M 0 100 V 0 Q 50 0 100 0 V 100 z"} //full square } ); } Bad... https://codepen.io/akapowl/pen/vYpwopZ ... vs. better. https://codepen.io/akapowl/pen/mdpYNXq
  15. GeorgeErshov


    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
  16. 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.
  17. Thank you so much or this. The CleanGSAP helped me get BarbaJS and Scroll trigger working! function galleryScroller(){ ScrollSmoother.create({ smooth: 1, effects: true }); const galleryWrapper = document.querySelector('.gallery-wrapper') const gallery = document.querySelector('.gallery') const tl = gsap.timeline() tl.to(gallery, { x: `-${gallery.offsetWidth}`, scrollTrigger: { trigger: galleryWrapper, start: 'top top', end: `+=${gallery.offsetWidth}`, pin: true, scrub: 0.5, } }) } const cleanGSAP = () => { ScrollTrigger.getAll().forEach(t => t.kill(false)); ScrollTrigger.refresh(); window.dispatchEvent(new Event("resize")); }; barba.init({ transitions: [ { name: 'index', once() { //siteFirstLoad(); galleryScroller(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async afterEnter() { galleryScroller(); }, to: { namespace: [ 'index' ] }, }, { name: 'default', once() { siteFirstLoad(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async beforeEnter() { cleanGSAP(); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, } ] })
  18. limbo

    Barba.js + Smoother

    Resovled. I use a "parachute" load.js file to get some UI stuff in there early dom ready (don't judge me). It included GSAP core which causing a load conflict somwhere — but also not really needed. So have moved into main app.js and it's loading fine alongside barba Turns out I was loading an older version of ScrollTrigger. Obvious now.
  19. 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
  20. Wanted to add my 2 cents as I stumbled across this thread in my own search for help with gsap/barba. So far this seems to work for me. Still in dev so no warranties on production level code here var tlLoader = new TimelineMax({}); //Using timeline in my project var FadeTransition = Barba.BaseTransition.extend({ //define the transition in barba start: function() { Promise .all([this.newContainerLoading, this.fadeOut()]) //when new container is loading run you transition animation .then(this.fadeIn.bind(this)); }, fadeOut: function() { var deferred = Barba.Utils.deferred(); //define deferre so you can wait for transition to complete tlLoader.set('#loader',{y:'0%'}); //run your fade in tweens here I'm Morphing a svg over my content but you can do whatever you wish tlLoader.to('#loader-bg-svg-path', 1, {morphSVG:'M 0 -5 L10 -10 L10 15 L0 20 Z',ease:Linear.easeNone, onComplete: function () { deferred.resolve(); } }); return deferred.promise; //return deferred to promise so we can move to fadeIn step }, fadeIn: function() { document.body.scrollTop = 0; //this scrollTop might be redundant Im still in dev with this this.scrollTop(); var $el = $(this.newContainer); //run your fade out tweens here tlLoader.to('#loader-bg-svg-path', 0.7, {morphSVG:'M 0 15 L10 10 L10 15 L0 20 Z',ease:Linear.easeNone}); tlLoader.to('#loader', 0, {y:'-100%',ease:Linear.easeNone}); tlLoader.set('#loader-bg-svg-path', {morphSVG:'M 0 -5 L10 -10 L10 -5 L0 0 Z',ease:Linear.easeNone}); this.done(); }, scrollTop: function() { var deferred = Barba.Utils.deferred(); var obj = { y: window.pageYOffset }; TweenLite.to(obj, 0.4, { y: 0, onUpdate: function() { if (obj.y === 0) { deferred.resolve(); } window.scroll(0, obj.y); }, onComplete: function() { deferred.resolve(); } }); return deferred.promise; } }); Barba.Pjax.getTransition = function() { return FadeTransition; };
  21. 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(); }, } }); }); });
  22. 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.
  23. 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.
  24. Thank you for your replay. I use GSAP, ScrollMagic and Barba. Without Barba, all works fine but when i use barba js, other scripts are not loaded on newpage. Please use hamburger menu on the right to move to the Home page. *Just in case, when you reload Home page, you can check all animation It seems that Barba works correctly but GSAP and ScrollMagic are not loaded after page transition.
  25. Thanks Zach for your response. Working link should be at - https://repl.it/@eest/GSAP-and-Barba-Rules I was wondering whether the problem was with how I was using a GSAP animation. Barba seems to be running ok and the animation is initialising but not showing. It may be a Barba problem in which case it isn't appropriate for the forum. Thanks again Zach.