Leaderboard

Hey @hastalavistababy welcome to the forum! `scale` is part of the `transform` property of CSS and it does not interact with the flow of your content, so if you do want it so that elements are pushed around when things are scaled I would use the property `fontSize` https://codepen.io/mvaneijgen/pen/ExoBoaz?editors=0110 I had to change your code a bit and had to set a fixed height on the `.logo` block, otherwise the block height would get recalculated based on the font size and you want it to stay at the bottom. Also know you can use the plugin SplitText to dynamically split text on the fly no need to manually split any text https://codepen.io/mvaneijgen/pen/XWVLVLm

I don't how familiar you are with arrays, but knowing that arrays are zero-based is key to understanding all that. Zero-based means the first item has an index of 0. So the second item would have an index of 1, the third item would have an index of 2, and so on. And think about it in terms of math. How many screen widths is the first panel away from the viewport? It's already in view, so that would be 0. The second panel is 1 screen width away, the third panel is 2 screen widths away and so on. And that's why you'll commonly see this calculation to do horizontal effects. xPercent: -100 * (sections.length - 1), We subtract 1 from the length because length is not zero-based. So if there are 5 sections, i.e. the array length, then the last section will have an index of 4. Yes, it can be confusing, but that's just how it is. First off, that section is not being pinned. What is being pinned is the trigger you set here. let tl = gsap.timeline({ scrollTrigger: { trigger: ".main-container", // this is what gets pinned pin: true, scrub: 0.1, end: "+=2000" } }) Throughout this thread, I've been trying to make it a point that you need to approach it as an animation problem and not a scrolling problem. So here's essentially what a horizontal animation would look like if you could scale it down. The red box is meant to represent the viewport of your screen. horizontal animation (codepen.io) And ScrollTrigger is very similar to GSDDevTools in that it can scrub animations. If scrubbing that animation looks fine in GSDevTools, it will look the same if we hook it up to ScrollTrigger. horizontal animation (codepen.io) So I would suggest trying to make a timeline just like I did. If it works without ScrollTrigger, it will work with it. That's a hint that you should not have any nested ScrollTriggers inside your timeline, like I see here. tl.to('.list-left ul', { scrollTrigger: { // !!! you should never have a nested ScrollTrigger trigger: '.list-left ul', start: "83% center", scrub: true, markers: true, }, ... }) See the most Common ScrollTrigger Mistakes for more information. And for the images, I would not change the src as you can't animate that. To do a crossfade you need to have all the images inside the DOM, and then absolutely positioned on top of each other.

Great that you've got it working! I was able to reproduce the issue shown in your video from your codepen demo - but very irregularly. In your demo the scrollHeight of the body was definitely still changing (only visible if the .dummy was tall enough to overflow the window - like it is in the previews here) - so if there were still any issues with that regard, you would probably still want to apply a wrapper with hidden overflow to that .dummy in a similar fashion, too. After doing that I couldn't reproduce the jump of scrollPosition on load anymore at all. https://codepen.io/akapowl/pen/KKQgNpY

Here's just a quick demo. I'm just animating scale on the 3rd slide to show that is where you do the animations for the vertical movement. Horizontal "containerAnimation" - ScrollTrigger (codepen.io)

I didn't get why there where two ScrollTriggers in your demo, so I removed one and combined the logic to just one. In your timeline I've .add(`label${I}`) which adds a label to a point on the time line and if I'm correct this is the place to which you want to snap. After that it was just a question of adding `snap: "labels"` to the ScrollTrigger object and now it will snap to those labels. There are a lot more settings within snap, but you can check the docs for that https://codepen.io/mvaneijgen/pen/WNMwoMr?editors=0010

Hello @Jack7cz There are a couple of things off with your code - the most impactful of them being, that you are nesting ScrollTriggers in individual tweens of a timeline. That is not valid and actually one of the most common ScrollTrigger mistakes, as you can read more on in this article: That is the main reason why you are having that issue you mentioned on refresh. So you will definitely need to refactor your code with that regard. And here are some additional notes: I think the immediateRender: true should rather be inside the to-part of a fromTo-tween and not in the from-part If you are using the invalidateOnRefresh: true because at some point the height of your nav might be changing and thus the calculations for the clipPath-tweens need to be done from scratch, make sure to also use function-based values - otherwise the invalidateOnRefresh will not have much of an effect When tweening on clipPaths make sure to always include the units - even and especially when the value is 0 - so in your case 0px instead of 0 e.g., to avoid any possible misinterpretations by GSAP I'm not 100% sure if I caught everything in there or if there might be an easier or more concise way to do it but here is a working fork of your demo. I hope that'll help a bit - happy tweening! EDIT: I just now noticed there still being a problem when you first scroll past the button and enter the 'navbar-from-white1' ScrollTrigger, then back up to the button and the nav becoming black again and then click the button to change the height of the red box - the nav will turn white on click. But I'm running out of time now, so if anyone sees something obviously wrong in my codepen or has an idea what that might be realated to in the first place, please chip in. https://codepen.io/akapowl/pen/KKQVBNo EDIT 2: I've had some more time to tinker with it - and it appears that not setting immediateRender to false and setting the 'initial state of the headers' after the creation of the ScrollTriggers (instead of doing it beforehand) does seem to resolve that issue mentioned above. Since my brain is in sunday mode, I couldn't say I really get around why exactly that is the case though 😅 https://codepen.io/akapowl/pen/gOvPBQp

You could use .getBBox() and set the svgOrigin accordingly: https://codepen.io/GreenSock/pen/KKQwWrv?editors=0010 But obviously that's animating the SVG <g> rather than the <svg> itself. The reason your svgOrigin wasn't working is because that's only for SVG elements (ones inside an <svg>). Another option is to use the MotionPathPlugin.convertCoordinate() method. You can animate the pedal the opposite direction too (as seen in the demo) but you'll obviously need to adjust the artwork of the crank to extend more. Good luck!

From the docs: ScrollTrigger.addEventListener("refreshInit", function() { // this code will run BEFORE the refresh }); ScrollTrigger.addEventListener("refresh", function() { // this code will run AFTER all ScrollTriggers refreshed. }); https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh() Happy tweening.

I've created a timeline instead of just a `gsap.to()` tween and add the dot appearance to that timeline, gave it a relative position parameter of `-=0.3` which means it will appear 0.3 seconds before your lottie animation finishes. https://codepen.io/mvaneijgen/pen/VwQZVjx?editors=0010 The default tween value of GSAP is 0.5 seconds, this doesn't really matter, because you're using scrollTrigger with `scrub: true`, but the position parameter still works like that. So the dot will be visible on 2/5 of the scrollable height, if that make sense.

Using the text-anchor and alignment-baseline that I linked to, it shows centered up for me all across the board. <text x="50%" y="50%" text-anchor="middle" alignment-baseline="central" class="svg-text">Beautiful Place</text> Again, I can not identify any different behaviour on Firefox compared to Chrome. The codepen demo you linked is showing a 404 Error btw, so I'm not sure how exactly you were trying to handle things, but for me it works as I would expect it to work. https://codepen.io/akapowl/pen/zYpgMOw I also can not identify any issues with the pinning of the code provided earlier when adding some space before the section in question (neither on Chrome nor on Firefox). But I am on a Windows machine and it looks like you are on Mac - so maybe someone else can have a look and tell if they see the behaviour you are describing / showing in your video. https://codepen.io/akapowl/pen/vYdBJwy If it works in codepen but not on your live website, the chances that something else on your website is causing the problems are pretty high. There is just too much involved on live websites that could cause the problem, that's why we ask for minimal demos. The only thing that comes to my mind after a quick look, is maybe try to change the order of your ScrollTriggers and see if that changes anything - the pinning one should actually be created first as it comes first on the page. Other than that, I can not offer any more help if you can not provide a minimal demo recreating your issue, I'm afraid. Maybe somebody else can. And of course you are welcome to try and hire someone to help you with your live website in the Jobs & Freelance forum. Happy scrolling!

Hi @Chybosky It'll be best to use CSS variables to animate pseudo elements. It gives you much more control. Here's a demo with the basics of how to do it. https://codepen.io/PointC/pen/rNpXXWq Hopefully that helps. Happy tweening.

These should help https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline That could have multiple reasons - but I don't see any different behaviour in FF compared to Chrome with that codepen example. We don't have the capacity to debug live websites, so it would be best if you could re-create your issue in a minimal demo if you need help on this.

Hi @nicoleanowa Welcome to the forum. My recommendation would be to place each steam heart on its own timeline. That way you can repeat one before the other two have finished. I separated the autoAlpha and y tweens since I wanted the autoAlpha to yoyo and fade back out as it hits the end of its movement. You'll see all the durations and repeatDelays are based on the dur variable. That way you can simply adjust one value to your liking. https://codepen.io/PointC/pen/ExQwrpo/473a8aa94e4274966c383d83bbd3646f Hopefully that helps. Happy tweening and welcome aboard.

Hi @Tanvi_Patel Is this a GreenSock-related question? - You don't have any JS in your CodePen, and all of your animations are done via CSS. We are happy to help you with GSAP questions, but don't have the resources to custom-code UI components for people here. I'd suggest looking at the GSAP documentation or checking out one of the many great resources for learning. https://www.creativecodingclub.com/ https://www.motiontricks.com/ Understanding transforms will also be important: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Heya! This looks nice and simple actually. There's 26 letters in the alphabet, and they're spaced out over 260 degrees of the circle. That's maths I can handle 😂 You can specify a start and end point, then just snap every 10 degrees and log out the end rotation value https://codepen.io/GreenSock/pen/vYdeZog?editors=0111

Agreed with @PointC, Also, it looks like your fading in the nav for 1s then at .5s animating it in. Try this: tl.to(this.nav.overlay, {autoAlpha: 1, ease: "power2.inOut"}) .to(this.nav.container, {x: 0, ease: "power2.inOut"}, 0); // <-- start x transform at 0s into timeline

Welcome to the forums, @Innat. The problems I noticed: You need to make your "x" value function-based so that it can get dynamically refreshed after resize. Right now, it's feeding in a normal number at the beginning. So let's say -containerWidth - window.innerWidth evaluates to 1000 initially...but then you resize the window 500px larger. See the problem? It's still going to be animating x to -1000. You need a way to repopulate those (by making it a function). You calculate the containerWidth initially and never again, even though it would dynamically change when the viewport resizes. So again, you shouldn't be using that variable. You need to dynamically calculate those values. I assume this is more like what you wanted? https://codepen.io/GreenSock/pen/PoQKzKj?editors=0010 I hope that helps. Happy tweening!

@zofia I recently played around with this myself on stream. Wanted to let you know you are not alone in this quest of Svelte/Kit+GSAP magic. Tried scrollTrigger with some luck today but not really working with the page transitions well. Especially when pinning it seems to get kinda wonky, I will continue playing and report back. For now, the below works for timelines/tweens. Svelte Actions are awesome for this I feel. This allows you to use the node in the Svelte lifecycle. I am not sure if it's the best way yet but could at least get you working in the right direction. <script> import { animateFrom, animateTo } from '$lib/gsapActions.js' export let urlProp </script> {#key urlProp} <div in:animateFrom out:animateTo > <slot /> </div> {/key Dipscom has some great examples here that have proper timing, since Svelte works on ms not seconds. Basically what my gsapActions.js file has exported.

Just to throw my two cents out there - some CodePen accounts to bookmark and/or follow. Talented coders that feature a ton of GSAP: Cassie Evans: https://codepen.io/cassie-codes Blake Bowen: https://codepen.io/osublake Carl Schooff: https://codepen.io/snorkltv Pete Barr: https://codepen.io/petebarr Steve Gardner: https://codepen.io/ste-vg Ryan Mulligan: https://codepen.io/hexagoncircle Tom Miller: https://codepen.io/creativeocean Chris Gannon: https://codepen.io/chrisgannon Darin Senneff: https://codepen.io/dsenneff Craig Roblewsky: https://codepen.io/PointC/ (this guy is awesome 🤣) It may not be exactly what you need, but there should some good inspiration in those accounts. Happy tweening.

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.

You could just call everything you call on click of the hamburger on click of the links, but first thing you would have to prevent the default behaviour of the event and then you would also have to add some logic to delay the changing of the page - but that is nothing we can really help with, as this forum is focussed on GSAP specific questions. As a starting point, this might help. https://stackoverflow.com/questions/11510478/click-delay-before-navigating I added an eventCallback onReverseComplete of the timeline there, so the window.location = goTo to does not rely on a timeout but will be called, once the reverse of the timeline is complete. You might have to extend the logic a bit (like make things not be clickable in between etc.) Happy tweening! $('.menu-links').on("click", function (e){ e.preventDefault() hamburgerMotion.reversed(!hamburgerMotion.reversed()); $('.hamburger.active').removeClass('active'); const goTo = $(this).attr("href"); hamburgerMotion.eventCallback('onReverseComplete', () => { window.location = goTo }) }) https://codepen.io/akapowl/pen/ZErKxEP

Hello @F.D.C.H - welcome to the Forums. You could extend that helper function by a new variable - in the demo below I added startIndex = 0 up top where all the neccessary variables are being set up. In the draggables onPress you could set the startIndex = curIndex so at a later point (like on throwcomplete e.g.) you could check wether the value of the new curIndex is equal to the value of the startIndex. From outside the curIndex is accessible via tl.current() and I made the startIndex accessible via tl.dragStart() - but you could of course change the names to whatever you'd like. Of course the tl part here you would have to then exchange with whatever variable you are applying that horizontalLoop helper-function to. Then from outside you could do something like this. That's just an idea - I hope that will help loop.draggable.addEventListener("throwcomplete", log); function log() { console.log(loop.dragStart(), loop.current()) if( loop.dragStart() === loop.current() ) { console.log('Same Index') gsap.to(document.body, { backgroundColor: '#f00000', overwrite: 'auto' }) } else { console.log('New Index') gsap.to(document.body, { backgroundColor: '#111', overwrite: 'auto' }) } } https://codepen.io/akapowl/pen/KKQmPxB Edit: In this following pen the startIndex is also being set in the toIndex() function, so calling the check will also properly integrate with click on the buttons - and at this point the naming of tl.dragStart() doesn't seem appropriate anymore https://codepen.io/akapowl/pen/zYRwxBd

If I'm animating it with GSAP, I always use GSAP to set everything so we don't encounter any CSS problems. In this case, I think it'll be easier to use SVG origin for the head group rotation point. https://codepen.io/PointC/pen/wvyJgdR/3563d3883888a9bb19bc96e7fb6a9774 I'm not seeing that in any browser. Happy tweening.

Hello Elvin! The way you are handling the refreshes, you are creating more and more ScrollTriggers on every refresh - that is not good. There is no need for that, as ScrollTrigger does have built in properties/ways to handle those: You will need to use function-based values on the tween alongside invalidateOnRefresh: true on the ScrollTrigger if you want ScrollTrigger to get fresh values to work with every time dimensions change. invalidateOnRefresh Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values. Also overriding the values in an eventListener on "refresh" might be too late, so you may want to use "revert" instead. When those things are changed, you'd notice, that the tween on scroll would become faster and faster everytime you refreshed, because you are making the end dependent on the container that never actually changes height, so you might want to make it dependent on the height of the element of which the size is being changed instead, to guarantee a constant 'speed' of the scrub, e.g. something like this; notice how the end here also uses a function-based value, as that value is going to change and will need to be gotten from scratch for every refresh. end: () => "+=" + news_list_wrap.height() https://codepen.io/akapowl/pen/rNJyMxz Also as a sidenote not related to your question here: You might want to reconsider how you are handling resizes. I don't think the way you have things set up now will really work well - better have a look at ScrollTrigger.matchMedia() which is built for handling exactly those.

Happy to help. Thanks for your Club membership. We appreciate the support. Yep - it's a phenomenal community. I wouldn't know much of anything about JavaScript and GSAP had I not started hanging out here. I found the best way to learn was to try and help other users and answer questions. You'd be surprised how much you pick up just by trying to figure out someone's code problem. Have fun and happy tweening.

Yes certainly - you can do whatever you want! Observer is just handling the events for you. What you choose to do on those events is up to you. You will have to write that logic yourself. Here's an example of mixing together Scrolltrigger and Observer https://codepen.io/GreenSock/pen/qBVgbXa/1ccf60146d680c09ba6074bf9132778d?editors=0011

There were 3 of us

Split your text into lines, loop through those targets and create a ScrollTrigger for each one. Boom - you're good to go. Happy tweening. https://codepen.io/PointC/pen/qBxaJyX/3e64dc369cd5e8a71235b7d123180339

Hello @Lance Woolf - Welcome to the GreenSock forums! You will need to loop through all your '.row's and for each of those create the timeline and add the eventListeners, targetting only those elements within each '.row'. Something like this: https://codepen.io/akapowl/pen/qBxZQpz Edit: Some quick sidenotes/tips: eases don't go directly into the timeline object - they belong either on the individual tweens, or in the defaults of a tl with a duration as short as 0.1 you will not see much of the bounce ease as things will happen just too quickly instead of setting the position parameter to "-=0.1" to have both tweens play at the same time, you could also just use "<" which tells the second tween to start at the same time that the previous tween does. That way you wouldn't have to change the position parameter everytime you changed the durations https://codepen.io/akapowl/pen/oNExJvb Edit 2: Here is an extra bonus tip: You will notice now when reversing the tl on mouseleave, the bounce ease might not look very appealing. So if you wanted the bounce to always happen at the end of every event triggering the animation, you would have to tackle things a bit different, like e.g. tween on the progress of the timeline on mouseenter/mouseleave with the desired bounce ease, and have an ease of none set on the actual tweens themselves. https://codepen.io/akapowl/pen/eYVZbNo

Just wanted to quickly also address this problem you are having. It is related to you tweening on the y of containers that are parents of the element that you want to pin. Since there will still be transforms set inline on those elements when they are done animating, those transforms will change the context for the position: fixed that is being applied for the pinning on mobile. So you will need to make sure there will be no transforms set on any parent of the element you are going to pin or else things will not behave as they should. You can do so by e.g. using clearProps. I just quickly threw it onto that tween of your tlLoaderOut timeline to show the difference it makes, i.e. that now after load things will pin properly on mobile. You will likely want to do something similar for the tweens that handle your transitions in between pages. tlLoaderOut .to(loader, { yPercent: -100 }, 0.2) .from('.site-main', { y: 150, clearProps: "transform" }, 0.2); // <----- https://stackblitz.com/edit/web-platform-gszrpg

The quickest workaround to the image-jump problem would probably be to just leave the creation of the ScrollTriggers where you have it currently and instead of calling ScrollTrigger.refresh() in the onComplete callback of the tlLoaderOut timeline, call it in the onUpdate callback of that timeline. Now since the .refresh() is a rather costly operation, it may not be the best idea to do it onUpdate of that tl because it might cause performance issues, but I actually did not notice much of a difference in the demo linked below, if any - of course your mileage may vary. Other than that I think you might have to somehow 'manually' calculate where to tween the image to in between, so it would end up at the exact position where the ScrollTrigger's progress would set it to when things have settled. https://stackblitz.com/edit/web-platform-guoahm Welcome to the GreenSock forums by the way As a sidenote: I would highly recommend to update your GSAP / ScrollTrigger to the latest versions because the version 3.4.2 that you are using in that demo of yours is rather old and by now (the latest is 3.10.4) there have been heaps of new things integrated and lots of bugs fixed. Since version 3.10 GreenSock also has its very own smooth-scrolling plugin for club-members - ScrollSmoother. Maybe have a look and see if it could be a suiting replacement for locomotive-scroll for you - it sure is awesome.

It looks like you were loading this one, which is not a GreenSock product: https://cdnjs.com/libraries/ScrollTrigger This here is where to get the links for all the GSAP related (non-club-membership) files: https://cdnjs.com/libraries/gsap

I've always used the ALT drag through the lines for individual line comments on the CSS.

Please give this a try. ease: condition ? "power4" : "none" https://codepen.io/PointC/pen/ExQVjbO/ea42ab4e6e542401ef5a8bab653c5b32 If you need it for your project, there's also a parseEase() method. https://greensock.com/docs/v3/GSAP/gsap.parseEase() Hopefully that helps. Happy tweening.

I think I'd limit the number of repeats on the tweens so you can use your timeline repeat and repeatDelay. Maybe something like this: https://codepen.io/PointC/pen/GRQJMZp/8525298a3d05e41cdde6eafed8768319 Hopefully that helps. Happy tweening.

If I understand the desired result correctly, I think I'd just use a regular tween instead of a timeline. Then you can call ScrollTrigger.refresh() onComplete of the tween in your click handler. Maybe something like this. https://codepen.io/PointC/pen/YzePoQr/8740a24e12a98756ecba99961ab9abee Happy tweening.

That's great! Show us the demo and will let you know what went wrong!

Hi @Vivodionisio Welcome to the forum. There is just far too much to look at there. If you're having trouble with just the shadow morph timeline, trim everything down to just that piece. Eliminating the extra pieces in the SVG would be very helpful too. We just need a minimal demo to see the issure. That being said, I'd recommend .set() over the zero duration tweens. https://greensock.com/docs/v3/GSAP/gsap.set() Instead of a delay on some of the tweens in the timelines, you'd benefit by looking at the position parameter. I'm not sure as I can't dive too deeply into all that code, but you may also want to look at immediateRender. If you can trim it down to just the necessary bits, I'm confident we can point you in the right direction. Happy tweening and welcome aboard.

Looks like a good job for the Modifiers Plugin. https://codepen.io/PointC/pen/rNJNMGK Hopefully that helps. Happy tweening.

I've never worked with a switch statement before, so forgive me for not using it. What you want is to have a trigger at each section right, so the easiest way is to just crate a scrollTrigger for each section. Then you don't need to calculate anything weird and can just use the top and bottom of the section you're working on. I've just used some random gradients colors, but it shows you it working. I've used a wrap function this loops through an array and it doesn't matter if there are 10 sections, it will just keep looping the the array of the three I've set. https://codepen.io/mvaneijgen/pen/BaYBGOa?editors=1011

Hello @Craig Johnston You do have a typo in the demo you initially provided (comma instead of semicolon in the inline-styles of the container) that's why things don't display how you'd imagine to begin with. // bad <div id="test" style="position: relative, height: 100vh"> // better <div id="test" style="position: relative; height: 100vh"> Next you'll now need to make sure to pin the container so it stays in place when it hits the top of the window, and then you'll need to adjust the start and end for it to work. For the first panel with the index of 0 you could set the start to 'top top' and for all the others make it dependent on the end of the previous ScrollTrigger e.g., so something like this maybe: start: (self) => i === 0 ? "top top" : self.previous().end, end: () => "+=" + innerHeight, Is that what you were going for? https://codepen.io/akapowl/pen/gOvYGoe As a sidenote: you might want to consider using a .fromTo tween instead of the .from tween for the actual animation/s because if you scroll back up quickly, you might notice the text is not going back to the center (where it was initially at). So here it is using the logic for the tweens initially provided by Zach, just to show the differrence it makes. I hope that will help. Happy Scrolling! https://codepen.io/akapowl/pen/XWZreGK

You could drop it into an SVG and use a clip-path. (Pointer events will only register on the revealed area.) Then add a separate glow image. I'd do something like this: https://codepen.io/PointC/pen/QWQLGqY Happy tweening.

Heya! Not a GSAP issue here. Firefox doesn't like percentages in SVG. It's always best to go with a viewBox and use SVG units. Hope this helps! https://codepen.io/GreenSock/pen/KKZOYeB?editors=1010

Hi and welcome to the forum. Sure you can do that with GSAP. Check out ScrollTrigger. Lots of demos here: https://greensock.com/st-demos/ This one in particular will get you close to that example page. https://codepen.io/GreenSock/pen/YzyqVNe Happy tweening and welcome aboard.

And if you don't want the flash of green in-between you just have to flip around the position parameter from ">" to "<" than the second tween will start at the same time as the previous tween! https://codepen.io/mvaneijgen/pen/zYpgGZB?editors=1010

Welcome to the forums @AlesS I would recommend starting out by solving the animation first. Once your animation like you want, then all you have to do is hook it up to a ScrollTrigger and you should be good to go. I'm assuming you're trying to do a crossfade, so you'll probably need to absolute position the second section over the first section. Then use a Timeline and the position parameter to do your fading. If you get stuck along the way, just a post a demo of your work and we nudge in the right direction.

Hi @WebDeveloper096 Welcome to the forum. The appearingCircles part of the timeline was just running on its own as it wasn't part of the ScrollTrigger. Moving the ScrollTrigger to the timeline vars takes care of the problem. https://codepen.io/PointC/pen/XWVLqaL/5fd2a6919e62d43675cabcb07f2589bf Happy tweening and welcome aboard.

Okay... I see - you'll have other controls that will pause/resume. That makes more sense now. Often times I'll just set up a global toggle variable that I can flip from true/false, 0/1 or whatever that I use to keep track of the timeline state. You may want to take a look at the position parameter. I think it would greatly enhance your project. Happy tweening.

autoRotate: 180, Happy tweening.

Here is the transition stripped down to a minimum (actually built up from scratch to a minimum from that other stackblitz of mine). This took me way longer than it should have, to be honest, because some things you were doing caught me off guard. You might want to read up on clipPathUnits and how exactly objectBoundingBox behaves - I had to, because the values of your path-data gave me quite some wonky result, so I had to adjust the path-data for the tweens. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clipPathUnits Also note, that I quickly just threw pointer-events: none on both, the SVG and the clipped container, so they don't block what's underneath them (as they sit on top of everything). So you might want to add some proper handling of visibility/opacity/autoAlpha instead, when beginning and ending the transitions. https://stackblitz.com/edit/web-platform-e34kjf It is the same as I mentioned for the CSS - unless you were going to somehow dynamically load the file neccessary for every page only, it wouldn't work. Barba does not update anything outside of the data-barba="container" except for the page's title. Have you taken a look at the that tutorial I linked to in those other threads you probably have visited? It does mention that in several occasions, e.g. in the part about Page Reloading And Common Parts. But maybe I just misunderstand what you mean by "two JS files for each of the pages" https://waelyasmina.com/barba-js-v2-tutorial-for-total-beginners/ I hope that will help get you where want. Happy transitioning and good luck with the project!