Leaderboard

So animating height isn't very performant. You may have better luck setting the progress bar to height: 100vh; with a transform-origin: top center; then animating the scaleY from 0 gsap.from(progressBar, { scaleY: 0, scrollTrigger: { ... }} This way you wont need to calculate the window's size on refresh.

Welcome to the GreenSock forums @dan098 First off, you forgot to load the DrawSVGPlugin - also you are using rather old versions of GSAP and ScrollTrigger, best stay up to date. Technically things should already work after adding the DrawSVGPlugin - but I don't think it is possible to draw out dashed strokes like you have there - not even with the DrawSVGPlugin if I am not mistaken. If you want to draw out dashed paths, you will probably have to mask the path itself and animate the mask instead. I recommend having a look at @PointC's tutorial over on motiontricks.com for something like that. https://www.motiontricks.com/svg-dashed-line-animation/ Here's a pen just showing that the drawing itself already works when you load the plugin https://codepen.io/akapowl/pen/bGLyPEM

Some sidenotes to what @SteveS said: for a very long time, locomotive-scroll didn't have a method to set the scroll-position without lerp being applied - now it looks like it has, but you will need to update the loco-scroll version (as Steve did to version 4.1.4) Instead of killing the ScrollTrigger, you could also disable it and then set the animation's progress to 1 - which could come in handy if you e.g. had a lot more values that you had been tweening on earlier and setting each and everyone to the final state manually would get a bit cumbersome. You will still notice a flash/jump of some sorts when all that happens - which from what I can tell is related to locomotive-scroll (and probably its scrollTo method) as that flash doesn't happen in examples without locomotive-scroll. But locomotive-scroll is not a GreenSock product and thus it is not really supported here - so as Steve suggested, maybe have a look at Scrollmoother instead. https://codepen.io/akapowl/pen/yLvWrdX Most of what I did there was discussed in one way or another in the threads linked in this post earlier: ...with the first thread linked in there probably being the most complete approach.

There's a lot going on here and there are several other threads on the matter but they are mildly dated. General process: When the pin completes, kill the scrollTrigger. This will: Reset everything the scrollTrigger did remove the pin spacer Since removing the pin spacer changes the page height, we need to manually set our scrollPos to where we want it, in this case where the pin section takes the full page. Locomotive scroll has its own utility for this. Since we killed the scrollTrigger, we have to set the end state of its animation Here is a codepen: https://codepen.io/SteveSDaBest/pen/QWQRPJE I recommend using GSAP's ScrollSmoother instead of locomotive scroll, as it uses native browser scroll which can make things easier, plus it has seamless integrations with ScrollTrigger.

It's not a baked in feature, but it's possible: You'll need to use draggable's callbacks to get current dragged position/coordinates and then re-map those coordinates with a little math to the preview box.

Hello @Yusuke2223 For tweens to "stagger in waves", it can be nice to use stagger as an object, set repeat to -1 (so it repeats infinitely) and yoyo true (so it also tweens there and back) in there, and then play with the duration for the tween and value for the stagger until you get it working to your liking. Here is an example - maybe with a bit of tweaking the values this can help get you where you want with this. https://codepen.io/akapowl/pen/vYdwarp

Hi @stancillous welcome to the forum! That looks like a fun animation! Instead of targeting the class of the `div` within GSAP, just target the div you create in the `const div` https://codepen.io/mvaneijgen/pen/qBxGYeL?editors=0010

