Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

OSUblake last won the day on October 23

OSUblake had the most liked content!

OSUblake

Administrators
  • Posts

    7,295
  • Joined

  • Last visited

  • Days Won

    625

Everything posted by OSUblake

  1. You can try to fix those fix with with npm audit, and learn more about what the issue is and if it's even worth worrying about. https://docs.npmjs.com/cli/v7/commands/npm-audit I don't put a lot of thought into those warning because it's nearly impossible to get rid of them. Especially if I'm just running stuff locally.
  2. Hi Midnight Gamer, I would recommend checking out our loop helper function for stuff like that. https://greensock.com/docs/v3/HelperFunctions#loop
  3. Like I mentioned above, GSAP has no dependencies, so those warnings are all for the React stuff. You can try to fix them, but it's unlikely you'll be able to get them all as create react app has a ton of dependencies. If you don't mind me asking, why did you choose React? We want to improve GSAP integration with React, so we're looking for feedback on how to improve that.
  4. You installed Create React App. 😉 Try installing it without React. GSAP has no dependencies.
  5. I'm on Windows too, but I've never had that problem. When I installed VS Code, I set the option to add it context menu so I can right click on a file to open it. But I rarely do that. I usually just create and edit the file within my project folder... If you still can't get it working, you should probably direct your problem to the VS Code team as they would be more knowledgeable on the subject.
  6. It doesn't look like it supports ESM with SSR. This issue says that it uses require, which isn't compatible with ESM. https://github.com/vitejs/vite/issues/4569 Regardless, the dist files will work with almost any build tool.
  7. Welcome the forums @chanced That means whatever tool/framework you are using doesn't support ES Modules, so you would need to import the UMD files. This is a common issue for frameworks that do SSR because of past limited support for ES Modules in a node environment. import Flip from "gsap/dist/Flip";
  8. OSUblake

    Nodding head

    Hi Landrynadre, You should can use the position parameter to control when stuff should happen. ModifiersPlugin: seamless loop (codepen.io) For complex animations like that, most people create them with Adobe After Effects, and then you can play them on the web with Lottie.
  9. Welcome to forums @Maxwell Alves It's impossible to tell what's going from a code snippet. Your video looks more like a CSS or rendering issue, so I'm not sure how GSAP is even involved with that. If you want us to take a look, then please provide a minimal demo, like on codesandbox. Minimal means don't include all the code from your project. Just a simple example that recreates the issue.
  10. Welcome to the forums @bewards You would need to create a stand alone ScrollTrigger and control the progress like kind of like this. GSAP test: scrolltrigger scrub with timeline and tweens (codepen.io)
  11. We just showcase sites that use GSAP, but they don't give us their source code, so we don't know how they did that. From what I can tell, they are using canvas, which isn't that straightforward. And they are probably doing something similar to this, but adding parallax on top of it. Image Panning (codepen.io)
  12. That site isn't using native scrolling, which is what ScrollTrigger is for. Notice how it doesn't have any scrollbars, which usually means they are using wheel events. They are using GSAP for the animations, but using three.js for rendering. How, to create that effect is beyond the scope of this forum. I'm sure if you search on CodePen you can find a similar effect. I'm pretty sure I've seen something like that before. https://codepen.io/
  13. It's really not going to matter one way or the other. I wouldn't put much thought into micro-optimizing for performance unless you notice a problem. I see people waste a lot of time worrying about stuff that will never matter in the real world. They key to animation performance is to be mindful of what properties you are animating. Some properties perform better than others, like x, y, and scale vs left, top, and width/height. And the type of object you are animating matters too. So SVG would be slower than an HTML element, and all of those would be slower than canvas/WebGL.
  14. I wouldn't expect any problems with that code because the array will only contain valid elements. If you know which page certain animations can only run on, then you could check for the path name kind of like here... https://stackoverflow.com/q/16611497/2760155 Other than that, there's not a lot of you can do besides manually checking if an element exists. And doing the check yourself won't hurt performance. Internally, GSAP has to do the same thing.
  15. I never use commands to open files, but this says #2. https://stackoverflow.com/a/54247331/2760155
  16. Hi Mark, I'm surprised this didn't crash your app. You're creating a new scale animation on every animation frame. It's generally a bad idea to create an animation inside an onUpdate callback, especially an animation that has a repeat of -1 as that will run an infinite amount of times. tweenRotateCube = gsap.to(addCube.rotation, { y: Math.PI/2 , duration: 3, repeat:-1, ease: "none", onUpdate: function () { gsap.to(addCube.scale, { duration: 0.1, repeat:-1, x: 1.2, y: 1.2, z: 1.2, }); }, }); Checking for an active animation is ok for very basic stuff. With what you have going on, you'll need a better way to keep track of the hover states. I just made a little animator class to handle that. A Pen by GreenSock (codepen.io)
  17. Welcome to the forums @Thomas Popoff I haven't seen that before. Have you tried other files in the package to see if it throws the same error with them? And how did you install using npm?
  18. OSUblake

    Responsive Tween

    Nothing really stands out. Try putting your html, css, jQuery, etc in that pen and see if it works. If it works on CodePen, then there's probably an issue with your setup/environment.
  19. OSUblake

    Responsive Tween

    Welcome to the forums @SWALKER For media query changes like that, you should use ScrollTrigger's matchMedia. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() As for for your code not working, it's hard to say without seeing it. Are you sure you files are in the correct order, just before the closing the </body> tag, with your code file coming after the GSAP files. And you are registering ScrollTrigger, e.g. gsap.registerPlugin(ScrollTrigger)?
  20. If you're trying to fade them in, set their opacity to 0 in your CSS. You will probably have to create a trigger each one. Some pseudo code.... gsap.utils.toArray(".text-pin").forEach(el => { gsap.timeline({ scrollTrigger: { trigger: el, ... } }) .to(el, { opacity: 1 }) ... });
  21. The CDN is probably going to be easiest.
  22. That's really not something that can be tweened. Those waves have to be calculated dynamically on every animation frame. The demo you provided is probably about as simplified as you can get it. There are ways to do simpler waves with GSAP. Just search around the forum...
  23. Resizes are debounced for performance. There's really no need to recalculate stuff until the browser size has settled. If you want to listen for resizes you can use add an event listener. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener()
  24. Do you mean like this? .to(".iphone-scroll-image img", { yPercent: -100, y: $('.iphone-scroll-image').height() })
  25. Welcome to forums @ceescoenen Have you checked out our Getting Started guide? Go through that, and then check out a Timelines. Your animation sounds pretty straightforward. Just set the opacity of your images to 0 in your CSS, and then animate them in. 😀 gsap.timeline() .to("#image1", { opacity: 1, duration: 0.75 }) .to("#image2", { opacity: 1, duration: 1 }) .to("#image3", { opacity: 1, duration: 1.25 }); If you need anymore help, please put what you have in a minimal demo.
×