GreenSock
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by GreenSock
-
How to relocate an element on scroll using GSAP! No plugins
GreenSock replied to Faith Akakpo's topic in GSAP
I noticed two problems: You nested ScrollTriggers inside a timeline. That's logically impossible to accommodate - the playhead of a tween can't be controlled by BOTH a timeline's playhead AND the scroll position simultaneously. You've got multiple tweens of the same element controlled by ScrollTriggers. By default, animations with ScrollTriggers are rendered immediately. So in your case, you just need to set the 2nd and 3rd to immediateRender: false so that they don't step on each other. Is this what you're looking for?: https://codepen.io/GreenSock/pen/QWPzBXO?editors=1010 And alternative might be to create a timeline that has ONE ScrollTrigger applied to the timeline itself (not nested ones), and have all your animations in there. That'd assume you can just make that one timeline span across the entire scroll area that you need. If not, then just stick with the individual tweens. I hope that helps. -
Like @Rodrigo, I don't understand what you're seeing - I can see those countdown sections on both my Mac and my iPhone. Maybe I'm missing something obvious. 🤷♂️
-
Yeah, if you check the console there's a warning: It's just not something that can be accommodated at this point - you've got your SVG set up to scale in a non-uniform way. Sorry, I wish there was a magic bullet I could offer.
-
Maybe try making sure you've got the latest version of the files? I'm totally guessing here. Very tough to say without a minimal demo, sorry.
-
Nuxt 3 Setup -- Cannot read properties of undefined (reading 'to')
GreenSock replied to blerdgrammer's topic in GSAP
I'm not familiar with Nuxt, but why are you doing this?: const { $gsap } = useNuxtApp() That's what's throwing the error - it's not returning $gsap. Why aren't you just doing a normal gsap import? Like: import gsap from "gsap"; -
I noticed several problems: You had faulty markup (missing closed </div> tags) You were defining a containerAnimation for the getScrollLookup(), but only some of the elements were in the containerAnimation. That is not valid. You were pinning a container element, but you didn't define that in the getScrollLookup() config. Is this more of what you wanted? https://codepen.io/GreenSock/pen/RwOEWYW?editors=0010
-
I believe that's the issue that was already reported and patched in this thread related to once: true: The patch hasn't been released yet, but it's very easy to work around by just creating a simple ScrollTrigger first (it doesn't need to do anything). https://stackblitz.com/edit/stackblitz-starters-vynow2?file=src%2Fcomponents%2FHeroIntro%2FHeroIntro.js Does that clear things up?
-
This appears to be funky behavior caused by Vue forcing refs to be Proxy objects. So when you access ref.value, it isn't the real object at all! It's a Proxy which alters what "this" refers to inside method calls. I think it's terrible that Vue does this actually, but maybe they have good reason for it. 🤷♂️ From what I can tell, the solution would be to use a shallowRef() instead of ref(): https://stackblitz.com/edit/github-vfgcdf-g52l6b?file=app.vue Does that clear things up?
-
ScrollSmoother get scroll y value without adding transform to content
GreenSock replied to FrankLaRocca's topic in GSAP
Without a minimal demo, it's super difficult to offer a suggestion here or understand what you're asking for - are you saying you want to apply ScrollSmoother...but not have it actually work at all? You just want to have it pretend to work, feeding you the value that it would apply to the container's transform, without applying it? Maybe you could add a ticker listener with a high priority to grab the original transform, and then use an onUpdate on the ScrollSmoother where you grab the new value but immediately apply the old one to revert it(?) I'm totally guessing here in the absence of a minimal demo, but hopefully that gives you a little to go on at least. I wonder why you wouldn't adjust whatever you're doing with the <body> transform to more cleanly apply that in a way that integrates with ScrollSmoother(?) -
Does it work well for you without Lenis? That's not a GreenSock product, so we can't really support it here. If you're talking about the pin seeming to be a little bit tardy, that's likely because mobile browsers are particularly bad with using a separate, non-synchronized thread for scrolling which is why ScrollTrigger offers a anticipatePin option. You might want to try adding anticipatePin: 1 or some other value just to see if it helps. You could also see if it's any better with ScrollTrigger.normalizeScroll(true);
-
That's because your path data isn't valid. You specified type: "cubic" but your path data only has 3 points instead of 4.
-
I assume maybe you mean something like this?: let tween1, tween2; function invalidateAndRemakeAnimations() { // Kill existing animations tween1 && tween1.revert(); tween2 && tween2.revert(); // Remake the first animation tween1 = gsap.to(".row._1", { scrollTrigger: { trigger: ".row._1", start: "top top", scrub: true, pin: true, pinSpacing: false, invalidateOnRefresh: true, markers: true } }); // Remake the second animation tween2 = gsap.to("h2.text", { scrollTrigger: { trigger: ".row._3", start: "top top", scrub: true, invalidateOnRefresh: true }, position: "relative" }); }
-
Thanks for asking, @Marija1337! No, you don't need the special commercial license for that - the standard "no charge" license covers that type of usage. If you answer "yes" to any of the following, you'd need the special commercial license that comes with "Business" Club GSAP memberships: Do you have multiple developers that need access to the bonus plugins like SplitText, ScrollSmoother, MorphSVG, etc.? 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. So you should be all set with the free/public license. Enjoy the tools and good luck with the new business! 💚
-
Again, it's tough to advise without seeing a minimal demo, but I guess the most generic answer I can give would be: "call kill() on that animation from inside a 'resize' event handler". But if you want a more targeted answer for your scenario, please provide a minimal demo that clearly illustrates the problem and we'd be happy to take a peek.
-
Or you could just put the CustomEase inside your onMounted function. The fundamental problem is that you're trying to register CustomEase when window/document don't exist yet.
-
Yeah, it's almost impossible to troubleshoot without a minimal demo, but I bet this has nothing to do with GSAP. Keep in mind that Safari handles stacking order on 3D elements differently than all other browsers. It's as if they combine z-index and z placement on the 3D axis. My suggestion would be to eliminate GSAP from the equation and just set the values directly (no animation) and see if it displays the way you'd expect. You may need to move things on the z-axis in order to get them to stack properly. If you still need help, please post a minimal demo.
-
Another option: just use a super small data-speed: https://codepen.io/GreenSock/pen/rNbqwMQ?editors=1010
-
@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. 🥳
-
Yes, @Rodrigo is correct about that not being a built-in feature but you could probably get that functionality with enough custom code. For example, set up a listener for the "scrollEnd" event, and then create a gsap.to(...{ scrollTo }) tween that's however long you want, and apply your snapping logic inside the handler to calculate the scroll position. Just an idea. Good luck!
-
I sent you a private message with details. ✅
-
Ah, maybe there's the disconnect - we cannot approach development that way with our tools. We work very hard to build trust with users so that things "just work" and GSAP is consistent. So if we tell users that they can use motionPath in a Flip.from()...but it'll only work in 5% of the cases and in all others it just totally breaks, that's no good. We have to think through all the edge cases and ensure there is consistency across the board as much as possible. Imagine if you used Photoshop but it only worked on images that have mostly red pixels and no human faces? Or you bought a car that only functioned on 4% of the roads in your city. 🙂
-
Unfortunately it doesn't at all 🙂 I think you might be missing a fundamental logic impossibility here. Well most paths have x and y. In my example, I said a squiggly vertical line, thus there is some "x" movement in a squiggle. But in this case you're saying that the Flip.from() would totally ignore the motionPath? That's one of the key problems - the start and end points can't just magically be the same based on any motionPath you feed in. What if the start/end points are at a 45 degree angle from each other, 100px apart...but the motionPath you feed in has the start/end points at a 174degree angle from each other and 800px apart? How could this possibly be expected to work? Let me use an extreme case to make the point - imagine your <path> is a circle. So the start and end anchor points are in exactly the same place, and you use that as the motionPath on a Flip.from(). What would you expect to happen? Are you starting to see the fundamental logic problem in this suggestion? Or am I missing something?
-
I still feel like we may not be connecting here... Can you please try answering this?: The magic of Flip is that even after you totally change the DOM and maybe reparent an element, it applies x/y/width/height offsets to make it look like it's in the original position. So let's say you Flip.getState(el) and then reparent it so that it ends up being exactly 100px to the right of where it was originally, and Flip figures out that it must animate x from -100 to 0. Great. But now let's say you add a motionPath:[...] to that Flip.from(), and the path data is from a 500px completely vertical line. How are you expecting this to work? You said that motionPath should take precedence. So let's say el.x starts at 0. Then you reparent your element such that it's now 100px to the right and Flip.from() would normally apply x: -100 to map it to that original position...but there's a motionPath that's a 500px totally vertical line. If that takes precedence, that means the element just suddenly jumps up 500px directly above or something? Can you see how it will no longer look like a proper Flip animation because it's not being mapped to the appropriate x/y position since the motionPath took over?
-
That effect should be applied with an attribute, not a CSS stylesheet. That's more compatible and DrawSVG knows to look for that too. https://codepen.io/GreenSock/pen/dyLqXvX?editors=0010 Is that better?
-
Maybe think of it like this... Let's say a you create a motionPath that (in an over-simplified way) animates from 100 -> 200 (a motion path is basically a bunch of coordinates, so let's say these are the coordinates). I'm only focusing on the "x" values for simplicity. Now let's also say you create a Flip tween that dynamically calculates the distance between two targets such that x goes from -152 to 0. It sounds like you're saying "just make motionPath work with Flip seamlessly" but how exactly would you expect that to happen in this scenario? You've got a motionPath that'd make x go from 100 to 200 over the course of the tween, and a Flip animation that makes x go from -152 to 0 over the course of the SAME tween. How can both happen simultaneously and seamlessly? Perhaps I'm misunderstanding you, but this seems like it's logically impossible to accommodate. You appear to be thinking of a motionPath more like an ease (style of movement; a matter of pacing/timing which could be applied to any interpolation) rather than an actual set of coordinates. For example, imagine a 500px vertical squiggly line that serves as the "motionPath"...and you want to somehow apply that to a Flip animation where a box goes horizontally 100px directly to the right. Help?