If you use a chrome-based browser you can download the extension to see just how many sites are using GSAP (It's a lot) https://chrome.google.com/webstore/detail/official-gsap-sniffer/dbcjaehchnikgdjjcehagpcikmlpjefh

Yes, it uses GSAP. And that effect is very likely a WebGL thing.

I've never used Framer, sorry. But it's a good question - maybe someone else can chime in who has used Framer. If there's one root element in the <body>, it should be entirely possible as long as you load GSAP, ScrollTrigger, and ScrollSmoother and just ScrollSmoother.create({...})

I figured out my issue. It is very specific to my setup. I'm using Observer to watch my scroll direction, and I believe that wheel vs touch have inverse scroll directions. Scrolling down the page with a wheel is an up input using touch.

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect...?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. I'd suggest giving it a shot and then if you get stuck, post back here with a minimal demo and we'd be happy to take a peek. Or you can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly.

Hey @chacrasoftware I hope you could solved it, but just in case, I leave here a codesandbox for you!

Nah, the items Array contains ALL of the items. It's just a bunch of elements (any with the ".item" class). Let me walk you through the code... classes = filters.filter(checkbox => checkbox.checked).map(checkbox => "." + checkbox.id) "filters" is an Array of checkbox elements ("Green", "Orange", "Purple"), so this line loops through them all and for any that are selected/checked, it records their id with a "." in front because we'll use it as a class selector next. So, for example, if the orange and purple checkboxes are checked, we'd get an Array like: [".orange", ".purple"] Which is what we feed into the next line: matches = classes.length ? gsap.utils.toArray(classes.join(",")) : classes If the Array actually has stuff in it (and it does in this case - ".orange" and ".purple"), it joins that into selector text like: gsap.utils.toArray(".orange, .purple"); // select all the elements with the "orange" or "purple" class It isn't directly related to the "items" Array other than the fact that it happens to contain a subset of those elements. But again, this line is purely about feeding selector text into the toArray() so that it returns an official Array. It's sorta like doing this: matches = Array.from( document.querySelectorAll(".orange, .purple") ); Does that clear things up?

Where are those scripts defined (Wordpress can be funny about this sort of thing if you have scripts specific to being logged in, etc)? Are you sure that script is running, and those elements are available to be animated when the script runs?

Do you have the private NPM module installed with the bonus files?

I would camel case css properties within GSAP, so `background-color`, becomes `backgroundColor`. I see you are making multiple ScrollTriggers to animate multiple elements. You can animate multiple elements with a `timeline` and then add a ScrollTrigger to a timeline to animate the elements one by one or change the position parameter to have all the elements animate at the same time, seen in the demo below. I've enabled the markers in ScrollTrigger to better illustrate what is happing when certain elements are triggered https://codepen.io/mvaneijgen/pen/MWQdBON?editors=1010

I added a comment to that thread to clarify... Blake didn't mean that all ScrollTriggers must be associated with a timeline - he was simply saying that if you're going to use a ScrollTrigger with a timeline (sequenced animation), you should NOT define multiple ScrollTriggers on individual child tweens inside that timeline (as mentioned in the article I linked to) - you should just define one ScrollTrigger on that particular timeline. You can definitely have a ScrollTrigger on an individual tween that's not inside a timeline. That's very common in fact. And you can have multiple timelines each with their own ScrollTrigger. The key is that you can't have NESTED ones inside a timeline where it boils down to a timeline containing multiple children with ScrollTriggers because it would be logically impossible for them all to have their playhead controlled both by their parent timeline and the scrollbar position. Does that clear things up?

Woops sorry, arrow functions do work, I just forgot to resize my window lol.

Hey Cassie - Great suggestions, thank you! I will definitely dig into both. To answer your follow-up question, I was just searching Google, CodePen, the GSAP site, etc. for terms like "GSAP examples with code" or "best GSAP animations", or more specifically for things like "gsap photo gallery examples", etc. If I were to describe the ideal collection it would be: 1) Real life examples, from live commercial websites (i.e. not tutorials) 2) Linked to code so I can see how the magic was done - sort of how Webflow Showcase examples often link to cloneables. 3) Tagged by feature type rather than GSAP element. So for example cool animations for cards, great hero animations, creative button animations, amazing photo gallery animations, etc. rather than ScrollTrigger animations and Observer animations etc. Sort of the way the Relume library or Flowbase have their components categorized. Clearly my goal is to get inspired by and build off of others' best work - respectfully of course. And I'd be remiss if I didn't also say how completely frickin' awesome GSAP is and how much the community appreciates your contributions and those of others who put so much time into this forum. Thank you!

Hey @cpackar, I'm not sure what you're going to do. So here is just an example (no resize update!) to show what is feasible and to ask whether it corresponds to your ideas . Instead of the motionPath, you could animate directly to the end point: x: ww * 0.8-20, y: wh-65 - that is, a point relative to window width / height. https://codepen.io/mikeK/pen/f0752181d9dc028a82768d974d992ef3 Happy tweening ... Mikel

Hey Sumit and welcome to the GreenSock forums. It doesn't make too much sense to toggle classes in this case. Just animate the properties that you need to animate. I highly recommend that you take a look at these examples and try putting them together to create the exact effect that you need: https://codepen.io/GreenSock/pen/YzyqVNe https://codepen.io/GreenSock/pen/JjYPQpN Unfortunately we don't have the capacity to build out the whole thing for you but please feel free to ask specific questions if you have them. Happy tweening!