[Scrollbar jumping around with scrolltrigger scrub]

That's mainly because you removed the <section> that was expanding the space. 🙂

 

I assume you wanted to do something like this?: 

See the Pen abryRMN?editors=1010 by GreenSock (@GreenSock) on CodePen

[Scrollbar jumping around with scrolltrigger scrub]

Are you trying to do this?: 

See the Pen jOoLayN?editors=0010 by GreenSock (@GreenSock) on CodePen

[Observer onDrag firing after onDragEnd]

Here's a preview of the next release showing it works the way you're requesting regardless of the debounce value: 

https://assets.codepen.io/16327/Observer.min.js

 

See the Pen JjqyYmv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Thanks for reporting that, @akapowl

[Split text when timeline starts instead of when it's created]

14 hours ago, sombrilla said:

Still I think setting the timeline duration to 0.01 is a pretty hacky way around it, if you think there's a better way to do it I'm all ears!

Yeah, definitely don't do that. "duration" isn't even a valid property to set in a timeline's vars object. 

 

The reason your onStart wasn't firing without that is because your timeline literally had no duration (well, it was 0). As the docs state, the onStart fires when the playhead moves from 0 to another value (it actually must move off the start time), but that's impossible if the timeline is completely empty. You could have accomplished something similar by just adding some blank space to the timeline, like tl.to({}, {duration: 0.1});

 

But honestly I think there's a much better and more elegant way of doing this: 

See the Pen YzbQMrz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You said you wanted to wait to split it until it's animating, so I accomplished that for you. And I also handled the toggling of the visible class both ways. And reverted the SplitText element when necessary so it's really only split DURING the animation (better accessibility). 

 

I hope that helps!

[Observer onDrag firing after onDragEnd]

That's just due to the debouncing, so you can set: 

debounce: false

But in the next release, I'll make that change so the onDrag() will fire first even if debounce is true. 

[Is all GSAP animation is free ?]

Welcome to the forums, @gchaldu! 

 

The core library is publicly available and free to use in the vast majority of cases. The same goes for several of the plugins like ScrollTrigger. See https://gsap.com/licensing and https://gsap.com/pricing 

 

Some of the plugins, like ScrollSmoother, are a membership benefit of Club GSAP. So you must join the Club to get access to those. See https://gsap.com/pricing for pricing and details about which plugins are free and which are in the various membership levels. 

 

Enjoy the tools! Let us know if you have any GSAP-related questions. 💚

[Disable "scrub" when "x" and "end" values are changed]

6 hours ago, xMrCrunchyx said:

It turns out that the ScrollTrigger plugin was reloading my CSS files on every resize.

Hm, that doesn't sound right to me at all. ScrollTrigger doesn't cause anything to reload. Unless maybe if you had <style> tags inside a pinned element, only because ScrollTrigger has to create a wrapper <div> around it for pinning purposes (a pin-spacer), but even that is easy to work around by defining the pinSpacer yourself (so that ScrollTrigger doesn't need to create a new element for that). See the docs for pinSpacer details. 

 

I'm glad you discovered a solution, though. 👍

[Need Help with Auto Scroll for Dynamically Wide Horizontal Scroll Container]

Are you trying to do this?:

https://stackblitz.com/edit/stackblitz-starters-2efrke?file=app%2FHorizontalScroll.tsx

 

You weren't doing proper cleanup with the click handler, and [more importantly] you were using wrapperRef.current as the target of the scrollTo tween instead of the window. You were treating it as if the wrapper was the thing with the scrollbar. 

 

Does that clear things up? 

[Typescript errors for start and end fields for motionPath]

Yeah, that code will work and we'll update the TypeScript definitions in the next release but in the meantime can't you just add this above the line: 

// @ts-ignore

So that it doesn't throw an error? 

[splitText .revert() Problem with 3.12.5]

That's not a bug - it's actually a fix. 🙂

 

When you revert(), it reverts the element to what it was at the time you split it, including its innerHTML and inline style(s). 

 

The problem is that you're splitting your text FIRST, and then you're setting autoAlpha on that element to 1 which applies visibility: inherit to the inline style. Since that happened AFTER you split the text, it won't get reverted to that. In other words, SplitText recorded the inline styles as empty when you split. So when you revert, it'll return the inline style to be empty. You've got a CSS rule that sets visibility: hidden on <h1>, so that's why it disappears. It's doing exactly what it should. 

 

Here's an easy fix: 

 

See the Pen WNBjagq by GreenSock (@GreenSock) on CodePen

[Scroll trigger not working, and markers aren't visible]

Oh, you just forgot to import and register ScrollTrigger: 

 

https://stackblitz.com/edit/withastro-astro-ujqvmi?file=src%2Fpages%2Findex.astro

[SplitText - don't create single word for <sup>]

Yeah, that's pretty tricky but here's a helper function that'll allow you to "protect" certain elements from the split: 

See the Pen qBGmJRR?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You just use selector text for the "protect" property. Seems to work well for your scenario. Right? 

[Get SVG Element Position]

@mvaneijgen is correct - that's exactly the tool you'd need. 

 

See the Pen abrJKVw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It doesn't matter if it's a parent/child relationship - that method can convert coordinates from anywhere to anywhere. 

[ScrollTrigger pin simple translate y glitch]

Yeah, that's because you're animating the very same element that you're pinning and also using as the trigger. I'd recommend just wrapping it in another element so you can pin the outer element and animate the inner one: 

 

See the Pen YzbZvQL?editors=0010 by GreenSock (@GreenSock) on CodePen

[keyframes something worng with each vs. easeEach]

Yes, that's expected behavior, but I can understand why you'd think there's something wrong. Keyframes basically create a timeline internally that gets scrubbed with that ease. Think of it like animating the progress from 0 to 1. When you use an ease like back or elastic, those go BEYOND 1 or 0, but you can't make the playhead of a timeline go PAST the end or beginning. Think of it like playing a 1-minute YouTube video to a time of 1.3 minutes. There is nothing after the end (1). 

 

Does that clear things up? 

[3D Carousel with text description - double click bug]

Yep, it seems like you understood properly, at least for the most part. But...

 

overwrite: "auto" will ONLY find individual properties that are already being tweened in competing tweens, and isolate just those (killing them in the competing tween) whereas overwrite: true will find ANY active tween of the same target (doesn't care about individual properties) and kill the whole thing. So "auto" is more targeted. 

 

Usually people don't run into the problem because they use the same durations for everything, thus the problem is sorta invisible. For example, if you start tweening opacity from 0 to 1 over the course of 1 second...and then 0.5 seconds later you start ANOTHER tween that animates opacity from 1 to 0, since that starts later, it renders last, thus you never see the effects of the first tween. So the first tween might set opacity to 0.3 on one tick, but the other (later) tween sets opacity to 0.7 on the same tick thus you never actually see opacity at 0.3. 

 

But imagine if you start tweening opacity from 0 to 1 over the course of 1 second and then 0.2 seconds later, you start another tween that animates opacity from 1 to 0, but it only lasts 0.5 seconds. When that one ends, the first one is STILL GOING for another 0.3 seconds! So you'd see the 2nd one finish rendering with opacity at 0 but on the very next tick you'd see the original tween (which is 0.7 seconds into its 1-second long duration) continuing on! Opacity would suddenly jump from 0 to like 0.7 (assuming a linear ease) and animate up to 1. 

 

Make sense? 

[3D Carousel with text description - double click bug]

By the way, your demo reminded me of this which I created a while back and integrates Draggable functionality, inertia, etc.: 

See the Pen RwLepdQ by GreenSock (@GreenSock) on CodePen

[3D Carousel with text description - double click bug]

I think it's a logic issue in your code related to the fact that you're allowing overlapping/competing tweens to occur on the same elements. You're animating the autoAlpha with a duration of 0.5 in one direction, and a duration of 1 in another, and you aren't doing any overwriting, thus you're allowing the tweens to fight with each other. The easiest solution is probably to just set overwrite: "auto". 

 

See the Pen xxNgMMz?editors=0010 by GreenSock (@GreenSock) on CodePen

[Speed Question...]

I doubt there'd be much of a noticeable difference, honestly. Technically the quickSetters might be very slightly faster, but you could benchmark it in your particular scenario if you're really curious. 

[ScrollTrigger in nextjs build not working reliably]

@willthomson that definitely sounds wrong to me. useGSAP() uses the useIsomorphicLayoutEffect internally, and it also handles cleanup automatically. If you just use the useIsomorphicLayoutEffect() directly instead of useGSAP(), you are probably skipping proper cleanup which is not a good idea. 

 

If you're having trouble, would you please provide a minimal demo, like a Stackblitz? Here are some starter templates: 

https://stackblitz.com/@gsap-dev/collections/gsap-nextjs-starters

 

You're using the latest version of GSAP too, right? 

[Div from top of viewport to bottom of viewport]

Here's another way to do it that's even more dynamic. Just use a combination of y and yPercent:

See the Pen yLWVbJg by GreenSock (@GreenSock) on CodePen

[gsap.getProperty() not the same as _gsTransform]

Yes, if you'd like help, please provide a much more simplified example. Your demo has over 1,000 lines of JS alone. Please keep it to less than 50 if possible. 

 

Or if you need more assistance with that demo, you can book time with us for paid consulting services - it's just beyond the scope of help we can provide in these free forums. It strikes me as very odd that you'd be trying to tap into xOffset which isn't a normal transform property at all. I'd imagine you should be able to build all your functionality without tapping into that at all. 

[Center the Element in Responsive]

Yeah, we really need to see a minimal demo to offer any insight, but I wanted to mention a few things...

1. You should definitely use gsap.matchMedia() instead of the deprecated ScrollTrigger.matchMedia() method. The gsap.matchMedia() method is far more flexible. 
2. gsap.matchMedia() uses a gsap.context() internally, so you don't need to nest them like that. There's no need to use a gsap.context() here - you can just use a gsap.matchMedia() (think of it like a specialized gsap.context()). 

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

[Pin Spacer Element Custom Height]

Yeah, I'm very curious about WHY you'd be requesting something like this. What's causing you to try to force the height of the pin-spacer to be something in particular? That seems very odd to me, and I wonder if this is more of an engineering issue on your end or perhaps a misunderstanding of what a pin-spacer is supposed to do. 

 

Also, why would you need to control the "name" of a pin-spacer? You can access the spacer element itself using the ScrollTrigger's "spacer" property. But again, it seems rather odd that you'd need that anyway, so I think it'd help if you could provide a minimal demo that clearly illustrates the problem you're trying to solve (in as simple a way as possible). 

[gsap.getProperty() not the same as _gsTransform]

Hm, I'm very curious why you'd need that value. Please provide a minimal demo that clearly illustrates what you're trying to do (like a CodePen). Once we see the issue in context, I'm sure we'll have a better idea of how to advise you.