GreenSock

Oh, that has nothing to do with GSAP - that's probably a CodePen thing. You can probably ignore it.

What do you mean? You can't actually get a bounce ease with one cubic bezier. And what's "too big"? The GSAP "bounce" ease? That's in the core, so there's no extra kb, plus it's much less code than your helper function there. Could you elaborate a bit on what exactly you're trying to solve here? CustomEase solves all of this for you, by the way, plus it gives WAY more flexibility. From the docs: So your code could be even shorter: // OLD .to("#element", {xPercent: 50, ease: parseCubicBezier('cubic-bezier(.96, 1.34, .6, .89)') }, "INTRO") // NEW .to("#element", {xPercent: 50, ease: CustomEase.create("", ".96, 1.34, .6, .89") }, "INTRO") And the way CustomEase works is much, much more optimized than what ChatGPT provided you there. So performance-wise, CustomEase is superior. And again, it allows you to get a true bounce with as many bezier anchors as you want. With the solution you posted, you're limited to two anchor points which severely limits the types of eases you can get. https://greensock.com/docs/v3/Eases/CustomEase Perhaps I'm misunderstanding the problem you're trying to solve, though?

There are still breaking errors in your basic JavaScript in that CodePen. Like you reference a function called matchMediaOrNot() which doesn't exist. Please provide a minimal demo that very clearly illustrates the problem with as little code as possible and we'd be happy to take a look. It also looked very strange to me that you've got a timeline with a scrubbed ScrollTrigger attached that you also have an addPause() inside. Why would you do that? There's no such thing as saveStyle: true either. I forked your CodePen and commented out the broken function call - maybe you can fork this and provide very specific instructions about what is breaking and how to reproduce the problem? https://codepen.io/GreenSock/pen/eYbZZQG?editors=0110

@zzz999 did you try following the directions we've provided twice now? Your demo still has the timeline being created OUTSIDE the matchMedia. // BAD! let tl = gsap.timeline({...}); let mm = gsap.matchMedia(); mm.add("(min-width: 768px)", () => { tl.to(...); }); // GOOD let mm = gsap.matchMedia(); mm.add("(min-width: 768px)", () => { let tl = gsap.timeline({...}); tl.to(...); });

Good catch. I updated the CodePen demo: https://codepen.io/GreenSock/pen/jOXWVOb?editors=0010 Better?

In many cases, it could be fine to use with SVG as far as I remember, at least if you're using scale: true (because most SVG elements don't have width/height properties). @Rodrigo did you see something in particular that wasn't working in SVG land? @himeylo can you be a bit more specific about exactly what's not working and how to reproduce the issue? I scrolled in your demo and I'm having a hard time seeing what the issue is. I'm sure I'm missing something obvious - I don't have much time at the moment. The simpler you can make the demo, the better. For example, you probably don't need 8 objectives. A couple should be fine.

Hi @Reksa Andhika. From the docs: It's much more complex (or in some cases impossible) because it'd actually require creating entirely new nesting based on wrapping. The <strong> element, for example, might spill onto multiple PARTIAL lines, so how could two different line <div>s get wrapped around a single <strong>? And if it broke that <strong> into multiple ones, that could mess with your CSS. Imagine you had a border on that <strong>...uh oh. For example, try to recreate this by restructuring things so that there's a <div> around each line (but keep the formatting exactly the way it looks here): https://codepen.io/GreenSock/pen/MWZaMgG?editors=0110 That being said, I took a crack at improving the helper function: https://codepen.io/GreenSock/pen/zYyvVeY?editors=0010 Does that help?

No, not really. Here's a way to do it: https://codepen.io/GreenSock/pen/qBLOePj?editors=0010 Is that what you're looking for?

Sorry about the tardy response! I just created a tweaked version of the helper function that improves things in many cases: https://codepen.io/GreenSock/pen/Bavoggx/fa5a7eab886ae75c888e1f4dc157c299?editors=0010 Better? Do you notice any other issues?

