Jump to content

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

OSUblake last won the day on August 15 2019

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. That's why I was suggesting checking out three.js, which uses a 3D renderer (WebGL). Moving and scaling objects in 3D space is pretty fast. Just think of how smoothly 3D video games are. You can still make 2D looking objects in 3D. The only problem for what you're doing is that you would need to convert most of your graphics into geometric objects/models, which might take a little work.
  2. I don't know how well smooth scrolling will work like that because because I never tried it without using the body, and I can't code something up for you at the moment. That's probably because you're using jQuery, which wasn't used in my code sample. If you're not using the actual body, I would probably change the name of that var to something else to avoid confusion with the actual body. body = document.querySelector('.mywindow'); The scrollY var might need to change too. Probably to something like this: var scrollY = body.scrollTop || 0; But I haven't tested that.
  3. You're good. I understand how creating a demo showing performance problems can be difficult. Your movie and SVGs do a good job of illustrating what you're doing. It really depends on the complexity of the graphic. Your graphics are very complicated, so that's most likely part of the problem. Your approach of using SVG as CSS backgrounds and only animating transforms and opacity is spot on. The problem comes with scaling an SVG image because it has to constantly be redrawn to be resolution independent. Scaling a png won't have that issue, but the downside is that it will become pixelated the more you scale it up. It really depends on the what the filter does. Filters that blurring/shadows can be really slow. Filters that do color related operations can be really fast. So after seeing your video, I'm thinking that scaling up pngs with an increasing level of detail might work. Check out the ExpoScaleEase docs. https://greensock.com/docs/Easing/ExpoScaleEase And this demo. https://codepen.io/GreenSock/pen/NyXBbV
  4. Hi @InfamousRocket Welcome to the forum. ? It sounds like you're asking about how to improve the performance of your app. There's nothing wrong with that, but the best way to get help on this forum is to provide a simplified demo showing your issue(s). Without a demo, it's hard to provide much more than educated guesses. Check out this thread if you need help creating a demo. But I'll go ahead and take a crack at answering your question based on the information you provided. The main issue I see is that you are using SVG graphics. SVG has a bunch of nice features, but performance isn't one of them. The easiest way to become the mayor of Slowville is to animate an SVG graphic with shadow/blur filters. Shadow/blur filters are quite literally the slowest graphics operation you can do. Every time you scale an SVG graphic, the browser has to recreate all the pixels for the shadow/blur in addition to the pixels for the rescaled graphic. If possible, using a normal image (png, jpg, etc) would be much faster. And yes, scale is technically a transform that can be GPU accelerated, but that will only happen if the graphic can be rasterized. Due to SVG's scalable nature, that's probably not possible, even when being used as a CSS background. Flash has been dead for many years, but canvas? Well, that's pure JavaScript. Canvas is not the easiest thing to pick up, but it can really improve performance. And 26 animations? Using canvas/WebGL, you can easily have thousands of animations running simultaneously. Just a little demo using PixiJS and GSAP. https://codepen.io/osublake/pen/oWzVvb And if you're going for 3D, I would recommend checking out three.js. https://threejs.org/ And yes, three.js plays very nicely with GSAP. ?
  5. Nice! I'm glad somebody found my post useful. ? It's worth noting that @GreenSock just added canvas support to the latest version of the MorphSVGPlugin. Woo Woo! Check out the MorphSVGPlugin docs: https://greensock.com/docs/Plugins/MorphSVGPlugin And this demo: https://codepen.io/GreenSock/pen/WYWZab BTW, I'm still out of town, so I haven't had a chance to check out your library, but it's #1 on my todo list. I love seeing how other people use canvas with GSAP.
  6. I'll try to revisit this thread when I get back to my home office and explain why @Dipscom got it working using require inside an if statement. For more in depth knowledge, I would recommend trying to build a node web app without any libraries or frameworks. You'll get a good understanding of how server and client side JavaScript differ. Here's one tip. You can't use import inside an if statement. Well, you can, but it should look like the second import in my tweet here, and I don't know if nuxt supports that. https://twitter.com/OSUbowen/status/1082027558730911746?s=19 For database stuff, I love using Firebase because you don't need an actual backend i.e. serverless. https://firebase.google.com/ And dipscom will rightly point out that I'm a Google lackey for recommending Firebase, but I don't care. ?
  7. I'm on mobile right now so it's hard for me to give detailed advice. Using imports for premium pluguins and a cdn for gsap is going to cause problems because the plugins will try to import GSAP. To avoid mixing modules I would just copy the pluguins into your GSAP folder in node_modules and try following the advice in the docs. https://greensock.com/docs/NPMUsage However, Nuxt might have issues with importing es modules. Well it did last time I checked, but I can't really investigate right now. I'm out of town at the moment.
  8. PS: You're mixing es modules and umd imports which messes stuff up.
  9. My advice... GSAP works as a global. Stop wasting your time trying to import it and just load it through normal script tags. Your animation code will work just fine without the imports. All these importing problems should be resolved in the next version of GSAP
  10. Flexbox isn't designed for grids. That's what CSS grid layouts are for. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout You can listen for media queries to change the layout and recreate your animations.
  11. I would highly recommend not doing that for any framework (Vue, React, Angular, etc). querySelector/querySelectorAll can be very problematic with components. Using $refs is the correct approach for selecting elements in Vue. No, that's a Vue file, and it is not an actual script tag. That's all the support I can offer as I'm on mobile right now.
  12. I'll take a look at it next week. I'm traveling right now. Luckyde, I'll also respond to your PM when I get back next week.
  13. You can still use a gradient, you just need to rework your HTML and SVG. Create unique SVGs for each clock hand, and put each one of those SVGs inside a unique div. Absolutely position those div wrappers over your clock face, and animate the divs instead of SVGs. To get rid of paints, you can set force3D: true on your animations. force3D only works with HTML elements. And you need to be careful about overusing force3D, as it will create a new layer, which can slow things down if there are too many layers.
  14. That's expected when you animate/change an SVG. And paints aren't entirely bad. It's more about what's being painted. Canvas/Web GL are fast, but they will repaint on every update.
  15. Use images instead of SVG graphics. Animating images is super fast. Animating elements with gradients and filters is super slow. And using <use> elements is super slow.
  16. This is really only specific to JavaScript, so it probably wouldn't translate well to other languages like Java. To make a cross platform app with JavaScript, the easiest solution might be to use electron. https://electronjs.org/
  17. You don't have to post any SVGs from your project. The simpler, the better.
  18. So you would need to fix this too. .to(this.$refs.riding, .2, { morphSVG: this.$refs.anticipateFwd, shapeIndex: 0 }, '+=' + Math.abs(this.tlMove().duration() - 0.5)) To something like this: .to(this.$refs.riding, .2, { morphSVG: this.$refs.anticipateFwd, shapeIndex: 0 }, '+=' + Math.abs(this.startDuration - 0.5)) Again, I don't know what this timeline is supposed to be doing, so I don't know if the advice I gave about this.endTimeline.play(0) is accurate.
  19. No. The problem is you're creating new timelines. For example, this piece of code is creating the move timeline 2 times. Every time you call this.tlMove(), you're creating a new timeline. const tl = TweenMax.to(this.tlMove(), this.tlMove().duration(), { progress: this.progressToGo, ease: Back.easeOut.config(1.3), x: -5 }) Can you put your code in a simplified demo? It's hard to give advice without see what's going on, and I don't know if what I post will even work or what you're trying to do. You can use Vue on CodePen. On mount, save your timelines and what not to this. this.startTimeline = this.tlStart() this.startDuration = this.startTimeline.duration() this.endTimeline = this.tlEnd() this.updateProgressToGo() this.startTimeline.play() this.endTimeline.play(0) this.tlMoveWrap() Now you can reference startTimeline and startDuration here. tlMoveWrap() { const tl = TweenMax.to(this.startTimeline, this.startDuration, { progress: this.progressToGo, ease: Back.easeOut.config(1.3), x: -5 }) return tl } And on watch: this.updateProgressToGo() this.wrapTimeline = this.tlMoveWrap() this.endTimeline.play(0)
  20. You can pass the progress into your method like your other code pen. myMethod(progressToGo) { TweenMax.to(this.tlMove, this.tlMove.duration(), { progress: Number(progressToGo), ease: Back.easeOut.config(1.3), x: -5 }); }
  21. I'm confused. ? If I understand correctly, you need to put this code inside a method. myMethod() { TweenMax.to(tlMove, tlMove.duration(), { progress: this.progressToGo, ease: Back.easeOut.config(1.3), x: -5 }); } To access your timelines, like tlMove, you can add it to this. this.tlMove = new TimelineMax({ paused: true }) Now you can reach it. myMethod() { TweenMax.to(this.tlMove, this.tlMove.duration(), { progress: this.progressToGo, ease: Back.easeOut.config(1.3), x: -5 }); } Where is this value is coming from? this.progressToGo
  22. Here's an old demo I made that shows the beauty of using a Sine easing. https://codepen.io/osublake/pen/VjAvBq
  23. Please post exactly what your index.html file and your animation.js files looks like. I think the problem is somewhere in there.