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.

To me it seems there are around 11 rows on the site you share and some of the rows are already at some scale and other start from 0, so it looks like they keep growing, but there is just a finite number of rows. I also think they just scale to a final number of 1, but their initial size is just bigger then what is in my demo, but you can easily fix this by just changing the layout via CSS. These are not mutually exclusive, canvas is a way to draw things on the screen. GSAP doesn't draw anything it just animaties things that are a ready drawn on the screen. I've updated my pen a bit to include more rows and have more start animating from 0, to me this seems like on your reference (except they have them over lap more, which is just CSS) https://codepen.io/mvaneijgen/pen/zYXVYdr?editors=0010

Feels like the origin is much higher on the targets in that example. I also don't think there is any z rotation. Just a trick of the perspective. Here's a quick fork of your demo. I also switched to SplitText instead of SplitType. This is a GSAP forum after all. 😉 https://codepen.io/PointC/pen/dyLERxK Hopefully that helps. Happy tweening.

I would get in to the habit of never animating your trigger element, in this case it will probably be fine, but better save then sorry. I've wrapped your .trust-item in an element called .trigger and used that as the trigger element now your trigger and element you animate are separate. I've restructured your pen a bit, personally if a ScrollTrigger has an animation I like to combine the two, so there is no confusion what code does what. Then because you want things to animate first, but pin later, just add another ScrollTrigger that just does the pinning. I highly recommend reading the ScrollTrigger docs, just once to see what all kinds of awesome features are in there, because I've used a few. 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/mdgYRyq?editors=0010

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!

Hi @MarOne, You can check the resources in the Webflow installation page on our Learning Center: https://gsap.com/resources/Webflow#installation Also we have a brand new installation video, where @Cassie goes into a lot of detail including webflow: This starts right with webflow, but you can go to youtube and check the chapters on the video so you can jump directly to a specific section. Hopefully this helps. Happy Tweening!

Just so you know, you could just call tween.revert() instead of doing both kill() and clearProps. You could also record the progress in your resize handler, and then re-apply that to make things continuous: https://codepen.io/GreenSock/pen/ZEZNmpz?editors=0010

I think you'd just need to clearProps when you resize and kill the tween. https://codepen.io/PointC/pen/bGJyjYz/03ab931389596f7fd6e582a8f9c6c1ec But I agree with @Trapti, there are easier ways to do this with an SVG. Happy tweening.

I am not sure what is the issue with the current setup. But isn't it easier to just do with SVG and motion path.

You're having multiple issues here, my advise make it simple! Instead of having loops upon loops, just focus on the first animation you want at hand, just the basic version. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. Check out my post about making things simple. Hope it helps and happy tweening! Here an example with just the basic tweens and one element, just to get the basics down. Now this is working which allow you to focus on the scoping and looping for other elements. Again my advise keep forking your work this will create backups and thus you can fall back if something is not working. https://codepen.io/mvaneijgen/pen/RwOmoqV?editors=0010 Check out our own @Carl's tutorial if you want to have this seamlessly loop! https://www.youtube.com/watch?v=0DSkgXNFZHs

This is mainly a scoping issue. You have two .flickities elements and for each of these element you want to do some animation, so you'll need a .forEach loop for each of these elements. I have no idea what your animation should do, but you're having a lot of code that doesn't seem logical to me. Example a timeline has a repeat feature build in and setting repeat: -1 will repeat infinitely, so no need to build your own function. Also you're using the GSAP v2 syntax a lot has changed in v3 so I highly recommend check out this awesome getting started guide https://gsap.com/resources/get-started/ I've used the https://gsap.com/docs/v3/GSAP/UtilityMethods/selector() to scope the q(".flickity"), to the current .flickities element. I've disabled a lot of your code, because I can't figure out what it should be doing. Again check the getting started guide, it explains all the basic features you'll need in GSAP and also just read the docs once you'll be surprised how much is already build in to GSAP https://gsap.com/docs/v3/GSAP/Timeline/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/RwOmNOP?editors=0011

Hi @LVegetable welcome to the forum! Have you seen our Stackblitz starter templates? It has a boilerplate for all the major frameworks, including next.js In all my time developing websites I've never needed to overwrite the default scroll behaviour there is always a better way, I think. From your description I would also not read anything that needs to overwrite the default scroll behaviour. Your background can just be a fixed element and the other elements can just scroll or animate them with the y property in GSAP. Keep in mind that everything in GSAP is an animation, even things on scroll start out as an animation. Check out this tutorial how to work with ScrollTrigger Personally I always start in codepen and really focus on the logic I need before I bring it over to my framework. It usually takes me around 10 versions to get to a state I am happy with and then it will be trivial to port it over to what ever framework you like, but the web is basic HTML, CSS, JS so if that is solid it will work any where! You can work with React in codepen and you can then set it up like the pen below. But again, personally I would remove all abstractions and just focus on the basics and when that is working your can port it to what ever you like. Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/OJmQvLZ?editors=0010

