Leaderboard

Hi @ErwinHeiser welcome to the forum! I wanted to jump on on top of @Carl's feedback with the following pen. DrawSVG can animate strokes, and your current paths don't have strokes only a fill color. As you can see below all your paths have two strokes around the path. If you want to animate something like this you have to redraw them with without a path and only one line with something like the pen or pencil tool from Illustrator, than I think it will look like you want it to. Oh and I also have removed pathLength="1" from the svg, never seen it before and don't know what it is doing and with it looked like it wasn't working. Hoop dat het helpt en veel geluk! https://codepen.io/mvaneijgen/pen/oNarmbv?editors=1010

Just modify your start/end percentages: https://codepen.io/PointC/pen/qBJzeYJ/892842f1056c3bd18093804305c0d32c Happy tweening.

Hi Sean! I also came from print long ago. I led the banner development team at a big agency for several years. After Flash died, we did HTML banners with GSAP, but the demand for that work declined. The banners we did became more templated and data-driven and it was hard to squeeze any fun animation in. I agree that the market for freelance banner developers is declining. The ad dollars go more to social media and search. I have a friend that specializes in Google Dynamic Ads, and apparently I'm not the only one who couldn't find work doing those even after learning their complicated platform. I think your site looks good and professional. You might want to expand your focus beyond ad banners. I was fortunate to find non-banner work specializing in SVG animation with GSAP. I wouldn't recommend spending too much time on Animate CC or GWD unless you're really set on staying with banners. Stay curious, maybe try React, Svelte, After Effects, 3js. Good luck!

Also hi @ErwinHeiser! Lovely to see workshop people popping in to the forums 💜 FYI, pathLength="1" is only needed if you're animating with CSS. (from the workshop docs) It's a bit of a hack to get around the complicated lengths you have to deal with without GSAP helping you out!

Heya! So smoothOrigin shouldn't be needed in your case at all. Smooth Origin is only for when you're animating between positions that have separate centers of transformation (transform origins) It basically moves the origin point to wherever the transformed element has moved to, so that there aren't jumps. What you've likely got confused about is that the set call is instant, you can't see that transformation happen, so you can't see that the center of origin is different in that set call than in your tween. What's actually happening here is this... You're scaling down the arrow head to the top left corner of it's bounding box, then scaling it up from the bottom left. With smoothOrigin this 'bottom left' position is moved to align with the new position of the arrowhead, so when it scales up, it's in a different place, here's a demo. https://codepen.io/GreenSock/pen/bGmPJoE?editors=0010 This is just an added layer of confusion here because you don't need this behaviour at all, there's no need for you to be animating between different origin points. It sounds like you're just trying to scale the arrow up in the right place right? --- So let's look at transforms. An origin point is basically the center of rotation or transform. Spinning or rotation is easier to visualise, so let's talk about spinning for now. You can think of it like if you were to put a pin in a post it note and spin the paper around, the paper would spin around the place where you've put the pin. The origin. The difference between transformOrigin and SVGOrigin is to do with which bounding box is used for the origin point. You can choose to spin around a point on the element itself, or somewhere on the SVG canvas. Here - You can see one is spinning around it's own top left corner, and the other is spinning around the top left corner of the SVG. you can add overflow visible on the SVG to see, I just kept it hidden for now as it's a little tidier https://codepen.io/GreenSock/pen/YzJoMbK For your example, all you need to do is animate using the correct center or transformation, so something like this? .from(`.ray__arrow--right`, { scale: 0, transformOrigin: 'bottom center', ease: "none" }) @Carl recently did a video on transformOrigin so that might be a good one to check out if you're still a bit baffled! addendum - in terms of SVG vs HTML, the main thing is that HTML dom elements spin around their own center, whereas SVG elements, by default, spin around the top left corner of the SVG canvas. With GSAP the default is the top left corner of the element itself. Hope this helps!

Thank you for the demo. I removed the drawSVG code and just added a little code to color each of the 5 paths a unique color https://codepen.io/snorkltv/pen/ExdBrYO It appears the paths have some odd gaps in them. The green path is part of the ear on the boy and then it's also most of the girl but her arm has multiple paths (blue and yellow). I'm not sure if this makes it somehow impossible for drawSVG to calculate stroke lengths and such, but my general advice is to start with much simpler paths. Draw them one at a time and test with DrawSVG often. DrawSVG handles multiple, continuous paths just fine. I don't think there was any problem with your actual code.

