Leaderboard

Hi @Stasicus welcome to the forum! Check out this awesome tutorial by our own @Carl better than this I can't explain how it works. Hope it helps and happy tweening!

Indeed without a minimal demo seeing the code in action it is hard to help you debug. That said have you seen my post on how to animate all types of different clip masks? Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/jOdJGQq

If you want to overlap each little group of elements, I'd go with a child timeline for each group and add those to a parent. The parent then plays/reverses on click. Something like this. https://codepen.io/PointC/pen/jORKGax The overlap is on line 47. Each child timeline is 0.45 seconds in duration so I overlapped by 0.2 seconds (approximately half way), but set everything to your liking. The nice thing with a parent timeline is you can set a timeScale too if everything is too fast or slow for your needs. Happy tweening.

Don't pin just the header pin the whole block and move the content inside. Same as the Stackblitz demo. Again everything in GSAP is an animation. Also always make sure you're loading the latest versions of the plugins, your demo loaded version 3.4.0 we're currently at 3.12.5! https://codepen.io/mvaneijgen/pen/MWRXJgM?editors=0010

sure - just use the start/end properties motionPath: { align: sparklePath, path: sparklePath, alignOrigin: [0.5, -0.5], start: 1, end: 0 }, Happy tweening.

Looks like they just use a curved path in the SVG and scale the y from 0 → 1 on scroll. This should get you started. https://codepen.io/PointC/pen/abxYroe Happy tweening.

Yeah that is an easy fix, check out the video below if you need any help

GSAP is highly optimised and will get it's initial values on page load, but because you tween the same element twice they both get the same starting position and because you want the second (ScrollTrigger) animation to wait for the first one to end you have to tell it to that tween some how. Luckily GSAP has you covered with immediateRender: false, if you put that on the second tween everything works as expected. Hope it helps and happy tweening! https://stackblitz.com/edit/stackblitz-starters-cgdvlq?file=components%2FBanner.tsx

Welcome to the forum. I'd probably use a yoyo and repeat:1 for the opacity in/out. Also making sure the ease is set to none as this is a scrub:true situation. https://codepen.io/PointC/pen/dyLwoej Hopefully that helps. Happy tweening and welcome aboard.

Welcome to the forum. If I understand you correctly, I think you'd want to tween the drawSVG path from 0% 10% → 90% 100%. That way you're always showing 10%. You could also add a tween at the beginning or end to make it appear/disappear too. Happy tweening and welcome aboard. https://codepen.io/PointC/pen/vYMQXWe

Hi @maoux welcome to the forum! Your in luck, it is even easier now. Check out useGSAP()!

This is mostly a structure question and hasn't really to do with GSAP. I would abstract out what are toggle and what are expended elements and then expand all the elements that are connected to the toggle. As you see in your example you don't want to expand elements that have them self content that also should expand, so the HTML structure (and CSS) is really important in this case. I've given each element data-toggle and data-expand with their respective key (eg the name on the link). Right now it doesn't close, personally I don't like it when toggles close them selfs and I think it is bad UX. What If I want to compare content one and three? You could could add a data-close and find all the elements that should close if some data-toggle is clicked, but agin this isn't really a GSAP question, but again more JS logic and is beyond the scope of this forum. Still hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/BaEqJOM?editors=1101

I think something like this is what you're looking for. I’ve placed some comments in your JS to better explain things, please be sure to read through them! https://codepen.io/mvaneijgen/pen/bGJxXXG?editors=0010 For React, if you have set up the useGSAP() hook correctly and your elements have the same classes and CSS everything should just be a drop in replacement from Codepen. Be suer to check out the following if you need some more guidance. If you're stuck we also have Stackblitz starter templates for all the major frameworks. Again hope it helps and happy tweening!

