Leaderboard

Hi @newguy123, @mvaneijgen and @Toso are right, the level of support doesn't change because of the subscription status. I assume that you want to know why sometimes we don't create fully working solutions for our users, as Mitchel points is mostly a time related problem. Let's say that a user wants to create a content slider with a series of features and I'm up to the challenge. Creating a complex content slider is a really time-consuming task and, being optimistic about it, it takes me 6 hours. That's almost a full day of work where I can't address any other questions in the forums or any of my other obligations. Then I do the same for another complex problem for another user. Sure enough we love challenges and helping but most likely I will use two full days in order to solve two complex issues while more and more questions pile up in the forums and several other users don't get support. See the problem? Another thing to keep in mind is what can be considered as support. For us supporting our users is clearing API questions, GSAP usage doubts and obstacles, but not resolving complex problems. Normally we see a lot of questions in the forums that are not really GSAP related, but that can be resolve quite quickly, like an issue with HTML structure (like layouts for example) and or CSS that is causing the problem, but we nudge the users in the right direction if catching the problem doesn't involve a lot time. Other times we see users getting into project that are really challenging without having enough knowledge about HTML/CSS/JS and GSAP in order to create what their trying to do, and they want a copy/paste solution for their problem and/or need. Web development, as any other career choice, requires a learning path believe me. I've been doing this for over 10 years and I'm still learning on an every day basis. For example if you want to become a professional in construction you can just jump into building a 10 story building, perhaps start with some wood and screws to build a tool shed or something like that and get more knowledge on the craft and keep improving. There is a learning curve for everything in life and is important to recognize that, be constant with it and dedicate time and effort to it. Happy Tweening!

SVG Mask The most simple solution is to create a mask with SVG and adding the image to the SVG file it self. Although this is a simple solution it is probably not going to be bullet proof, because your images probably come from somewhere else and you’re not going to hand craft all these images inside your vector program, but I want to show that this is possible and is indeed the most simple solution. https://codepen.io/mvaneijgen/pen/xxMBVqX CSS Clip-path If you have a relative simple shape you could use a CSS clip-path to mask your shape. There are a few gotchas, but if you keep them in mind this will be the most robust option. Personally I use https://bennettfeely.com/clippy/ to create my clipPaths and the first gotcha is that you have to animate between shapes with the same amount of points (if you’re familiar with MorphSVG you know why this is). Another thing to keep in mind is that when animating complex strings with GSAP is that the strings should be as much the same as possible, see this example below // Example, our starting string polygon(50% 10%, 75% 17%, 98% 35%) // ❌ Bad, not the same amount of points and diffrent suffixes polygon(50% 0, 18% 12%, 66% 29px, 98% 35%) // ✅ Good, same amount of points and everyhting is suffexed with a % sign polygon(50% 0%, 18% 12%, 66% 29%) https://codepen.io/mvaneijgen/pen/MWLxyPp SVG Mask but on normal tags A really weird but really useful solution is creating an SVG that is 1px by 1px. Yep, you heard it write a 1x1 SVG. Everything with in the 0 - 1 pixel space will gets stretched over your image (if you give your clipPath the following tag clipPathUnits="objectBoundingBox”) and you’re golden, I’ve learned this from Dave Smyth over at https://davesmyth.com/clip-path-scaling where he has an even more in depth look on how and why this works, recommend giving it a read if you want to go this route! https://codepen.io/mvaneijgen/pen/jOdJGQ Hope it helps and happy tweening! Some extra resources you could take a look at. Organic Morphing: Getting needed points from Adobe Illustrator — motiontricks SVG Masks and clipPaths — motiontricks GreenSock SVG Ripple Mask Effect — creativecodingclub Easy SVG Masking — creativecodingclub Clip-path scaling — davesmyth.com Extra example With this last example you can create really elaborate effect with just a few simple shapes. The example below uses the exact same timeline animation for each of the clip paths with some clever use of the stagger object.