Hi, For the image part you could use the Flip Plugin in combination with ScrollTrigger. There are two approaches and both rely on reparenting the target element. This one uses ScrollTrigger srcub for the Flip animation and is a bit more complex in order to accommodate for window resizes: https://codepen.io/GreenSock/pen/bGxOjeP This one is simpler and it uses the callbacks ScrollTrigger has for moving the image: https://codepen.io/GreenSock/pen/yLjKPEm As for the letters, you are making one of the ScrollTrigger mistakes we have referenced in the docs: let tl = gsap.timeline({ scrollTrigger: { trigger: ".secondPinArea", pin: true, markers: false, start: "top top", scrub: 1, end: "+=" + pinAmount } }); ///Fade the letters C(O)DING in -- more failure gsap.utils.toArray(".secondPinArea div").forEach((section) => { tl.from(section, { opacity: 0, immediateRender: false, scrollTrigger: { trigger: ".secondPinArea", anticipatePin: 1, start: "top top", end: "+=50", markers: true } }); }); Here you have a Timeline instances. Timelines are, among other things, containers of animations and they control the position of each animation's playhead. On top of that you have ScrollTrigger that ties up the progress of the Timeline to the scroll position. So far so good. Then you add an instance for each element in the loop to the same Timeline and create a ScrollTrigger for each particular instance. So now you have the Timeline trying to control the playhead of each instance, that particular timeline progress is updated by the scroll position, but at the same time the ScrollTrigger instance of each instance is also fighting to control each instance's progress with a different scroll amount. Sure the start point is the same but the end point is not. So at the end who has control of the instances in the loop? The timeline, ScrollTrigger? See the issue? The main point is not put ScrollTrigger on instances that are in a Timeline, create your ScrollTrigger in the timeline. Also you don't need to run a loop and add each instance to the timeline, just pass the selector to GSAP and use Staggers: let tl = gsap.timeline({ scrollTrigger: { trigger: ".secondPinArea", pin: true, markers: false, start: "top top", scrub: 1, end: "+=" + pinAmount } }); tl.from(".secondPinArea div", { opacity: 0, stagger: 0.1, }); Here is a fork of your codepen: https://codepen.io/GreenSock/pen/OJBeeYG Hopefully this helps. Happy Tweening!

I am by far no expert and only learning GSAP myself for the last week or so, but heres what I came up with which works, but be careful as it may have problems. In my eye, you were not actually seleccting the number within each section, so I added those parts into the sections.forEach https://codepen.io/darkuss/pen/poxXXvY

No need to feel stupid at all, @Akash Ranjan! That's not how we see things around here. We all have had times where we couldn't see a particular solution at first...and then we think "oh, why didn't I think of that?" - I've been there plenty of times myself. Enjoy the tools.

Hi @benpickle welcome to the forum and being a Club Greensock member 🎉 Here is a pen which uses ScrollTrigger.observe() an then disables it self and goes over in a ScrollTrigger "normal scroll". Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/oNdNLxL?editors=0010

