Leaderboard

Normally in GSAP things work with durations, but when working with ScrollTrigger these durations get converted to distance. It might be hard to wrap your head around, but maybe this example helps. Let's say we have four tweens that all take 1 second to animate and the total ScrollTrigger distance is 400px each tween will then take up 100px. If we remove one tween and make the last tween take 2 seconds the first two tweens will take still 100px, but the last tween will get stretched over the remaining 200px. So, setting the duration of the second tween to half of the frist tween will make it that it finishes on the middle mark of the ScrollTrigger. Here this is easy, because there isn't much on the timeline, if it gets more complex you'll have to use some math and the above calculations to figure out how much distances how many seconds. Personally I would always do it this way and not create several ScrollTrigger to control separate elements although this seems easier at first. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GgRBrNW?editors=0010

Yeah, that demo is one of mine. Super simple with grid, but a pain with absolute positioning. As @mvaneijgen mentioned, grid support is excellent and I honestly can't imagine designing any layout without it. If you need to get up to speed with grid, I find no better educator than Kevin Powell Happy tweening.

Hi @Emma Dev welcome to the forum and thanks for being a club member 🎉 This uses CSS grid two stack to elements on top of each other. Browser support for CSS gird is excellent these days, so would not see why you wouldn't be able to use it. But if you can't there are a lot of way to stack to things with CSS, position absolute springs to ming, but that causes elements to be not be part of the document flow anymore, that is why CSS grid is a much better solution. It also doesn't use SVGs, it is using a CSS clip-path, which also has great browser support. I usually use this tool for creating my clip paths https://bennettfeely.com/clippy/ and I wrote a post with some more info on the topic, see None of this is inherently GSAP related, just CSS. If you just want the background of a button to change why don't set the background-image: linear-gradient(90deg, rgba(9,9,121,1) 0%, rgba(9,9,121,1) 12%, rgba(0,212,255,1) 12%, rgba(0,212,255,1) 100%); of the element where you then tween both number 12% in this example from 0% to 100% We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! If you still need help please post a minimal demo with what you've created and some one will surely point you in the right direction. Hope it helps and happy tweening!

When I took a look at your Codepen your mask was missing a closing ", but it seems like you've fixed that. You had <mask id="mask> in your original pen Haha, I feel that! And I tell you that doesn't go away, so try to embrace it (more of a note to my self) I would leave the modules for what they are right now and just load the files via the script src, this is what the import modules would also do, but with a lot of extra steps that are by no means necessary if you're just building the site by your self and not use weird build tools and even then loading them via the src tag is totally fine! When you're up an running you can dive in the modules logic if you like. But it is totally over kill if you do not have a clear goal with it. Here is how I would setup your HTML https://codepen.io/mvaneijgen/pen/qEBRBrX?editors=1000 And then your folder structure would look like this. Currently you have the Javascript in two places your html and in your a js file. I feel that it indeed is nicer to have it in a JS file, but just leave the imports out of it. The .js file will be executed by the browser and it will load the plugins files from src in the browser Well loading the .js files from the src is using an external .js file! But if you want to use the import statements you'll need a bundler, that then gets all your imports and bundles it in to one neath package usually in a file called main.js and in your HTML you load just that one main.js file instead of all the plugins separately. Again this is totally over kill and only really matters if you building large scale apps. You can then in the build process do all kinds of tasks, to for example minify all your javascript, and create different types of packages for defered loading, but trust me sometimes they are more hassle then they are worth! Hope it helps and happy tweening!

Hi @Frank_C welcome to the forum! When animating complex strings in GSAP, you'll have to make sure that both strings have the same amount of points and the same suffixes. Suffixing all values in your clip-path with a percent sign fixes your issue. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/LEYBvPb

The resources mentioned above are great and plenty sufficient for most people to start coding their first animations. If you need a bit more "hand-holding" and learn better by watching step-by-step videos and building small projects I think you'll enjoy my FREE GSAP beginner's course. It will get you up and running with tweens, timelines, easing, staggers and all the features beginner's will benefit most from.

Yeah as @mvaneijgen explains you have to set the initial state which is completely expected by the way, no issue or bug here whatsoever. The reason is that you have this start point in your ScrollTrigger config: "top center", that means when the top of the element reaches the center of the viewport, only then the animation is rendered and played, so until that point the from instance hasn't been created and the values in the from instance are not implemented yet, that only happens when the start point is reached. This seems to work the way you expect: .card { background: #0ae448; height: 145px; width: 30%; opacity: 0; visibility: hidden; } ScrollTrigger.batch(".card", { onEnter: batch => gsap.to(batch,{autoAlpha: 1, stagger: 0.1}), start: "top center" }); Hopefully this clear things up Happy Tweening!