Hi @lizettevanboom and welcome to the GSAP forums! In order to make the Endless Loop helper function work properly with elements with different widths, you have to wait for all the elements to be loaded. In the case of HTML media elements you should wait for the loadedmetadata event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event The Horizontal Loop Helper will handle the elements regardless of their widths, sure most demos use elements with regular known dimensions, but is not at all a constraint. So when the metadata of all the videos are loaded you can create the instance of the Horizontal Loop: const videos = gsap.utils.toArray("video"); const totalVideos = videos.length; let loadedVideos = 0; videos.forEach((video) => { video.addEventListener("loadedmetadata", () => { loadedVideos++; if (loadedVideos === totalVideos - 1) { // all the videos are loaded, create the Horizontal Loop } }); }); Hopefully this helps. Happy Tweening!

You'll be getting the exact same support! We like to help everyone on these free forums, but it is always nice to see questions asked by paid members. I like it not to influence me, because you never know the situation of the person, but seeing a user asking a lot of questions and not supporting the tools feels a bit weird, but extending our help we always hope that the person comes back and will reciprocate the support they are getting. (to emphasise, I'm just a volunteer moderator on the forum and this is my personal opinion) If you feel up for the challenge you can always help around here on the forum, that is how I started and I really got a lot out of it while asking my own questions I started helping out others and this really kicked start my understanding of the tools!

Oh, that wasn't clear from your first description. Then is a timeline even a better idea. I would create the animation you want to happen on the timeline and then just restart the timeline every time someone enters the ScrollTrigger. I've removed all the comments and placed new once. The start animation is still the same, it animates from 0 to 1 with no ease, then the timeline does nothing for 1 second (change this to how long you want to see it) and then it animates to 0 again. The ScrollTrigger plays this animation when the ScrollTrigger start triggers meet (the green once), the end triggers will do absolutely nothing in this example (the red once), so ignore those. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/NWoBbEe?editors=0010

Hello @Gnekr That SVG looks very much like the SVGs in these other threads a couple of weeks ago. As was already mentioned in those threads, what you're trying to achieve is entirely possible, but will not be simple at all, which is why that is quite a bit out of scope of what to expect as support from these free support forums; especially if you do not provide anything you have tried yourself that we could offer hints or advice on - please read the forum guidelines. Key to getting something like you intend done, is understanding how SVG works in the first place, so you can then go on and tinker with values that might be relevant for your expected animation goal. https://developer.mozilla.org/en-US/docs/Web/SVG There will be many, many things you will have to keep an eye on, so if I were you, I would start simple and work my way up the complexity from there. With regard to how exactly you want things to behave it might be better to re-work your SVG so it's easier to manipulate to get the exact effect going, that you aim for (as also mentioned in the linked threads). Below is a rather basic example just to help get you started with something - not intended to serve as a working solution for you. Note: I used the .getBoundingClientRect method to get the dimensions I need to map to the SVGs dimensions, just because it works for me. This likely might not work for your setup, and you may have to use some other way to determine the dimensions you need to work with. https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect https://codepen.io/akapowl/pen/eYxRovy What will probably come in handy, is having a look at GSAP's utility functions, especially mapRange. https://gsap.com/docs/v3/GSAP/gsap.utils/ https://gsap.com/docs/v3/GSAP/UtilityMethods/mapRange() I didn't use it in my example, but you could also have a look at GSAP's Observer, as an alternative to the plain eventListeners I used... https://gsap.com/docs/v3/Plugins/Observer/ ...and GSAP's .quickSetter() or .quickTo() for setting / tweening the values on mousemove. https://gsap.com/docs/v3/GSAP/gsap.quickSetter()/ https://gsap.com/docs/v3/GSAP/gsap.quickTo()/ Also it might help in the long run for getting a better understanding of how to animate SVG to have a look at https://www.motiontricks.com/ I doubt you will find an exact example of what you're aiming for there, but it offers some neat tutorials and great general advice on how to best work with SVG when animating. Beyond that, if you have any questions directly related to GSAP, also please keep it simple instead of listing a bunch of requirements that you expect others to provide a full-fledged solution for. This forum is not intended to give out custom crafted code examples to anyone asking for it, but to help with problems encountered when using the tools provided. Stitching the little pieces together and developing the logic behind that to achieve your goal, will be yours to do. And as also mentioned in the other threads already; If you see no way to achieve something like that yourself, you might want to explore paid consulting options with GreenSock by reaching out to them directly, or as an alternative you always have the option to post in the "Jobs & Freelance" forum to try and hire someone else that can help you with your tasks. Good luck with the project! Edit: Here's that same example using multiple paths, just to give you a better idea for your more complex scenario. https://codepen.io/akapowl/pen/QWYgeXO

Hey, I played with a similiar effect a while back. codepen I'm not sure if this is the best approach, since it didn't make it into production so I stopped testing it. But it should for sure lead you into the right direction. Some more infos: difference: pageX and clientX, BoundingClientRect The key is to take the scrolling of the page into account. Hope this helps and good luck with your project.

Welcome to the GSAP Forum, @TezzyBear One very simple way to achieve that the end position gets updated is to use vw/vh values for the x/y properties of your tween . https://codepen.io/akapowl/pen/OJdaewQ If you'd want to line up the center of your element to the center of the window, you could additionally also use xPercent/yPercent values on top of that. https://codepen.io/akapowl/pen/abXQgRv As Toso already implied, it always helps to add a minimal demo to your question, so a) it becomes clearer what you actually intend to do and b) people willing to help don't have to go through the extra-steps of creating some themselves to show you what you could possibly do. I hope that will help. Edit: If (for whatever reason) you can not use vw/vh values, another way to go about that would be to use function based values for your x/y properties, and in a resize eventListener function handle the progress of your tween and invalidate it, as suggested by OSUBlake in that older thread linked below, e.g. https://codepen.io/akapowl/pen/wvNQVaQ

For circles and arcs, I find it easier to clone the original circle path, show a section of it and simply rotate around its center. Super simple with the drawSVG plugin. https://codepen.io/PointC/pen/qBgKyKy/a33f6c2d7e7fa58d1c50e59a4f3ea24e You can also use the pathLength = "1" trick and achieve the same result without the plugin. https://codepen.io/PointC/pen/zYeaLap/f9214e6d849c0bec87e065008e4b855e Just my two cents, Happy tweening.

Right now your issue is fully explained in @PointC their article read from the title "A Real Letter" and then the solution at title "Break It Into Pieces", you'll have to split your design up in as many pieces so you can fix the overlapping issues. Right now you're design is one shape https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ You also have the issue that some of your shapes are drawn in the wrong direction, check https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ As far as I know if you want no ease, set ease: "none", GSAP is probably smart and will do it also with your way, but I like to be better save than sorry. See here a list of all the eases https://gsap.com/docs/v3/Eases/ Hope it helps and happy tweening!

Animating height is something that is not really performant, because it requires a repaint (this is default browser behaviour and GSAP has no influence on it), but some times it's your only option, it is still always better to rethink your approach when you are targeting properties like width, height, margin, padding, top, left, ect, usually there is a better option. But in this case I would include the height in the end trigger, this way you don't have to update the end marker every time the element grows and they are just baked in on page load. Right now it is just hard coded, but you could also create a variable of your 400px value and use that variable. Hope it helps and happy tweening! https://stackblitz.com/edit/stackblitz-starters-nygp6d?description=Starter project for Node.js, a JavaScript runtime built on Chrome's V8 JavaScript engine&file=src%2FApp.jsx&title=node.new Starter

I'm not sure if I wrote about it, but I did post this simple puppet/morph demo . https://codepen.io/PointC/pen/gOgGQrP Yeah - I'm with @Cassie on this - the puppet warp may work, but breaking it apart would probably be the wisest direction. As with most animations, it's all about the asset prep. Rive has bones so character animation should be a little easier. Spine is another option. Best of luck.

Hard to recommend without seeing the SVG, but I usually set things up in illustrator so that I can copy paste and create artboards with manually set up step by step positions to animate to. Tweaking shapes or path points as I go Unfortunately SVG setup is the hardest and most time consuming bit of setting up an animation. Character rigging with SVG and GSAP is also really tricky. There aren't any bones so you have to really pay attention to grouping and transform origins. I'd be interested to see what the file looks like that. you're trying to manipulate. Puppet warp in illustrator may be useful? @PointC wrote an article on that I seem to remember?...

SVG clip paths are weird. Your image needs to be either part of the SVG via da <image> tag or your SVG needs to be 1px by 1px. Check out this post https://davesmyth.com/clip-path-scaling. If you don't do this there is no way to scale the aspact ratio of your clip path to the image. The example you've linked has multiple clipPaths overlapping each other and scaling and morphing in a staggered fashion. Looks like your shape has just one path, so that is never going to look the same. I've made a demo for my self in the past because I was also baffled how svg clipPaths could work with 'normal' images and this is what I came up with. It is by no means perfect and I've never used it in production, please keep that in mind. All this has nothing to do with GSAP and keep in mind that we can't provide "how do I recreate this cool effect I saw on another site?" tutorials on these free forums. That said, hope it helps and happy tweening. https://codepen.io/mvaneijgen/pen/bGQjVxq

great work but you just need to adjust small things first keep this cheat sheet with you to give you a better understanding of the position parameters also I would recommend reading the Scrolltrigger docs and timeline carefully https://gsap.com/community/cheatsheet/ but you can do things differently here my idea is to put the falling squares in their right place in the SVG before you export and then when you add them to the HTML give them 1 class instead of all those classes (third-fall-1 , second-fall-2, .......) and then loop on them to give them random x and y then with a single .to() tween make them go back to their place (x:0,y:0) with some stagger and ease that will save you 100+ lines of code https://codepen.io/ahmed-attia/pen/WNPZYXY?editors=1010 hope this will help you

I've been loving this combination so far. If someone is looking to combine the two, hopefully, they come across this post.

Hi @Ildar Khusainov welcome to the forum! ScrollTrigger can only be on the timeline not on individual tweens of the timeline. I've forked your pen and copied your most elaborate ScrollTrigger to the timeline and comment everything else out. You're also creating ScrollTriggers based on other scroll triggers, this is not inherently wrong, but a lot is happening at the moment that it is hard to see what is going one right not and mostly to find what is going wrong. Can you maybe make a simpler demo and lets focus on one element at a time? https://codepen.io/mvaneijgen/pen/MWLRaZV?editors=0010 Keep in mind the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. My advies remove ScrollTrigger and just focus on the animation, see below an example. Where there a tweens that change the text, I've used our Scramble text plugin on some of the tweens and on others just textContent. By just creating a timeline with individual tweens you get all the logic with scrolling back and forth for free! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/mdvgVbP?editors=0010

The default property for pinSpacing is padding, so it makes sense that pinSpacing: true and pinSpacing: "padding" would produce identical results. As for how things are different with flexbox, that's simply about the fact that browsers themselves measure things very differently inside Flexbox such that px aren't always px. For example, you could put 5 elements inside a Flexbox container that's 1000px wide, and try setting them each to be 500px wide but you'll see that it squishes them all to be much less than 500px. Same for padding - things can get rendered by the browser in a much different way than you might expect in terms of height/width based on fancy Flexbox calculations. It's just what seemed more intuitive in more scenarios due to the explanation above about how widths/heights work inside Flexbox. You're welcome to use whichever settings work best in your scenario. 💚

As outlined in the ScrollTrigger documentation, when the container employs 'display: flex', the 'pinSpacing' attribute defaults to 'false'. This default setting is intentional, as padding behavior is notably distinct within flexbox contexts. To address this, setting 'pinSpacing' to 'margin' is the recommended solution. https://codepen.io/luis-lessrain/pen/OJdqodE

You're close. In the stagger object it should be from: "end" rather than start: "end". https://codepen.io/PointC/pen/BaMvqBg/2851ce0d8b279d3efa7e08bf2c1220b7 Happy tweening.

Hi, You can use GSAP's Clamp utility method to prevent the circle from moving out of the bounds. Here is a super simple demo I whipped: https://codepen.io/GreenSock/pen/VwgqrGm https://gsap.com/docs/v3/GSAP/UtilityMethods/clamp() Hopefully this helps. Happy Tweening!

It's Bootstrap scroll-behaviour: smooth, adding the following to you rCSS fixes the issue: html { scroll-behavior: auto !important; } Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/abXPWdq

I've not done extensive studies, but my philosophy is don't animate important content. I see a lot of designers new with tools go mad with power and animate everything on the page and this may look cool, but is a horrible UX for the visitor and search engines might have some thing to say about content that is not visible on page load. I also know of the "google might use javascript", but as far as I know this was because of the rise of all the SPA sites (loading content with javascript) and google just wait and executes that javascript until there is content on the page. Don't quote me on this, but this seems logical to me. So how I design sites everything should be visible on page load (or it needs to be not important for the working of the site) and then progressively enhance the site with Javascript and mainly GSAP for the visitor mainly, but this will also apply to search engines. Hope it helps and happy tweening!

Without a minimal demo this will me hard to debug. Having things not centred on mobile devices, sounds more like a CSS issue. What does it look like if you disable GSAP, I have the feeling the same. Have you seen https://gsap.com/docs/v3/GSAP/gsap.matchMedia() with it you can write device breakpoints like you do in CSS an thus you can load custom javascript for different screen sizes. The only thing I can see that is weird is that you have a lot of ScrollTriggers, you hardly need more then one. My advise create a timeline of your animation and hook that up to one ScrollTrigger. Also it is better to animate from a big picture to a small one, right now you animate .fromTo() scale: 36, to 1 it is beter to create a picture that is really big at scale: 1 and than animate to 0.36 scale. (easier for the browsers to render) Last tip I can give you without seeing a minimal demo, you're using a lot of .fromTo() where a .from() would suffice, GSAP is smart and if you tell it to animate .from() scale: 36 it will imply that you want to animate to the browsers default eg scale: 1 so you don't have to write out a whole .fromTo() If you still need help after these tips, please include a minimal demo (this is not you whole project, just some coloured divs that demonstrate the issue) Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN Hope it helps and happy tweening!

Hi @deVitae welcome to the forum! Looks great! And great demo, btw! I don't know if I would have done it any differently, you could maybe abstract out the reverse of the timeline to the onEnter and onLeaveBack: callbacks. Every ScrollTrigger has a view callbacks and you now only used the onUpdate, with a if statement, but the onEnter and onLeaveBack are the exact ones you'll need. I've also wrote out a second option in Codepen if you give ScrollTrigger control of the timeline than you can use the toggleActions (which are the exact same as the callbacks), they are a bit easier to write out. Does the animation need to play on page load? Because if it should start out white I would set my CSS up as they need to be on page load (start with white). Again your version looks great and it works, so why fix it? I would only start to worry if you're seeing issues. The question is going to be different if draw like 10,000 of these and optimising for that is a whole other beast, so if it works it works! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOqQbrQ?editors=0010

Definitely rough, but checkout my fork of your pen. I think this can/should be done in a single gsap timeline with just one scrollTrigger instance per card... You'll definitely want to tweak the math/timing to fit your needs but it's a working example: https://codepen.io/ryan_labar/pen/zYemMpv?editors=0010

Hi @newguy123 I like the kevin image btw, I don't think they mentioned anything related to different support as you can see in the plans comparison here, but still, you get some extra tools with the plugins like the path helper and the GSdevtool, which helped me a lot with a big project which they used to keep going back to edit the SVG inside figma and export over and over i just editing it inside the browser and that was like witchcraft for them 😂 also, it feels great to support the tool instead of just asking for help over and over idk if that's wrong but its my feeling just saw @mvaneijgen answer and cant agree more https://gsap.com/pricing/

something like that? https://codepen.io/ahmed-attia/pen/LYqgGZm?editors=0010 here I used object keyframes but you can read more about keyframes here It is very flexy https://gsap.com/resources/keyframes

@akapowl Thank you for the idea! Everything worked out. For those who are interested in the result or want to improve the code, here is the link https://codepen.io/cnqftxxr-the-looper/pen/LYqBwBv

Have you seen the Seamlessly loop elements along x-axis helper function? https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/ This does exactly what you want. The only requirement is that there are enough elements to go around filling the with of the screen a few times, in this case 3 is the perfect number. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/LYqJLOz?editors=1010

Yep, the CSS property you're looking for is called backdrop-filter: blur(10px) and is not widely supported https://developer.mozilla.org/en-US/docs/Web/CSS/filter Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/bGzjZPN?editors=1100

You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete.

Just so anyone can know, it was a problem with WP-Rocket caching dynamic java script from user sessions. The source of the GSAP references is still unknown.. Thank you for your patience.

yes maybe he is ready for ScrollSmoother, just protect your eyes before clicking on that link 🫣🤩 https://codepen.io/collection/BNMEYN?cursor=eyJwYWdlIjoxfQ==

Hi, Indeed Codesandbox can be a bit of a pain from time to time, that's why we recommend Stackblitz. On top of that you weren't using GSAP Context or our new useGSAP hook (as @Cassie's demo shows) in order to do proper cleanup, especially in React's StrictMode. Finally there was a problem in the calculations being made to set the progress of the animation in the Draggable's onDrag callback. Here is a working demo that uses the Wrap utility method: https://stackblitz.com/edit/vitejs-vite-4l3tw8?file=src%2FApp.jsx https://gsap.com/docs/v3/GSAP/UtilityMethods/wrap() Hopefully this helps. Happy Tweening!

in your demo, its part of the containerAnimation the scrollTween, and this scrollTwee's trigger is .container so as a fix here i just commented it and changed the start and end points https://codepen.io/ahmed-attia/pen/LYqmoBz?editors=0010

@akrdesign You forgot to register the Draggable plugin to GSAP. You can do so by adding this below your Draggable import: gsap.registerPlugin(Draggable)

Seems like the bootstrap version you're adding (5.0.2) is adding something that screws up the logic. https://codepen.io/mvaneijgen/pen/abXGOQL Yep, it is scroll-behavior:smooth that Bootstrap adds to the HTML element If you set it to auto on your CSS it fixes the issue. Hope it helps and happy tweening! Side note, you also want to subtract one section from your snap logic, because it starts already at the first one, so you don't want to count that one. https://codepen.io/mvaneijgen/pen/JjxvYjv?editors=0010

That's what you looking for, highly recommend watching this video https://codepen.io/snorkltv/pen/MWJVWwy

Yep - @mvaneijgen is exactly right. You have multiple masks but the artwork is still one piece. That will need to be broken into at least 4 pieces as you have 3 overlaps. Each piece then needs its own mask. As I mentioned at the end of my article - it can be a time consuming process to break all the artwork into pieces so you have to weigh that time against the client's goals. Of course if you're billing by the hour, take your time. 😜 Best of luck.

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/vYbdoLg Hopefully this helps. Happy Tweening!

It looks to me like an engineering problem - you're trying to have two different things affect the same property of the same element simultaneously, in different directions/amounts. If I understand your goal correctly, the simplest solution would be to just create a wrapper around your elements so that your scroll-based parallax affect the wrapper, and the mouse movement affects the element itself. Here's a fork that also uses our brand new (unannounced) @gsap/react useGSAP() hook to make things a little easier: https://stackblitz.com/edit/react-an2k6t?file=src%2FApp.js I also optimized the mousemove stuff by using gsap.quickTo() I hope that helps.

Hi @Grimmrobe welcome to the forum! The issue was that your section had a height eg the height of all the panels, but you then 'fake' scrolled them up, but the height of the original panel was still there. What I've done now is set the panel wrapper to be 100vh and made it over flow hidden, now there is no extra space to worry about. I've also set the end trigger to be at the bottom of the view port and I've moved your tween to a timeline, personally I find it easier to read if the tween and the timeline/ScrollTrigger logic is separate. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/eYxydYY?editors=0010

Hi @dedeinc welcome to the forum! I think your issue was a scoping issue. At the top of the document you get all the headings and all the images, but you want to get the images inside the current scrolling container. I've wrap all your code in a forEach loop for the amount of .js-sideScroll there are on the page and then do all the logic for each .js-sideScroll inside that loop. (somehow your images went missing in the process and I can't seem to figure out where they've gone 🫨) A view side notes. ScrollTrigger can only ever be on the timeline not on individual tweens of a timeline. Your text animation is with css transitions, you now have access to GSAP, so I would have them animate with GSAP. If you must use transitions, never use transition ALL, just target the property you want to animate ❌ transition: all .25s linear; ✅ transition: transform .25s linear; Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/KKJZMpo?editors=0010

I had to restructure some of your code in all aspects HTML, CSS and JS. It is never wise to animate your trigger elements, so I've wrapped it in an element called .trigger and that is what is used. I've placed some comments through out the code, be sure to read through them. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/oNmorMz?editors=0010

Hi @bysobi that looks good already. The only thin I would do different is create one timeline with one ScrollTrigger, all your sections can only ever play if the previous one has done playing, which means it needs to wait until the previous one has finished, that is the perfect use case for a timeline. You were already working with timelines, you just create the forEach loop at the wrong place. To make it simple I've removed all the ScrollTrigger logic. It sounds weird but, the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. I've enabled the GSDevTools so that you can really view the animation and see what it is doing https://codepen.io/mvaneijgen/pen/eYxeowW?editors=0100 And if the animation is looking perfect you could enable ScrollTrigger. I've changed some of your logic and used template literals to make the code easier to edit and read. Right now the scroll distance will be twice the window height, but you can increase of decrease it to your hearts content. As you can see there is no more need for the second ScrollTrigger. Everything gets handeled by one ScrollTrigger and one timeline. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyaZEYQ?editors=0010

Ah, I see now. This is a scoping issue. You're doing a for each loop for your container, but you don't scope your ".card" selector to the current container. I've add a really handy selector helper function https://gsap.com/docs/v3/GSAP/UtilityMethods/selector() and scope it to the current container. Does this solve your issue? https://codepen.io/mvaneijgen/pen/mdvBzed?editors=0010 Scrolling back up triggers the onEnterBack, call back, which is not set in your example, so if you want to do something for that you have to define it. And in this case do the same animation as you onEnter callback.

Per the Pricing FAQ's: "If your membership expires, nothing will change on your client websites. Plugins don’t suddenly break. Keep your membership active to maintain access to updates, new tools and bug fixes." More info here: https://gsap.com/pricing/

Ahhhhh a Ticker and Timeline... got it, thanks for sharing that!... FYI I haven't met a "Cassie" who wasn't an awesome human. Stay gold Cassie!

Hi @asteroidtoastnetwork welcome to the forum! Take a look at the amazing seamless loop helper fucntion (https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/) https://codepen.io/GreenSock/pen/gOvvJee I don't know what your original source uses, but only GSAP gets loaded (and an old version) it also uses a lot of custom code (that we can't really help with). The above version uses all the nice GSAP plugins, which save you a lot of time setting up and gives you handle bars to tweak it to your liking. Hope it helps and happy tweening!