A GSAP tale: One goofy guy’s odyssey from knowing nothing to knowing just enough to confuse himself. (This is crazy long so feel free to jump to the epic conclusion). Greetings fellow GreenSockers. The end of this week marks the one-year anniversary of my first post on the forum so I thought I’d take the opportunity to share my 12-month story and hopefully encourage others to jump into the conversations around here. Maybe you’ll recognize yourself in some of the things I’ve experienced. My quick history in a nutshell Web design and coding is a second career for me. After 15 years of owning and operating a photography studio and processing lab (back in the film days - yup - I’m old), the digital camera came along and changed that industry, which necessitated a new career for me. I shifted to video production, which led to motion graphics and finally to web design. Our little agency now offers all those services. The web design clients never needed anything fancy so JavaScript took a back seat to HTML & CSS only sites for a number of years. JavaScript & GSAP: false starts and other obligations I first discovered GSAP a few years ago, but only tried it briefly. It looked cool, but with the time obligations of field video work and motion graphics jobs, it wasn’t something I could work into the schedule. Besides that, it was JavaScript – too complicated I thought. I knew JavaScript was the third piece of a good web designer’s skillset along with HTML and CSS, but I always convinced myself that I didn’t have the time and the sites we built didn’t need it. JavaScript Books + Classes = Fail I did make a few attempts at reading some JavaScript books and working through some online tutorials, but it just never ‘stuck’. Maybe the examples were too theoretical and dry or they were the wrong books and classes. I really don’t know, but I abandoned the learning process a number of times. Cut and Paste mentality Why did I really need to learn anyway? You can just Google what you need, cut and paste some code and presto – you’ve got some working JavaScript or jQuery. I only understood a small portion of what I was cutting and pasting, but hey… it worked so the problem was solved. That’s how I operated for quite some time. What’s a loop? What’s an array? What’s an object? Who cares? Wait a minute. This is ridiculous. Last spring, I was remodeling our company website and I had all these grand visions about making things move and behave in certain ways. Googling for code just wasn’t cutting it. I suddenly felt stupid. “This is ridiculous!” I thought. I should be able to learn how to write my own code. Oh yeah, I remembered that GreenSock thing I had looked at a few times and abandoned. That might work. Maybe I could actually learn how to use it this time. I become a forum lurker I started lurking in the shadows of the forum. After reading a lot of posts, I saw people asking many types of questions from simple to crazy complicated (at least to me). Two things I noticed were that every effort was made to find an answer (no matter the difficulty level of the question) and not one post was condescending or snarky. That’s quite rare on the ol’ interwebs, isn’t it? Hmmmm…maybe I’m in the right place. Oh boy… time to ask a question of my own One of the great things about learning GSAP is you’ll also pick up a lot of other JavaScript and/or jQuery along the way. I kept reading and practicing with some simple tweens, but now I had a question. Dare I post? I suppose, like many others, I feared looking like an idiot even though the forum members and moderators seemed quite nice and helpful. I do several dumb things every day so you’d think I’d be used to it by now. Oh well, here goes. My first question had to do with the indexOf() a Draggable snap array. Within 30 minutes, Diaco and Rodrigo had posted great answers and neither one called me stupid! Yay – how cool. I get hooked on GSAP and the forum About that same time, I decided our company should discontinue on-site video production and switch to studio only filming. I got tired of lugging loads of video gear in and out of buildings – it’s quite tiring and as I mentioned earlier – I’m old. This freed up some time and I decided to dedicate that time to learning GSAP and maybe, one day, even helping others. It wasn’t too long and I actually knew the answer to a forum question. I posted some information and wow – a little red indicator lit up on my control panel. Someone liked something I wrote. How fun – I’m hooked. Carl makes direct contact I continued to learn and experiment. I posted a few additional questions of my own, but I tried to answer more than I asked. If someone posted a question for which I had no answer, I tried to look it up in the docs and figure it out. Most of the time I was far too slow and Jack, Carl or one of the mods would already have the answer posted before I was done reading the question, but it was an interesting way to learn. I did sneak in a few good answers, which led to a private message from Carl. He thanked me for participating and helping in the forums. I thought it was pretty cool that a super smart guy like Professor Schooff would take the time to do that for little ol’ me. My decision to dedicate time to the platform and forum was reinforced. http://i.imgur.com/hdaB73Y.jpg Blake and I have a conversation I don’t recall if it was a back and forth in a forum post or a private message conversation, but Blake told me something that, of course is obvious, but it stuck with me and is important for all of us to remember. He mentioned that we all enter this learning process knowing nothing. If someone of Blake’s considerable skill level can be humble enough to remember first starting out in code, there may be hope for me after all. I guess if you think about it, there was a time when the simple concept of a variable was brand new to all of us. We’re not born with these abilities. They’re learned and we’re all at different points on the educational path. Never feel stupid for not knowing something. Moderator Promotion Throughout the last year, I’ve continued to learn and study both GSAP and JavaScript. Some of those books I abandoned in the past even make sense now. I’ve tried to be active in the GS community and answer as many forum questions as possible. If I’ve answered a question of yours, I hope you found it somewhat helpful. I’ve cranked out some fun CodePens and finally started a Twitter account to tweet them out. I am nowhere near an expert with GSAP or JavaScript, but I know so much more than I knew a year ago. Apparently I know enough to be entrusted with a forum promotion to Moderator status. I’m honored to be included on such an amazing team. 12 months down – what’s next? My agency duties are still numerous so I can’t dedicate full time to coding, but it remains something to which I’m committed and thoroughly enjoy. I started this 12-month GSAP journey just wanting the ability to write my own code rather than cutting and pasting the work of others. I’m confident I have achieved that, but I still have days when a simple piece of code just won’t coalesce in my brain and that can be frustrating. I guess we all have those days, right? I make several mistakes every day, but that’s o.k. too. I learn a lot more from my screw-ups than I ever do when it all goes right on the first try. I plan to keep learning and getting better and when I get stuck, I’ll be able to get an answer from this amazing community. I’ll continue to give back to the GS community by answering any questions that are within my abilities to do so. The super mods: Jonathan, Blake, Diaco and Rodrigo Thank you to my fellow moderators. You guys rock and have taught me so much. @Jonathan – if there is a browser bug, quirk or special fix that you are not aware of, I’ve yet to read about it. Your knowledge has helped me fix many pieces of code before they even became a problem. Plus, if I ever have a question of top/left vs. x/y, I know who I’ll ask. @Blake – if I could be half as good at coding as you, I’d be a very happy guy. Your work always teaches and inspires me. I don’t think you’re allowed to ever stop posting on the forum or we may all show up on your doorstep and ask questions. @Diaco – your code is always so concise. I deconstruct some of your pens and am astounded by how much you squeeze out of a few lines. If I made some of your pens from scratch, I’d have 20 variables, 5 loops, 12 tweens and 80 lines of code. You do the same with two variables and 4 lines of code. Amazing stuff. @Rodrigo – when searching the forum, I often land on one of your past posts and learn a lot. Your knowledge is vast and I wish you had more time to post around here. Your ninja skills are incredibly strong. Our superhero leaders @Carl – I’ve participated in several online forums ranging from graphic design to 3D to video production, but the GreenSock forum is the best and a big part of that is you. You not only provide great answers, but you do it in clever ways with just the right amount of humor thrown in here and there. The collection of videos you’ve made is invaluable and should be mandatory viewing for anyone interested in GSAP. I’ve seen you monitoring the forums at all hours of the day and even on weekends. When you get any sleep I’ll never know, but I thank you for your dedication and sharing your knowledge. @Jack – how you had the vision to start GreenSock and write the first version of the animation platform I can only imagine. I’m glad you did because GSAP is such an amazing collection of tools. The friendliness of the community is definitely following your lead. I don’t understand a lot of what you talk about sometimes, but I know enough to be amazed by your brilliance and talent. You call yourself just a guy who geeks out about code, but you’re more than that. You’re a smart and generous innovator who’s created a special brand and place on the web. I think I can safely speak for the community when I say we all appreciate the time and effort you put into helping us make beautiful and high-performance animations. Thank you sir. The epic conclusion. Well… maybe just a regular conclusion. If you didn’t read the whole post, I don’t blame you. It’s ridiculously long and I’m just some guy you don’t know so I’ll wrap it up with this bit of advice. Whether you’re a genius or feel like an idiot, it doesn’t matter. Try to learn one new thing each day and before you know it, a year will have passed and all those little bits will add up to new skills and abilities. If you’ve never posted on the forum, please jump in and participate. The more voices we have around here, the more we all benefit. If you need an answer, please don’t be afraid to ask a question. Believe me, I’m just some goofy guy in front of a computer. If I can learn this stuff, so can you. As I begin my second year in GreenSockLand, I’m looking forward to learning more, seeing everyone’s work and answering as many of your questions as I can. This is an amazing community and I encourage anyone reading this to set up an account and get involved. My best to all of my fellow GreenSockers. See you around the forums. Edit and Update (July 2020): I just made it to five years of hanging around the forum and you can read the continuation of my journey here. motiontricks.com Finally, without further ado, I introduce you to motiontricks.com - Craig (PointC) PS I made a little CodePen to commemorate my one-year forum anniversary. It’s how I felt before and after discovering the power of GSAP. Enjoy.