That's because you're adding the click listener to the WINDOW itself, not an element. So you're literally trying to animate the "rotation" of the window object which isn't possible. There is no such property. I assume you meant to reference a valid element, right? https://codepen.io/GreenSock/pen/poqjXNK?editors=0010

By the way, there's a helper function for this: function smoothOriginChange(targets, transformOrigin) { gsap.utils.toArray(targets).forEach(function(target) { var before = target.getBoundingClientRect(); gsap.set(target, {transformOrigin: transformOrigin}); var after = target.getBoundingClientRect(); gsap.set(target, {x:"+=" + (before.left - after.left), y:"+=" + (before.top - after.top)}); }); } https://codepen.io/GreenSock/pen/wvwqdYm/feb24447fb7c6a82e777a0110c281a31?editors=0010

Yes, @mvaneijgen is correct. Let me know if you need further clarification about why immediateRender: false is required in that 2nd tween. The only other problem with your 2nd demo is that you're CHANGING the transformOrigin in the 2nd tween. That'll of course cause a jump because of the logic. You can think of transforms almost like a lens through which the native element is viewed...a filter, or something like that. The native element sits in its native position in the layout, and THEN transforms get applied to make it appear elsewhere. So if you change the origin of those transforms, it can end up being in a totally different position. For example, let's say you've got a 100x100 square that's natively lined up perfectly in the top left corner of the viewport and then you apply a scale of 2 with a transformOrigin of "left top". Well, that means the top left corner will stay exactly where it originally was, and all the scaling will push things down and to the right, thus you'll see a 200x200 square that's still aligned in the upper left corner. BUT... If you just change the transformOrigin to "bottom right" (and leave the scale at 2), the entire square would jump 100 pixels up and to the left because the bottom right corner of the native element would stay pinned and all the scaling would go up and to the left. See what I mean? The only way to make that go smoothly would be to keep the transformOrigin consistent and simply offset the x/y transforms to compensate for where they would otherwise be with the altered transformOrigin. Does that make sense?

I'd be shocked if they're still on 3.0.5, but I really don't know. CDNs don't usually contact us when they update. You'd need to reach out to them to find out what versions are available. 🤷‍♂️ If you find out, though, please feel free to pop back here and let folks know. Thanks!

Yep, a <clipPath> isn't a very browser-safe thing to animate, at least with certain properties like transformOrigin or svgOrigin because it's not a rendered thing and thus some browsers refuse to report width/height. Firefox literally gives you no way to determine the bounding box size - it doesn't even have getBBox() or getCTM() methods like all other SVG elements. Even the getBoundingClientRect() method returns 0 for width/height. A strong case could be made for Firefox and Safari's implementation having bugs. I've been looking for a few hours, trying to find some way to work around that but I haven't come up with anything yet. I'll keep looking.

Thanks for being so respectful of the licensing, @joolean14! Since you're not using any of the members-only plugins and the site in which you're using GSAP is totally free for all users to access, that's covered under the standard "no charge" license. 🥳 For clarity, if you answer "yes" to any of the following, you'd need the special commercial license that comes with "Business Green" Club GreenSock memberships: Does your GSAP-enhanced website/game/product require the user to pay a fee to use? (like Netflix.com) Are you selling a GSAP-enhanced product to multiple end users? (like a website template, theme or game) Are you using GSAP in a game/app with optional paid features/upgrades? If your website sells products that aren't GSAP-enhanced like clothing, widgets, food, etc., that doesn't require the commercial license. It only matters if the thing for which a fee is collected uses GSAP in some way. The standard "no charge" license even covers usage in projects where only a one-time development fee is charged, like an agency that's paid to build a fancy web site that's free for everyone to use. We like to think that a Club GreenSock membership pays for itself very quickly when you consider all the time it’ll save, the added capabilities that the bonus plugins deliver...and of course that sense of having animation superpowers is priceless 🙂 Club GreenSock memberships support all the ongoing development here as well, so it can be a smart way for you to help ensure that the tools continue to get nurtured in the years ahead just like they have been for the past 15+ years. But again, it sounds like you do NOT need the special commercial license for the use you described, so you're all set!