Hey! Just parachuting in here, but maybe we're focusing on the solution you've attempted instead of the problem you're trying to solve? This made me remember something that may be useful? Without using a motion path, another common animation pattern for curved motion is to animate the x and y values with different eases to get a curve. Check out this demo - https://codepen.io/snorkltv/pen/dyoxXaQ This is useful because it's not trying to animate the element through set coordinates, it's more dynamic. There's a start and end and it's the ease that's handling time rather than position to make the path curved I needed to do a curved flip animation a while back and found out that you can separate out x and y and animate them individually with customProps. (undocumented right now because animating the properties in a flip animation is quite a rare need due to it's dynamic/transitionary nature) but if you want a curved path - it allows you to separate out the properties in the flip animation and ease them individually. https://codepen.io/GreenSock/pen/bGjXGeX/cc6a1577ab5d5ea8ab0722dc407a7929?editors=0010 Maybe that will achieve the "scenic taxi route" for you?

Thanks for providing the demo, it made my approach much easier than starting completely from scratch. This is a cool effect and as stated earlier, I'd probably try to use SVG for this 99% of the time. However, I was intrigued about making a more flexible clipPath approach. In the demo below I animate the y value of each bar independently using a stagger. https://codepen.io/snorkltv/pen/rNbrEra?editors=0010 In the onUpdate I glue all the values together into a giant clipPath string. Using this technique you can animate the bars from center, start, or end adjust the stagger's each amount adjust the distribution of start times with an ease (in the stagger object)

Hi there! Thanks for the kind words. Yeah, canvas is usually better for stuff with lots of elements. Pixi is a library that uses canvas so it makes stuff a little easier than using the browser API directly. Your example is pretty simple though so maybe you could just skip pixi and use canvas? Here's a canvas demo that may help https://codepen.io/ninja1pro/pen/abMMOar?editors=1010 And a pixi demo (this is using old GSAP syntax - but it's using pixi to add images so that's helpful) https://codepen.io/Koenie/pen/qBEJVeN The pixi docs are good too https://pixijs.com/8.x/guides/components/sprites

Hi, That's because of the way the Horizontal Loop helper function works, nothing more. The helper function moves a group of items in the direction you tell it to (reversed config option) and when that element reaches the edge of it's parent is move to the opposite side nothing more. Sure enough sounds simple but the logic behind it in order to make it fully responsive and performant is not 😉. https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop With that being said, why are you trying to animate elements in different parents or outside the parent? I fail to see the logic behind it. We have these demos that use the Observer Plugin and ScrollTrigger to change the direction and speed of the loop instance: https://codepen.io/GreenSock/pen/zYaxEKV https://codepen.io/GreenSock/pen/GRwePYw Finally is worth noticing that you have only two elements in your loop, so for obvious reasons there is going to be a jump and empty space when the elements have to be placed at the start again. Is a good idea to have enough elements to use the entire width of the screen ( in large screens of course). Hopefully this clear things up Happy Tweening!

It's not really a bug. It's just a fundamental logic problem in the way you're setting things up. Let me explain... In order for a callback to fire, the playhead must cross that spot on its parent timeline, or land directly on top of it. So it's based on the playhead moving (its new position). The timeline doesn't render for the first time until the next tick (it'd be silly to render right away by default because the playhead hasn't moved anywhere yet, so it'd be a waste of CPU cycles). That's why the very first one didn't fire right away. The timeline's playhead updates on each "tick" which is typically about every 16.67ms but that really depends on the browser and how busy the CPU is, etc. Your timeline is 2 seconds long and has repeat: -1. So let's say it renders almost at the end, at like 1.9857 seconds, and then on the next tick, the totalTime renders at 2.013 which means that it went past the end and wrapped around to the beginning, and 0.013 seconds into the timeline (from the start). In that ONE tick, it'd fire that callback that's at the very end of the timeline AND since it looped back to the beginning and went a little bit past, it ALSO triggers the callback that's sitting at the very start. Great. BUT What if the playhead happens to land EXACTLY at the end of the timeline (2 seconds precisely)? What do you think should happen? Obviously the callback at the end should fire, but should the callback that's sitting at the very START of the timeline also fire? I mean the end of the timeline and the start of the timeline are not the same technically, so it'd be weird if both fired. The playhead can't be at 2 seconds AND at 0 seconds. It wouldn't make a lot of sense to fire the callbacks from BOTH places on that ONE tick. See the problem? There are many ways to accomplish what I think you're trying to do there (alter visibility of things in a synchronized way), but I'd need to see what other requirements you have in order to offer the best recommendation. Thanks for the excellent minimal demo, by the way. 👍

As with everything to do with GSAP, build an animation. When wanting to create a scrolling effect you frist have to remove the scrolling part and just focus on the animation you want to happen. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ A while back I've written a guide how to create a card stacking effect, but the logic you're looking for can also be build with it. Below a demo that has a horizontal animation, it is probably not 100% what you're looking for, but if you give it a go I think you'll be able to get it to do what you want with the resources provided. If you still need help please provide a minimal demo showing what you've tried your self and someone here will be happy to point you in the right direction. Happy tweening! https://codepen.io/mvaneijgen/pen/poYzaJW