I'd also recommend using a unique class as @Rodrigo suggested. You can, however, make it work with the original HTML by using a child combinator to choose only the direct descendants of the header-icons class. gsap.to('.header-icons > div', { Happy tweening.

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

Although this didn't feel intuitive to me in this scenario, autoScroll did fix the issue. Thanks a lot!

You can use scrollTo plugin to scroll to certain element, but because you are animating sections, you can't use them as reference. Instead, you need to wrap them in another wrapper so you can use this wrapper in scrollTo. https://codepen.io/SahilAFX/pen/jOReGmM

@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. 🥳

Fixed background only works if element and any of its parent element doesn't have any transform applied or doesn't have position set to fixed. In order to create scroll effect, ScrollSmoother wraps content in a fixed parent, you can see this by inspecting from dev tools. To achieve this effect in ScrollSmoother, you will need to position the image manually. https://codepen.io/SahilAFX/pen/GRLXaGJ

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

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.

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.

No, that isn't really possible to do a nested default value like that. But perhaps in the next release, I could add a ScrollToPlugin.config({ autoKill: true }) method. I don't think anyone has ever requested something like that before. It wouldn't be terribly expensive kb-wise. I assume you'd both vote for this addition?

Thanks Rodrigo, I mistakenly had the autoKill outside of the scrollTo, like this... //DON'T DO THIS// gsap.to(window, { duration: 1, scrollTo: '#anchor' + jumpChapter, autoKill: true }); //DON'T TO THIS//

Hi @Fumiho welcome to the forum! 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. You have four "hello" blocks and you want them to move off screen, but have the last one stay. Your logic right now is move them all 100% of their width times the number of .project elements, this is what it is doing now, but your logic is they should all do that expect for the last one, so just subtracted one from your calculations. This is why removing ScrollTrigger is such a powerful move, now you can check just the animation if it is doing what you expect it to do and don't have to worry about what is causing your issue. What could be even more powerful when debugging is changing out projects.length for a hard coded value eg just try the hard coded value of "4" and see what that does, then try "3" and see what that does, this always helps me. Getting dynamic values is great for final code, but before you can get there you first have to know what it is you're trying to do and trying hard coded values probably results in you finding your own solutions. A few weeks back I've written the following post with a philosophy that really helps me debug any project I'm working on, give it a read. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOyKwqa?editors=0010

The ScrollTrigger has a direction property that's 1 if the last scroll was forward, and -1 if it was backward. Sorta like: let tl = gsap.timeline({ scrollTrigger: { scrub: true, ... } }); tl.to(...); tl.add(() => { console.log("direction", tl.scrollTrigger.direction); }); Notice I'm using add() for the callback just because it's a little simpler than call() which is only useful if you're passing parameters (uncommon). Is that what you're looking for? If you're not using a ScrollTrigger at all, there's also a helper function for tracking the direction of an animation: https://gsap.com/docs/v3/HelperFunctions/helpers/trackDirection

Hi @Jumaworks, In fact with the latest update of the Horizontal Loop helper function Jack made, there is no need for convoluted conditional logic blocks like the one you have in your demo: useGSAP( () => { const boxes = gsap.utils.toArray('.box'); gsap.set(boxes, { backgroundColor: gsap.utils.wrap(colors), }); const mm = gsap.matchMedia(); mm.add('(min-width: 769px)', () => { const loop = horizontalLoop(boxes, { repeat: -1, }); }); }, { scope: boxesContainer, } ); Just let MatchMedia and GSAP Context do the reverting work and heavy lifting for you! Simple, easy and clean (like we love our code around here! 😉) Here is a simple demo: https://stackblitz.com/edit/vitejs-vite-wunbqy?file=src%2FApp.jsx&terminal=dev Happy Tweening!

I think this is what you are trying to achieve, check comments for explanation. https://codepen.io/SahilAFX/pen/xxejZqy

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!

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).

Hi @Boba welcome to the forum! Then you're looking for the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ below an example from the docs it behaves like you're describing https://codepen.io/GreenSock/pen/XWzRraJ Personally I find that demo hard to understand, so here the same logic but with a timeline and labels, which allow you to manually define to which point each scroll should go with which interaction of the user And here an example that mixes normal scroll with the Observer plugin https://codepen.io/GreenSock/pen/oNQPLqJ Hope it helps and happy tweening!

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