Jump to content
Search Community

OSUblake last won the day on September 16 2023

OSUblake had the most liked content!

OSUblake

Moderators
  • Posts

    9,196
  • Joined

  • Last visited

  • Days Won

    708

Everything posted by OSUblake

  1. I probably wouldn't use that approach at all. I know it provides a smoother looking progress bar animation, but it's not accurate, so you would probably have to stop it at like 99%, and check if is fully loaded, and then wait for the load to complete if it's not. I hate it when progress bars just sit there and hang on 99% for a couple of seconds. It makes me think something went wrong. And I didn't test, but I'm assuming that technique won't work if you dynamically load stuff, like with ajax, or inside a single page app. I guess if you want a smooth animation, you could do an indeterminate progress bar, like #2 here.
  2. You keep adding animations to your timeline everytime animateBorderEnter gets called. Create the animations once. https://codepen.io/osublake/pen/de002abd89937b1ac989a090a58e69b4
  3. No, gsap wouldn't help as that animation is already pretty optimized. As @Friebel pointed out, it would run much faster using WebGL. I'm 100% sure that the person who made that demo knows WebGL is faster. It's just an "experiment" to show how you CAN do 3d in a 2d canvas. Just because you CAN do something, doesn't mean you SHOULD. Use the right tool for the job.
  4. I'm not sure what you mean as the behavior hasn't changed since v2. The animation has always been the default scope of callbacks, but arrow functions cannot be scoped or used with bind. this.tween = gsap.to(".box", { x: 100, onUpdate: () => { console.log(this); // the class console.log(this.tween); // the tween } }); The only way this will be the tween is when using a regular function, or the new method syntax. And again, this is the same behavior in v2. this.tween = gsap.to(".box", { x: 100, onUpdate() { console.log(this); // the tween console.log(this.tween); // undefined } }); It will still work for backwards compatibility, but it's been deprecated. Using the stagger property is the correct way to do staggers now as it gives you more options. If you look at the source code, you'll see that staggerTo converts it to the new syntax. //ONLY for backward compatibility! Maybe delete? staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) { vars.duration = duration; vars.stagger = vars.stagger || stagger; vars.onComplete = onCompleteAll; vars.onCompleteParams = onCompleteAllParams; vars.parent = this; new Tween(targets, vars, _parsePosition(this, position)); return this; } If you need the current element being animated, put the callback inside a stagger object. gsap.to(elements, { x: 100, stagger: { each: 0.2, onUpdate() { console.log(this.targets()[0]); // the current element } }, onUpdate() { console.log(this.targets()[0]); // the first element } }); I know you have to work to do, but making simple demos of your upgrade issues would be much faster than explaining the problem, and having us guess at what the problem is. This demo shows an obvious bug that @GreenSock needs to look at. In Firefox, setting a transform/origin on an element outside of the DOM doesn't get rid of the temp <svg> element. Inspect the red rect. It's inside a different <svg> element. https://codepen.io/osublake/pen/c468d76d9075f1b57c04fca1ec1fbd58 If you inspect an SVG element that you set the transform origin on, you'll see that it will actually be 0px 0px 0px. This is because gsap bakes transform origin into the matrix, so when you copy/clone a transformed SVG element, GSAP can't get back the original transform values. In v2, gsap saved some info on some attributes to help extrapolate the original transforms from the matrix. To understand why gsap bakes the origin into the matrix, here's an excellent article written by Jack. https://css-tricks.com/svg-animation-on-css-transforms/ To restore the original transform in v3, I would just remove the transform attribute and set the transforms again. https://codepen.io/osublake/pen/895238a8976ab8608750a0824f785ae8
  5. Shrug got it right. A smaller file size means you can transfer stuff faster over the internet, but once it's loaded, the browser has to convert it to a bitmap, which will usually become much, Much larger. Image formats, like png, jpg, gif, and even svg, are just compressed/encoded image data, kind of like a zip file. The actual size in memory, the uncompressed/decoded size, is related to the actual dimensions of the image using that calculation above. More about decoding an image in the browser. https://dexecure.com/blog/image-decoding/
  6. Interesting. I've never seen that API before, but I see that it's just an estimate. I was playing around with that demo, and there were many times where it failed. The progress would reach 100 and fade away, but the image was still loading.
  7. Just a little demo. If you keep clicking fade, you'll see that it won't animate back to 1. https://codepen.io/osublake/pen/8737c62b8f3253745552bba7992c58b4
  8. Your demo has too much code, so I'm not going look at it, but this usually happens when a previous animation is interrupted or doesn't complete. from will create an animation from a value to the CURRENT value. If the current opacity is 0.06 when you create a from animation, then it is going to tween the opacity from 0 to 0.06. If you know the end value, then you should probably use fromTo.
  9. I noticed that the other day. I remember using strings in my demo. I just thought you weren't using them because it was a quicky demo. https://codepen.io/osublake/pen/7d3275656ef955c5ea2eb121c2407ba6 And in v3, string support is much better. The names are shorter, and you can use parameters with strings. // Still works ease: Elastic.easeOut.config(1.1, 0.4)}); // Smaller ease: "elastic.out(1, 0.3)" // Even smaller! out is the default type ease: "elastic(1, 0.3)" Then you might like this thread.
  10. Also, don't use events to get the target as it might not be what you are expecting due to way events bubble. Just use this.target. // BAD onDragStart: function(e) { if (e.target.targetAttachedTo) e.target.targetAttachedTo.removeClass("occupied"); } // GOOD onDragStart: function() { if (this.target.targetAttachedTo) this.target.targetAttachedTo.removeClass("occupied"); }
  11. No it's doesn't. GSAP/Draggable knows nothing about IDs. It works with element objects. It would be quite limiting if gsap only worked with stuff that had an ID. You just have logic errors. You can't run a hit test on something that doesn't exist. https://codepen.io/osublake/pen/40a20996e681283f6de8f43d410ff49c
  12. ? That is using like 95MB of memory! 7443 * 3206 * 4 / 1000000 = 95.449032 MB
  13. Fun little animation! The distribute util is the coolest thing ever, right @Carl ? Caching is a very good technique to improve performance, but I think an easier solution is to just record the ending transformations from the wiggle animation, and then create a timeline from those values. https://codepen.io/osublake/pen/6e1e0338d8708ea850166b8d0fafab4a
  14. Or it might not be scroll magic. I didn't look into your code, but this makes more sense.
  15. Repainting is necessary sometimes. For example, canvas/WebGL updates will always repaint. So will SVG... in Chrome at least. It really depends on how complicated the repaint operation is. The more complicated the shapes, the slower. I do see it get jumpy around here. I had to reduce the size of my screen. But maybe the problem might be due to ScrollMagic. It hasn't been updated to work with gsap v3. Don't know why. It's a really simple fix.
  16. You're assuming that your paths start at 0, 0. https://codepen.io/osublake/pen/9a769e97a10e2598f2bd072e095b5ca1
  17. Did you try it the other way. gsap.set(this.p[0], { transformOrigin: `${pointOriginTransform}px 0px` });
  18. You might want add to the install page about how to get nuxt SSR working by letting it transpile gsap, and using process.client.
  19. And also go through that thread I linked to.
  20. Please read this thread. It's much easier if you tell nuxt to transpile gsap. You're didn't install it. Please watch this video. @ZachSaucier You forgot to remove the .default part when you added the brackets. It should just be. const { gsap } = require("gsap/dist/gsap");
  21. You can make the plugin yourself.
  22. Yeah. That url is always the current version. But I don't see any problems with it. https://codepen.io/osublake/pen/cfaf9246d77d1bec863b04e9e59cfdf0
  23. Why are you even trying to use the motion path plugin if you're just moving to a point? Check out the docs. https://greensock.com/docs/v3/Installation?checked=core,motionPath#modules https://greensock.com/docs/v3/Plugins/MotionPathPlugin I can't help with the scroll magic stuff, but everything else should be very straightforward to convert over. import { gsap } from "gsap"; import { MotionPathPlugin } from "gsap/MotionPathPlugin"; gsap.registerPlugin(MotionPathPlugin); ... const flightPathUp = { curviness: 0.5, path: [{ x: 0, y: -100 }] }; const flightPathUp2 = { curviness: 0.5, path: [{ x: 0, y: -80 }] }; const flightPathUp3 = { curviness: 0.5, path: [{ x: 0, y: -100 }] }; const flightPathUp4 = { curviness: 0.5, path: [{ x: 0, y: -80 }] }; const tween = gsap.timeline({ defaults: { duration: duration, ease: "power1.inOut" } }); tween .to(".image-4", { motionPath: flightPathUp, opacity: 1 }) .to(".image-4", { motionPath: flightPathUp3, opacity: 0.1 }) .to(".image-3", { motionPath: flightPathUp2, opacity: 1 }) .to(".image-3", { motionPath: flightPathUp4, opacity: 0.1 });
  24. Or are you talking about the origin problems in your Draggable question earlier?
×
×
  • Create New...