We're back up again everyone! Thanks for bearing with us through this outage. 💚 We appreciate you all!

@jdhadwin Hello there. While your demo is not exactly minimal, which makes it kind of hard to see through everything, on a quick glimpse I noticed, that you are trying to animate svg elements that are in <g> groups from a scale of 0, which I think is at least part of your problem - and I don't think this specifically is GSAP related. I stumbled upon this a few days ago, too - happening for me in all Chromium based browsers on Windows 11. It appears to be a bug in the chromium browser base that was already reported in September 2022 by @Cassie and later marked as solved from what I can tell reading that old bug report - but now it seems to have resurfaced. @Cassie if you find the time, could your maybe re-new that report or something like that? ... I have absolutely no clue how those work, tbh. https://issues.chromium.org/issues/40240236 These following pens don't use GSAP at all - and as you should be able to see, when elements in groups are being 'manipulated' so they start out with a scale of 0 and then changed later on, their values will get changed properly inline on the element - but the element just won't get rendered then (unless you resize the window along the process, e.g., or scroll the SVG fully out of viewport and then back into view again). https://codepen.io/akapowl/pen/vYMWZrL This will not happen with elements that are not in <g> groups, though. https://codepen.io/akapowl/pen/QWPOgzm What helped for me as a workaround was to tween from a very small scale like 0.001 instead of absolute 0. Maybe that can help you out somehow, until that issue gets resolved again. I will add, that this is just something I was able to quickly notice. If it doesn't help in your case, and you suspect that there still might be some issues with GSAP, please create a demo that is boiled down to the bare minimum but still reproduces the issue you're having, so it is easier to identify for others, what could be causing it. https://codepen.io/akapowl/pen/dyLZzyM

You don't need GSAP to add a class to an element, just use .classList.add(yourClass); The problem with that is that it either has the class or it does not, there is no in-between state, so nothing will animate, see below. You're on the GSAP forum, so I think you look to animate things, then just create an animation for each property you want to change, much more fun and easier to control! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyLzJxg?editors=0011