Hello all Thought I’d share my developments as I learn GSAP, coming from a print design background. I hope this kind of post is relevant to this forum. I’ve added a number of animations to my portfolio website - hegartyanimations.com - and looking to further develop my skills and polish my animations. This week I’ve reached out to a number of experienced developers and I’m grateful for all the feedback. I’ve had some positive comments but the feedback has confirmed my belief that I have some way to go yet to secure freelance work. I’ll work on cutting back on the number of GSAP animations and for the banners I really like, I will resize to different dimensions. Other advice has been to focus more on Animate CC and Google Web Designer. For the latter, it’s been recommended that I work on dynamic ads (Though I much prefer hand coding to using a timeline). I am acutely aware that I need to get some client work on the site and that’s my aim in the coming months. Finally, it has been remarked by several that the market for freelance html animated banner developers is on the decline. Some indicated that UI animators are much more in demand? I am considering increasing my knowledge of Webflow. My experience in FEWD has been limited to creating marketing websites using Bootstrap. It would be great to receive any comments on the above from experience GSAP banner developers. Thanks all for the continuing support from members this past few months. s

Hey thanks so much Geedix, I am definitely going to remain focused on GSAP and will widen my horizons beyond banners. Really not a great fan of Animate CC and GWD. And yes, animating SVGs is something I really enjoy. Thanks Cassie, will reach out to Joe. Have a great day/evening.