Hi This is straightforward code, but it's not related to the GSAP. I hope I'm not breaking the forum rules. https://codepen.io/cqyfddqt-the-reactor/pen/Eaxwgaq

Hi @fk44 welcome to the forum! First thing I see in your pen is that you should never animate the trigger element, eg the thing you animate and the element you use in the trigger object inside ScrollTrigger can't be the same. 50% of the time it will be fine, but the other 50% you'll be debugging for days, why your ScrollTrigger is miss behaving. Next I wouldn't see the need for creating 9 ScrollTriggers when you can do it just with one! All the sections following the current section rely on the state of the previous section, that is what timelines are build for, so just build a timeline with all the tweens you want on that timeline, below I've use the stagger property to tell the next card to wait until the duration of the previous card has finished. There are certain properties you're better of not animating in GSAP, where height is one of them. This property causes a browser repaint which is really bad for performance. I've updated your animation how I would build it and I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/XJWgVyM?editors=0010

I echo everything that @mvaneijgen said. I'll add a little bit of advice here after a good few years of learning. 💚 There are a lot of different bits and pieces and tools and techniques out there to help people build websites. They all exist to help with frustrations people encounter while building for the web. While you're learning, it's best to do things as simply as possible and experience the frustration before reaching for a tool! Then it's easy to understand WHY that tool exists. In terms of parcel and other build tools here's a table with some of the WHY's. If you take a look and realise that multiple things in the right column are regularly annoying you - it might be time to choose a build tool. If it turns out that none of them are annoying yet, stick with a simpler no-build system for now. (They will annoy you given enough time, and for now it's easier to be annoyed with something simple than something more complex. ) It's even a computing rule/methodology 😉 - https://en.wikipedia.org/wiki/Rule_of_least_power table, th, td { border: 1px solid #bbbaa6; padding: 0.5rem; color: #bbbaa6; } Feature Parcel 🛠️ Vanilla (No Build) 🌿 Setup Complexity Requires npm install parcel No setup—just write HTML, CSS, and JS Performance Automatic minification, tree shaking, lazy loading Must manually optimize assets & minify code Hot Reloading Instant refresh with state preserved (HMR) Manual browser refresh needed Modern JS Support Supports ES6+, TypeScript, JSX out of the box Manual script tags or native ES modules Code Splitting Automatic Manual (<script> tags or dynamic import()) Asset Handling Bundles and optimizes images, fonts, CSS, etc. Must manually manage file paths and optimize assets Production Builds Optimized, tree-shaken, hashed files Must manually optimize files Good luck with your learning and thanks for being such a polite friendly presence in the forums 🌟 You're welcome any time.

I would just use scale and the transformOrigin property, currently I've created some hard coded values that seem correct, but if you know the location of the element compared to the container it is in you can of course do some math to get the exact location. Then also if you know the current screen and you know what size you want the icon element to be you can again do some math to get the scale factor. I've disabled ScrollTrigger for now and add GSDevTools (a premium plugin you can use for free on places like Codepen!) to help focus on the animation you want to happen. I've also modified your CSS to the container (image) has a height (see yellow border). Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ByaWQpW?editors=0010 PS for responsiveness take a look at https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ and using https://gsap.com/docs/v3/GSAP/Tween/#function-based-values which get recalculated on ScrollTrigger.refresh() which happens on browser resize for example.

Just set xPercent: -50, yPercent: -50 https://codepen.io/GreenSock/pen/Eaxeppz?editors=0110 Is that what you're looking for?

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 would add some more duration to all your tweens and just see what is happening. You've already installed GSDevTools, so you're one step closer. Pay attention to the duration and maybe at first hardcode your values instead of doing duration / 7. In GSDevTools you can slow down the animation even more and just dial in the values you want to happen when. In the example site, I don't see the phone moving with the background; everything is moving at its own pace, so I also don't know how to help you with this request. It is fine to copy things, but you should also make it your own, so I wouldn't worry about copying it 100% of the example site. https://codepen.io/mvaneijgen/pen/ogNPvdm?editors=0010

The beauty of GSAP is that you can build anything you like! But this does mean that there aren't just examples around that do exactly what you want. We also don't have the time and resources to create custom examples for our users, so to get the most out of this forum create a minimal demo of what you've tried and then someone will probably be able to point you in the right direction. Again my examples in the post above give you a great starting off point. Keep in mind that you're creating an animation, don't worry about the scrolling part, that comes later. This demo from the examples does almost wat you want, but in reverse. Again hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/VYZBQpM

Thanks @mvaneijgen Much better now! I saw that listed as one of the common mistakes, but I must have read over it too quickly. This also solves another issue I was having with the shadows occasionally getting removed (opacity 0) on resize during the middle of the timeline. Fixed Codepen here: https://codepen.io/jeremyfrank/pen/JojBpym?editors=1011

Ha, yeah it is hard to wrap your head around. It is so much more logical to think "I want something to scroll, so that is what I'll be focusing on" But trust me, animating things and then hooking that to ScrollTrigger will open a world of possibilities! Ha, had al het vermoeden dat je Nederlands was! Veel geluk met je project!

Hi, Another approach is the one in this demo, it uses both scrub and the call method on a timeline in order to change the content of one of the columns: https://gsap.com/docs/v3/GSAP/Timeline/call() https://codepen.io/GreenSock/pen/qEBjLNR Also this one is just scrubbed and changes the image (clip path animation) and the background color: https://codepen.io/GreenSock/pen/zYXWVdw Hopefully this helps Happy Tweening!

I would start b y making the two sections that are stacking in your layout to be in the same container, that way they are together and makes things much easier to manage and control. Currently your .stickHead does not have an animation, so it is hard to delay things. The only thing it does is move up an get pinned when it hits the top. This way of working with ScrollTrigger is totally fine, but doesn't allow you to tweaks things. Personally when creating ScrollTriggers I always like to start with a timeline and then have ScrollTrigger on that timeline. This way you can build all the timing and tweening you like and don't just have to rely on scrolling. Also I would make it so your ScrollTrigger makers are in view. You had set it to be -250%, which makes it so that the markers is 250% above the current browser view. I personally don't like this, because then I cant see my makers a see when things trigger. So to make things easier to read make sure the makers are in view I've restricted your CSS and JS a bit. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/KwKeqwx?editors=0010

I was wrestling with a similar SplitText.revert() issue; animating lines of a paragraph and then tweening a css variable. When I reverted the SplitText, it also reset the value I'd tweened on the css variable...which is not what I want. What I discovered is that SplitText.revert() is not just removing the wrapper divs and reparenting the children, but rewriting innerHTML (duh, Jack said so above!), so any tweens that impact the child elements won't be preserved. My solution was to create a tween for the css var, and pause it at the end so the state I wanted recorded would be in place when I called new SplitText(). Then in the timeline where I animated the lines, I played the tween from the beginning. Here's my codepen to illustrate: https://codepen.io/creativeocean/pen/zxYjRxJ?editors=1010

In your CSS you had a bunch of variables (at the top) I’ve just add an extra one called —angle and set it to your default of 233deg. GSAP just gets that default and animates it to what ever value you set.

This post is not a question or help request, just sharing findings with the community who might be having same issues as we do with pnpm and gsap. Problem For a long time we've been struggling with pnpm installs of gsap shockingly green. The issue stems from how pnpm handles private packages and its package alias resolution. On first install pnpm seems to read the proper alias when installing via gsap@npm:@gsap/shockingly however all further pnpm install commands seem to look in to a lockfile and only read the gsap bit then try to resolve it back to non shockingly package which leads to both - integrity check failure and in some cases reverting shockingly package back in to normal gsap package, or corrupting the gsap package in general rendering it unreachable from code. We've been looking for solutions to this and this forum has some threads on the topic, however there's no concrete solutions other than downloading the package and installing it manually or pruning pnpm before each install... Since pnpm v10 it's possible to overtake and modify the package resolution which was what let us come up with a way to bypass the pnpm resolution and make it work with gsap. Solution To suppress the failure on package integrity checks and make sure the package is always authorized the .npmrc file should look like this: .npmrc strict-store-pkg-content-check=false always-auth=true //npm.greensock.com/:_authToken=YOUR_AUTH_CODE @gsap:registry=https://npm.greensock.com To ovveride pnpm's tries to fall back to free gsap version instead of shockingly version add .pnpmfile.cjs next to where package.json is. .pnpmfile.cjs function readPackage(pkg) { if (pkg.name === 'gsap') { pkg.name = '@gsap/shockingly'; } return pkg; } module.exports = { hooks: { readPackage, }, }; If you've found a better way to deal with it, please share it. 😄

Hi, Maybe this article can clarify things a bit: http://joshwcomeau.com/css/stacking-contexts/

Hi, Indeed for multiple elements is about the JS logic for targeting each one, here is a fork of the demo: https://codepen.io/GreenSock/pen/QwWQYMV Hopefully this helps Happy Tweening!

You can tweak this a bit with batchMax, but batch will just target all the elements when they need to be triggered https://codepen.io/mvaneijgen/pen/NPWyRWR?editors=1010 But what I think you're looking for is a timeline where you just animate all the elements one by one. https://codepen.io/mvaneijgen/pen/YPzeWmM?editors=1010 Hope it helps and happy tweening!

Hi @ashlerdesign welcome to the forum and thanks for being a club member 🎉 Check out the scrollSpeed property https://gsap.com/docs/v3/Plugins/Observer/#scrollSpeed you can set it to -1 if you want to inverse the logic on specific devices. Check out .matchMedia() https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ if you want to write code for specific devices. Hope it helps and happy tweening!

This may be helpful. https://dev.to/uuuuuulala/gradient-along-svg-path-with-gsap-kl4 Happy tweening.

The browser default of box-shadow, will probably be black, so it will animate from the default (because you've not set any yourself) to the values you've set in your GSAP tween. To fix this you have to provide what you find is the start state, eg something like box-hadow: 0px 0px 0px 0px rgba(255,255,255,0.9); Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/yyLPXqP?editors=0110

Hi, You might need two different ScrollTrigger instances, one for pinning the title and filters section and another to pin the horizontal section. Another option is to wrap both in parent element and pin that element as shown in these demos: https://codepen.io/GreenSock/pen/ZEVpqjb https://codepen.io/GreenSock/pen/qBLRzVX Hopefully this helps Happy Tweening!

Hi @clmntpct welcome to the forum! I would just create some state, like doneLoading and set it to true when it is done, then play the timeline you want to play when doneLoading is set to true. I would defiantly not create a global timeline and put everything on that, because what if you want a different animation to play. I don't know how (because I don't work in react, but if it is similar to Vue.js) you can just have things trigger is a state changes. Hope it helps and happy tweening!

Hi @Md. Kallol welcome to the forum! This has nothing to do with GSAP, while installing your NPM packages seems check all your package version and tailwind 4 is not compatible with your Angular version, it wants version 2 or 3. Not much we can help you with on the forum I'm afraid Hope it helps and happy tweening!

The simplest way to reverse the order of some animating elements is to use a negative stagger amount. https://codepen.io/PointC/pen/mydwKvJ

Hi @lostsvan welcome to the forum! What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ Sorry we can't really debug live websites, there is just no way to modify the code. Try creating a minimal demo of what you're trying to do, this has two benefits. First this allows you to experiment and try out new ideas. By making it simple people usually solve 90% of their own bugs. Second, you have an easy version you can share in which anyone could edit and modify the code. Check out the stagger property https://gsap.com/resources/getting-started/Staggers/ and see how far you can come, then post back here with a Codepen of what you've tried. Here is a starter template which loads all the plugins. Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/aYYOdN

Just wrap everything you want to pin in an element and use that as a trigger element. You can even exclude the last slide from animating, might look nicer Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/qEBmwzK?editors=0010

Hi @beez welcome to the forum! I've tweaked your pen a bit, so that we can focus on the animation you want to happen. 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 moved your tween to a timeline, so that we can separate out the tween from the ScrollTrigger logic. Personally I find this much easier to read. Then I've disabled ScrollTrigger as described above and installed GSDevTools, a premium plugin you can use for free on places like Codepen! By default a tween has a duration of 0.5 seconds, which is just way to fast to debug anything, so I've set it to 20 seconds. But as you can see at the 1.25 second mark your animation is already done, but there is still 18.75 seconds left of animation where it looks like your animation is doing nothing. https://codepen.io/mvaneijgen/pen/ByaRpwx?editors=0010 The way everything moves above seems not correct to me, so my process is to then start logging the values I have to see if they seem right to me. Your .theStory element is currently 19278px wide and you tell it to move 900% of that eg 173502px, does these values seem correct to you? https://codepen.io/mvaneijgen/pen/NPWjdXO?editors=0011 I've tweaked your CSS a bit and removed some properties that are not needed. Now each card is as wide as you want them to be, thanks to flex-shrink: 0; which is telling the elements not to shrink to the parent container. And now the animation seems a lot more normal. https://codepen.io/mvaneijgen/pen/wBvdgjE?editors=0101 Now let's tie everything together! We enable ScrollTrigger again add some markers, so that we can see what it is doing. instead of setting the height through CSS, use ScrollTrigger, makes it much easier to read when you comeback and and need to figure out why there is a random 200vh on an element that should be 100vh. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ZYEKLqE?editors=0011

I would first get your project up and running like you want it to work. Then you have something to compare to when installing a build tool, because all it is doing is the same thing like you would normally build a website, but then with some extra features, but the end result is kinda the same. So having a working version first allows you to compare the two. What is the goal? Do you want to get hired? Or start your own business? With the first I think maybe it is good that you know build tools exist, but every company has there own process and you will probably never touch the build tools or you want to be hired as a build tool expert 😭 but after setting one up for my self I would not wish that on anyone. Vite is build by the Vue.js team, so not React specific at all. To me this seems like the easiest tool and just moved all my projects over to it. But again every company has their own workflow and you just get thought theirs and then never touch the build tools again. In Codepen you can export your pen, which gets you all the files in a .zip of which your demo is made of. This would load an external .js file which gets imported in the .html via a <script src="your.js"> and thus load via an external .js file. These skills take years to master, so my advise don't try to learn them all at the same time. Build tools are great, if you have an issue you're trying to solve, just adding a build tool for having a build tool doesn't really boat well to me. If you would for instance say that you tested your site via some page speed tool and it would state that you get minus points for not minifying your JS, then I could see a need for a build tool. But I would start by creating websites and not worry about build tools at the moment then when you have some spare time on a rainy day try some things. Get your site on Github (another skill valuable to learn), but I would be more impressed with a good working site than if it has a build tool or not. That sound like a CSS question and in theory has nothing to do with GSAP, but another skill to learn. CSS is really important when working with GSAP, but it is not something you'll find in our docs. But check out our own @Carl's tutorial on adding staggers to text that is stacked right on top of each other with CSS. Could be, there are probably hundreds of them out there. There is no one better than the other just different preferences and learning one doesn't guarantee success with others. It might allow you to learn the concept behind them, but it is a different skill all together and you probably never going to touch a build tool again after setting it up the first time. Good luck in your journey and keep on tweening (much more fun then setting up build tools)

Hey! I'd love to help with this. But could I ask what you're trying to achieve first? Why did you reach for parcel in the first place? Are you just trying to get your code working in a repository you can host somewhere outside of codepen? I've sent you a DM with a folder which has the very very simplest setup necessary - no build tooling, no modules, no imports. Just script tags and minified JS. See how you get on with that!

There is position data in the path data it self! "M250 187.5 L312.5 250 L250 312.5 L187.5 250 Z" is positioned at the center current SVG, but you're also offsetting that shape using transform properties. What fi would do is create an SVG (as big as your shapes) and then transform the whole SVG which all your different shapes stacked right on top of each other. in the top right corner of the SVG. Or draw all your paths in the top right corner in your current SVG where you square also starts instead of in the middle. Hope it helps and happy tweening!

Ah, great! I didn't know this one. I think this is exactly what i need, thank you so much! Will keep you updated when i hopefully have a working solution

I was thinking for this one.

Thanks, really appreciate the help. This is lovely: let debouncedSetup = gsap.delayedCall(0.2, setup).pause(); window.addEventListener("resize", () => debouncedSetup.restart(true)); Using gsap.context() also makes it much easier to setup/revert vs doing it manually. Thanks again.

Hi @Robert Pfaff don't be discouraged, the hand drawn animation is fairly complicated and requires a good understanding of design tools. Personally I find this tutorial by our own @PointC the best resource on this topic https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Most of the work will be in setting up your design file and exporting the paths correctly. I would start the same as @PointC with the paths visible and giving them all a distinct color currently you're now closing your mask id not correctly, so that is issue one. I would disable all the <defs> and <mask> for now and just start by getting the path you want to use as a mask drawn to the Codepen. You also forgot the # for the color or the mask paths, so that might be also causing your issue. https://codepen.io/mvaneijgen/pen/ZYEpdeB?editors=1100 Ah, that seems the be all of your issues. Highly recommend taking it one step at a time. Get all the things drawing to the screen first, so that you can see what is happening under the hood. Then fork your work and get the mask part working. Thanking thinks one step a a time can help you a lot. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/RNwGzVq?editors=0010

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! Edit: check out @GreenSock function to fix any shape automagicly! 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.

Thank you so much, that is definitely a much cleaner and streamlined way of doing it, and I didn't know about the wrap method which makes things quite a bit easier. I definitely need to read more of the docs, but there are many possible methods and uses that it can get quite overwhelming.

https://codepen.io/miltil/pen/azbqgEy Thank you for the suggestion! For future reference, in case someone else is looking to solve this same problem, here's how it looks when implemented!

Maybe something like this using a Timeline and the call method: https://gsap.com/docs/v3/GSAP/Timeline/call() https://codepen.io/GreenSock/pen/ogNpXvY Hopefully this helps Happy Tweening!

Hi @Cortrah welcome to the forum and thanks for being a (long time) club member 🎉 I think the class names are really personal. The class names I use probably don't click that well with you and you would name things differently. What I find the most important with GSAP is having a good starting point, so what does my layout look like without any GSAP in it. Most of the time I like to start with all things at a known position, so that my GSAP code can just be a repeat of each element. A good example for this I find is my "card stacking" post, see below. It animates a bunch of cards from a known position .from() or .to() some other position. Most of the time with these effects you'll want the first or last card to do something differently and the first mistake people make is giving some of the cards different CSS which they then have to solve with complex Javascript. This post uses some clever CSS grid trick to stack thing right on top of each other. Some time ago you would have done it with absolute positioning, but the problem with that is that the elements lose being part of the document flow. It is still possible it just is more work, so most of the time we give the tips here pick some thing smarter which then will make you live a lot easier. make the element the size of the viewport by default and then animate it .from() some other position/scale it probably the easiest solution. Or look in to the Flip plugin to animate between two states. I'm not sure what you mean by this. But what you can do is use function base values https://gsap.com/docs/v3/GSAP/Tween/#function-based-values where you instead of having a hard coded value use a function that dynamically gets the value and tell GSAP recalculate if anything changes. All depends on what you want to do, but there isn't something inherently specific with flexbox and GSAP As always with ScrollTrigger it is just animating something, so first build an animation then hook that to ScrollTrigger. If you try to tackle the scrolling part first you will make things a lot more complicated. If you have a specific question we would love to take a look at a minimal demo, but I'm not completely sure what you mean with a "general cell class". Hope it helps and happy tweening!

Hi, That is not a video is a sequence of images rendered in canvas and updated using ScrollTrigger. Here is the base URL for the images: https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/ Goes from image 0001.jpg to 0147.jpg after the final slash (/). Hopefully this clear things up Happy Tweening!

Thanks again. What a great table. It's a useful tool. If anyone asks, I can tell them why or why not they need a build tool. Sincerely, it helps a bunch. Take care, Robert

Thanks for your timely response. I have watched the installation video several times (LOL). I did place an .npmrc file at the root of the project, and I remember installing the gsap-bonus.tgz file in the original site. I assume it carried over to the duplicated site I used to experiement with Parcel. I need to regroup with a fresh head when I can focus. I'm exhausted, but I wanted to say thanks. I greatly appreciate your time and guidance.

Yikes! I totally missed this thread, @lucky111. Sorry! Yes, I would definitely recommend the helper function in the docs, no question. It will perform significantly better because it doesn't constantly create a new tween over and over again on each tick to accomplish the scrubbing technique. Plus the non-GreenSock one didn't set overwrite: true, so it was creating a lot of conflicting tweens. You'd probably never notice functionally, but it's bad for performance. It gives you a lot more flexibility, as mentioned above - you can add any ScrollTrigger-related value to the object you pass in. You're not limited to "fast", "medium" and "slow" speeds - you can set ANY end value, like end: "+=2000" or whatever. But it still works with speed if you prefer that syntax. So overall it's more concise, it performs much better, and offers way more flexibility. I don't mean that as a knock on Chris's version - he built that when he was very new to ScrollTrigger. We all know what a genius he is with animation in general - I just have an unfair advantage of knowing all the ins and outs of ScrollTrigger (having built it)