Yep, same issue - you're creating things out of order, thus they refresh in the wrong order. For example, let's say elementA is 100px from the top of the screen, and there's a ScrollTrigger that triggers when that hits the top of the screen ("top top"). So normally, the start would be 100. But what if there's another ScrollTrigger that pins an element above that one for 1000px - that'd push everything down, thus that element should trigger at 1100px instead of 100px. If ScrollTrigger calculates them in the wrong order, it'd set the first one to a start of 100px (because the pinning one hasn't been factored in yet). Here's a helper function that you can call after all of your elements are in place, and it'll order things based on their proximity to the top of the viewport: function verticalSort() { let scroll = window.pageYOffset; ScrollTrigger.getAll().forEach(t => t._sortY = t.trigger ? scroll + t.trigger.getBoundingClientRect().top : t.start + window.innerHeight); ScrollTrigger.sort((a, b) => a._sortY - b._sortY); } https://codepen.io/GreenSock/pen/ZEZPqyd?editors=0010 Better? Of course you could solve everything by explicitly stating the unique refreshPriority for each, but the above function seemed easier and it should work in most cases.

Are you sure you've updated your pen? It is always best to relink the pen or even fork, so that in the thread we can see the progress of the current version of that time. To me it seems like you've removed the functions from the parameters, this is importent, because it indicates to GSAP that is can recalculate the values, if you leave this out you tell GSAP get the value once and never update it! // From height: gsap.utils.random(10, 100, true), // Is already a function width: gsap.utils.random(0, 100) + "%", // not a fucntion // To height: () => gsap.utils.random(10, 100, true), // Better save and also convert it to a function width: () => gsap.utils.random(0, 100) + "%", // Convert to function Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/XWQOGpa?editors=0010

Oh yes, that's exactly what i was looking for ... wouldn't have guessed i could morphSVG from a class name to another class name. Best library ever! (I promise to learn to use codepen ... it's just firefox obfuscates referrers and these embeds cause all kind of warnings, so i'm somewhat reluctant, but that's my problem to solve.)

hi @alexr8 maybe these 2 demos help 1 with draggable and 1 without https://codepen.io/GreenSock/pen/BaQXjWw?editors=0010 https://codepen.io/GreenSock/pen/RwKwLWK

You where almost there! I've move your timeline outside the loop and add the ScrollTrigger logic to the one timeline, then I've add all your tweens to that one timeline and let ScrollTrigger control it. Does that make sense? Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/qBwLJXX?editors=1010

We have several mouse follow effect threads. Here are a couple that should point you in the right direction. Happy tweening.

https://codepen.io/GreenSock/pen/MWRPXMr?editors=0011

@Chromium One of the MOST important things to us at GreenSock is cultivating a warm, smart, non-shaming community. We're widely known as having forums that are uncommonly so. Most tech communities are characterized by harsh, arrogant, shaming responses. When someone has a question, it takes a lot of humility and courage to risk posting. We get it. We really try to be compassionate and gentle. It sounds like you felt criticized and insulted. I'm very sorry if that was your experience. We actively work to avoid that; if we failed, I hope you'll forgive us. Glad we ultimately got on the same page with a solution. 🥳

Hi @Haris Khan welcome to the forum! A timeline is the most powerful tool in GSAP with it you can put tweens in a sequence and thus in this case have ScrollTrigger play your timeline in full. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/bGJxyeV?editors=0010

Thanks for the image. That's a great way to try to keep track of the points. Sorry, for any confusion, but in my haste I actually had the "bar3" values duplicated in my clipPath code which is why you were seeing extra points. Thanks for catching that. I removed the extra row of values. As for the from values, you can use those point objects for each bar to come up with a totally custom starting position using a set(). In the demo below I removed the animation to hopefully make it easier to understand how each bar now has a custom y starting value https://codepen.io/snorkltv/pen/qBwMPMw For what it's worth, keeping track of all those points in the clipPath string is pretty tricky for me too, so don't feel bad if it feels like a lot ot take in. As for using svg, the post @mvaneijgen linked to is quite comprehenisve. However, below is a demo from one of my svg lessons if it helps https://codepen.io/snorkltv/pen/rNKVrYx there are now 10 clipping and masking video lessons in SVG Animation with GreenSock if you want to dive deeper.

There you go https://codepen.io/SahilAFX/pen/eYojXbm I have set fixed dimensions for container for demo. When you make it responsive, you will need to change the value by which you divide pos.y. You can use getBBox method of svg to get current height of the path. You will need to tweak animation and calculation for desired effect.

Hi, this is a very very old thread. The correct way to do this now is using our flip plugin. https://codepen.io/GreenSock/pen/zYqLjre Hope this helps!

Ha, that is not a good sign! "Keep calm and grap some calming tea", there is probably some server down, if you want to continu working, just grap the CDN files from https://cdn.jsdelivr.net (grap the links via our installer tool) and swap them out in your pen and we're currently looking in to getting the https://unpkg.co packages back in action!

All clear. I'm new to GSAP, so thanks for helping me get up to speed.

The demo you've shared is a way of working with ScrollTrigger, but personally I find it a hard way to wrap my head around what this is doing and how to modify it. What if you want to header to spin before it pins or move the white boxes in one by one from opacity: 0. That is why when starting out treating everything as an animation and worry about the scrolling part later. Yes, but a timeline can have a hundred animations on it. You could create a timeline + ScrollTrigger combo for each section, but if you just want things to happen in sequence you could easily just create one timeline with all the animations on it and one ScrollTrigger that controls that one timeline. I've written a guide how to create a card stacking effect and what is the logic behind it. I think reading this will help you understand how with this way you can easily modify what is happening on scroll and thus make any type of animation you want. Where the demo you've shared is just for that one effect and isn't really easily modified to do anything else. Also below a demo from the collection of that post that shows you with a timeline every 'section' can have it's own effect which is easily possible with this setup, but doesn't mean you need to use it, just to demonstrate. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/abMbwYd

Hi @Rodrigo, 🤦‍♂️ Total facepalm moment, thank you for picking up on that! Thanks for the resources also, I've been looking over them and they definitely feel more like home to me. I imagine we'll be mixing both react components and vanilla JS in an upcoming project, so it will be nice to use an animation library that's more framework agnostic than what Framer Motion offers. Going forward I anticipate GSAP becoming a staple in our future projects. Thanks again!

Hi, I think you are overcomplicating this quite a bit. It should be as simple as this: https://codepen.io/GreenSock/pen/zYXWVdw Happy Tweening!

@Rodrigo Thanks! That's what I ended up doing. Once you get the hang of going back and forth to the ease visualizer (it would just be impossible without it) you begin to see the relations between the curves and the path movement. It's laborious but interesting! As a reference for anyone trying this approach in a framework with SSR (I'm using Next.JS) always leave your markers on until you are done! I came across a problem with the ScrollTriggers getting moved up when I refreshed the page (because the whole document wasn't ready), and only noticed it far ahead. Had to implement a fix (A ScrollTrigger on the 'body' with a ScrollTrigger.refresh();) and had to start over... I would have noticed the markers being offset if they were on... <<trial and error>> indeed. @GreenSock This helper function is like magic to me! Your initial description says it all <<Helper function that returns an ease that bends time>>! I love it. It's beyond my current coding full grasp, I can kinda read the code, but towards the end get lost in its complexity. None the less it mostly works. I'll definitely use it eventually. Thank you both! As always, the best community I've ever seen.

Not always no, it's dependent on your font loading strategy https://stackoverflow.com/questions/25223470/does-domcontentloaded-wait-for-web-fonts-firefox#:~:text=NO%2C it does NOT!,to make it pixel perfect.&text=inside the head (it's called browser preload hints).

We're back up again everyone! Thanks for bearing with us through this outage. 💚

Commented on that thread again! 🫠

Hi, The demo I shared in my previous post was a way to show you how to do this a learning resource of sorts, nothing more. We don't have the time resources to provide fully working solutions for our users or give free general consulting in these free forums. We have to keep our focus on solving GSAP related questions and issues. In order to understand how this works I recommend you to check this guide by David DeSandro: https://3dtransforms.desandro.com/carousel Finally if you want to use the Motion Path Plugin you can check any of these threads: Also you can see this video where @Carl goes into a lot of detail about this: Hopefully this helps. Happy Tweening!

Hi there! Our React docs are a good place to start. There's everything you need to know there in order to port the animation over to react https://gsap.com/resources/React/ If you need specific help, pop back with a demo showing what you've tried.

hello, i need support from a gsap expert for two website elements (slider & scrolltriggered sections). the implementation and construction of the html framework should be done in webflow. who has the time and inclination?

For the text I would use SplitText https://gsap.com/docs/v3/Plugins/SplitText/ and then stagger each the letters Keep in mind all ScrollTrigger is doing is animating your animation on scroll, so just build the animation and don't worry about ScrollTrigger at all. I've written a guide how to create card stacking effects and the logic can be applied here 1 on 1, you just have more elements that stack, so before doing anything you first want to lay everything out with CSS. See the post below and a demo from the post that animates a clipPath, which is also part of the animation I would suggest just start building in Codepen and first do all the CSS, then try to animate some things and only when you're done start thinking about ScrollTrigger. Pro tip in between fork your work, so you have versions on which you can fall back. When you get stuck post back here with a demo and one particular question and some one here will be sure to point you in the right direction. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GReQYBr

Hi, On top of @mvaneijgen's great solution you could also use the onToggle callback from ScrollTrigger: onToggle Function - A callback for when the ScrollTrigger toggles from inactive to active or the other way around. This is typically when the scroll position moves past the "start" or "end" in either direction, but if it shoots past BOTH on the same tick, like if the user scrolls extremely fast, onToggle won't fire because the state hasn't changed. You can often use this one callback in the place of onEnter, onLeave, onEnterBack, and onLeaveBack by just checking the isActive property for toggling things. Here is a simple fork of your demo: https://codepen.io/GreenSock/pen/XWQaZdV Hopefully this helps. Happy Tweening!

Here's a simple code example of invalidateOnRefresh gsap.to(".el", { xPercent: () => window.innerWidth / 2, // here's a functional value that will update if the window size changes, (it will 'invalidate' on 'refresh') rotation: window.innerWidth / 2, // this value won't update scrollTrigger: { invalidateOnRefresh: true ... } })

Hi, Sorry about the difficulties but without a minimal demo there is not much we can do to help. On top of that we don't have the time resources to provide free general consulting or create something from scratch for our users. What you're trying to achieve is not the simplest thing to do, here are a few demos: https://codepen.io/osublake/pen/LYYJNmQ https://codepen.io/GreenSock/pen/MWPOQmo https://codepen.io/GreenSock/pen/MWqWvom Hopefully this helps. Happy Tweening!