Hi @Tung Shark and welcome to the GreenSock forums! First thanks for being a Club GreenSock member and supporting GreenSock! 💚 There are a mix of issues in your setup, some are GSAP related and other are just HTML/CSS related. For example the cards container has a width of 100% but no height and since all it's children have an absolute position, the natural height of the parent is zero, so giving it a height of 100vh seems to work. Then you had this on your ScrollTrigger config: end: wheight * 5 + ' bottom', duration: 1, ScrollTrigger doesn't recognize duration as a config option so that's just ignored. Also if you want a ScrollTrigger to extend 5 times the height of the viewport just pass a relative percentage value like this: end: "+=500%" and ScrollTrigger will do the rest for you. Finally you don't need to pass this to a GSAP animation: stagger: 0.2, start: () => "top top", end: () => 'bottom bottom', Start and end are just for the ScrollTrigger config and are ignored in a GSAP animation. I forked your codepen and made a few changes to it and seems to work the way you intend: https://codepen.io/GreenSock/pen/LYgwPwZ Hopefully this helps. Happy Tweening!

Just echoing what Jack said and pointing you towards the issue - you're referencing a few club plugins directly from codepen. Those links won't work. A little FYI too - It's not great practice to use assets or files that other people are hosting, at best they may take those files down, at worst you may get CORS errors or even incur costs on someone if your site visitors hit their server too much. I once used a codepen hosted GSAP file for a banner ad back in the day, that was a disaster - so don't worry we've all been there 🫠

Hi, I updated the codepen to make the image animation visible as you scroll using the callback events: https://codepen.io/GreenSock/pen/OJBeeYG As for scrubbing the image Flip animation you can check this example: https://codepen.io/GreenSock/pen/bGxOjeP Making it work like that would require a second ScrollTrigger instance for moving the image to the final position, maybe using a wrapper around the image. Unfortunately we don't have the time resources to provide custom solutions for our users. I suggest you to study that codepen and see how it works. In this thread you can find some explaining about how that particular approach works: I'm not seeing any performance issue on Chrome and Firefox in Ubuntu 20 && 22. As for doing that without Flip, sure it can be done but it would require for you to create all the custom logic for that, something that Flip already does and it's highly optimized as it is. Hopefully this helps. Happy Tweening!

To me, this looks like you are almost pinned that area twice? I changed it to set the pin only one time for the main area, as it looks like you are animating the content in. With this change I dont see the jump effect anymore I added some area top and bottom for aesthetics to see how it could look in real life, see what you think https://codepen.io/darkuss/pen/vYVqovo