Hi @MOQO. ScrollSmoother is specifically built to scroll the entire page, not individual <div> elements. The technique used to accomplish scroll smoothing cannot work in nested things due to browser limitations. It’s definitely more work, but you could use Observer to listen for wheel events (or whatever) and update the scroll position accordingly, in a smooth fashion (using tweens for example).

I’m away from my computer so I can’t dig deep on this, but it looks to me like you are creating your timeline and ScrollTrigger OUTSIDE of your matchMedia(), so they won’t get reverted when the matchMedia() no longer matches. I would strongly recommend creating your timeline INSIDE the matchMedia(). Does that help?

I’m away from my computer right now, so I can’t dig into much but if you look at the console you’ll see that it’s warning you that you never registered the ScrollTrigger plugin. You must do that: gsap.registerPlugin(ScrollTrigger); Also, I’m a bit confused as to why you’d have a vertical scroll effect using the width of the elements for the amount of spacing. Not wrong - just seems odd to me.

This definitely looks wrong to me: const tll = gsap.timeline({ scrollTrigger: { trigger: '.img', // <-- don't you have multiple images? scrub: 1 } }) .to('.img', { stagger: .2, y: -700, scrub: 1 // <-- "scrub" belongs inside a scrollTrigger: {} object. }) You're literally telling it to animate the "scrub" property of each element with an "img" class. There's no such property. I think you meant to put that into a ScrollTrigger object, right? But that wouldn't make sense either here because you've already got a ScrollTrigger on the parent timeline (and you shouldn't nest ScrollTriggers). Maybe you meant to do this?: const images = gsap.utils.toArray(".img"); images.forEach(img => { // create one for each image gsap.to(img, { y: -700, scrollTrigger: { trigger: img, scrub: 1 } }); If you're still struggling, please make sure you provide a minimal demo that clearly illustrates the problem and we'd be happy to take a look.

Hi @Dhada. Yes, that just means that the target you're trying to animate doesn't have an "x" property. Remember, GSAP can animate literally any object, not just DOM elements. It's hard to know exactly what was going on in your project because you didn't provide a minimal demo for us to inspect, but my guess is that maybe the target you were passing to the tween wasn't what you thought it was. If you still need some help, just post a minimal demo (like a CodePen) and we'd be happy to take a look.

Please provide a very clear minimal demo that shows that. When I commented-out GSAP/ScrollTrigger in the demo you provided above, the video was NOT visible in Safari on Mac. At all. It had nothing to do with GSAP/ScrollTrigger. If you still need help, make sure you not only provide that demo, but also give very clear steps to reproduce the problem. Maybe even a video of it occurring for you.

Like @alig01 said, this has nothing to do with GSAP - if you completely remove GSAP/ScrollTrigger, you'll see that big white space where the video should be, but Safari doesn't allow that video format. So I'd suggest just focusing your energy on getting that video to work in Safari first, then start applying GSAP/ScrollTrigger. These forums are for GSAP questions, not general video or encoding questions, sorry. Anyone is welcome to post an answer to that, though.

Nah, it shouldn't degrade performance in any noticeable way.

I'm having a difficult time understanding how to replicate or what exactly the "last picture" means because it's a big loop, right? You'll have a much better chance of getting help if you just simplify things and use colored <div> elements maybe and label the last one "last" with text visually, so it's super easy to see exactly what you're talking about. Again, I'm a bit lost - what does "not animate smoothly" mean? Super jerky? Jumping to a particular spot? Can you please tell us the exact steps we need to follow to replicate the problem? I can't imagine why setting a width explicitly would mess anything up on a motion path. Can you isolate that issue please in a CodePen? You currently have a lot going on in there - the simpler you can make things the more likely you'll get a prompt answer.

Sure, @SharonMcNamara, you can upgrade anytime from your account dashboard or if you log in and go to the /club page, it'll show you the options. 👍