Would it be possible to move that to codepen? That stackblitz wants to run some cookies or soemthing and is getting blocked for me

Hi, I don't think there is need for all that &nbsp; there, maybe just a different HTML could be enough: <blockquote style="font-size: 18.21px; width: 305.735px; height: 55.8393px; font-style: normal; font-family: Roboto-Regular, gfs; text-decoration: none; transform: translate(144.927px, 0.663px); max-width: calc(100% - 22.7625px); text-align: center; text-transform: none; background: rgb(0, 0, 0); color: rgb(255, 255, 255); letter-spacing: 0em; line-height: 1.2; word-break: break-word; padding: 6px;"> <p class="sc-bdxVC lcokJp"> tom hello hello there how are you<br>rom<span class="right">hello</span> </p> </blockquote> <br> With this CSS: .right { margin-left: 25%; } Here is a fork of your codepen using the latest version of GSAP and SplitText as well: https://codepen.io/GreenSock/pen/jOejgYV Hopefully this helps. Happy Tweening!

Hi @i_dont_understand_gsap and welcome to the GreenSock forums! I see that you're not using GSAP Context in your code and that you're not doing proper cleanup in your effect hook. Since React 18 is super important to cleanup in your effect hook as explained here: Here you can learn more about GSAP Context: https://greensock.com/docs/v3/GSAP/gsap.context() Finally take a look at the resources in this page to get a better grasp about using GSAP in your React projects: Hopefully this helps. Happy Tweening!

@Cassie D'oh! Oh well, still finding my bearings Cheers!

We are actively searching for a highly skilled and knowledgeable professional with expertise in GSAP (GreenSock Animation Platform) to join our team on an ad-hoc basis. The ideal candidate will commence their engagement with us starting in early June. Expect 1-5 hours per week on average. As a GSAP Specialist/Guru, your main role will be to mentor, guide, and consult other developers with a base or average knowledge of GSAP. In addition, you will be responsible for developing and implementing high-quality animations and interactive experiences using the GreenSock Animation Platform.Your expertise will enhance the user experience and engagement across our WordPress platform. You will work closely with our design and development teams to bring ideas to life, ensuring smooth and visually stunning animations. Please read more here: https://docs.google.com/document/d/1lgS3drcrdeEUOjPWrdKT_RpdGQU0tn6kRDPCBvhA2Po/edit Write sr@webnorth.dk if this ad-hoc job seems interesting for you. Thanks in advance!

Hi @Brian_Open and welcome to the GreenSock forums! I don't think container animation is what you're looking for actually. If you check the example you posted the faster horizontal animation is not linked to the scroll bar but to the wheel event. I think a far better approach is to have a single timeline that has both horizontal animations, each with a different duration and also different number of repeats so the total time of each loop is the same. So the faster animation is 3 seconds and repeats 9 times (30 seconds, remember that the first run counts as a repeat ) and the slower is 10 seconds and repeats 2 times (30 seconds) . Here is a super simple example of this approach: https://codepen.io/GreenSock/pen/WNaqzOW Is worth noticing that this approach should allow you to use the container animation if you want/need to use that feature. Hopefully this helps. Happy Tweening!

Hi, Yeah for some reason codesandbox is being weird, it wouldn't be the first time 🤷‍♂️ Instead of finding a way to make the sandbox link work I ported the example to Stackblitz: https://stackblitz.com/edit/stackblitz-starters-91fcze?description=A create-react-app project based on react and react-dom&file=src%2FApp.js&title=React Starter I recommend you that for future questions just use Stackblitz, far more stable and less troubles than in codesandbox. Happy Tweening!

That's because you're fundamentally changing the layout/positioning of everything by opening/closing that accordion. Remember that ScrollTrigger pre-calculates the start/end positions for all ScrollTriggers so that it's extremely performant while scrolling. So for example, let's say that trigger for the horizontal section is calculated to start at a scroll position of 500...but then you open the accordion which PUSHES everything down by 100px. Well now that start position should be adjusted to be 600 instead of 500. All you need to do is force ScrollTrigger to refresh all of its calculations by putting ScrollTrigger.refresh() in your onComplete: https://codepen.io/GreenSock/pen/VwEJyaV?editors=0010

Hi, You have an odd setup IMHO. Why you have a useEffect listening for a change in a ref when you could just create a method and call it from the onComplete callback. Also right now you're toggling the isTweening value twice, when you animate the texts and when you animate the slides. I think this is a far better approach that uses GSAP Context correctly in order to properly cleanup all your GSAP instances in case the component is unmounted: https://codesandbox.io/s/withered-cookies-oe6smp?file=/src/App.js Hopefully this helps. Happy Tweening!

Hi, This is a far more complicated logic issue. The problem here is that at certain points the Y position of the rec is the same while the progress of the timeline keeps increasing as you scroll. This generates odd values for this: gsap.ticker.add(() => gsap.to(section_2_container, { x: 0, y: -( gsap.getProperty(rec, "y") - ((window.innerHeight - rec.clientHeight) * section_2.progress()) ) }) ); I tried different approaches for this, taking into account the Y position of the element in order to not move the container, but all of them resulted in space at the bottom of the element, which is the initial problem you had (I remember the other thread you created about this). I think the best course of action is a different approach for this: https://codepen.io/GreenSock/pen/xxyoLRz You can also explore the custom ease helper function by switching the ease option in the config object by changing it to this: // immediateRender: true, ease: pathEase(path), This might not be exactly what you need, but solving the issue you have in your current setup is a custom logic work that's beyond the scope of what we can do in these free forums. Unfortunately we don't have the time resources to provide that kind of custom work for our users. You can contact us for a consulting work or post in the Jobs & Freelance forums if you want. Hopefully this helps. Happy Tweening!

Hi, The only thing I can spot is this: if (splits.length) { splits.forEach((split, idx) => { split.revert(); if (tl) { split.elements.forEach((el) => { gsap.set(el, { clearProps: true }); }); } }); } No need to do clearProps after the revert method. The revert method does that for you, so this will have the same effect: if (splits.length) { splits.forEach((split, idx) => { split.revert(); }); } Also this shouldn't have any effect whatsoever: const tl = gsap.timeline({ pause: true, scrollTrigger: { trigger: rowJobs, toggleActions: "play pause resume reset", start: "25% bottom", markers: true, }, onStart: () => { // refresh scrollTrigger on page load to ensure correct scrollTrigger start/end tl.scrollTrigger.refresh(); } }); I don't see the use of that particular refresh method there, when the timeline that has that particular ScrollTrigger config starts, to refresh it's own ScrollTrigger instance. ScrollTrigger already watches for resize events so there is no need for that, if that's what you're aiming for. Other than that your code is quite clear. Hopefully this helps. Happy Tweening!

It looks to me like a logic issue in your code - you set up that initial tween to run no matter what, but you actually only want it to run if the page starts out scrolled to the very top (or maybe within the first window.innerHeight)? So currently you've set it up so that the two tweens would fight with each other when the page is scrolled down far enough (one is trying to fade it in and the other is scrubbing a timeline animation of that same element's opacity, etc. Wouldn't a conditional logic wrapper suffice?: https://codepen.io/GreenSock/pen/oNarvpL?editors=0010

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/jOeqbpJ Basically the idea is to tween the progress of a Tween/Timeline using Observer. Hopefully this helps. Happy Tweening!

@qqignatqq did you want to only apply that at the END of the animation? Or the start? Or only during the animation and then remove it after? By the way, you never need to use document.querySelector() to feed something into GSAP - it uses document.querySelectorAll() under the hood when you pass in selector text as the target. If you don't mind pointerEvents being set to "none" at the start of the tween, you could do: gsap.to('.contfeed', { duration: 0.5, opacity: 0.1, pointerEvents: "none" }); Or if you want it to only happen at the end, you could use an onComplete: gsap.to('.contfeed', { duration: 0.5, opacity: 0.1, onComplete: function() { this.targets()[0].style.pointerEvents = "none"; } }); Or a timeline: gsap.timeline().to('.contfeed', { duration: 0.5, opacity: 0.1 }).set('.contfeed', {pointerEvents: "none"}) Or keyframes: gsap.to('.contfeed', { keyframes:[ {duration: 5, opacity: 0.1}, {pointerEvents: "none"} ] }); Lots of options