Jump to content

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


Popular Content

Showing content with the highest reputation on 08/04/2019 in all areas

  1. 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. ?
    2 points
  2. Do you need to reverse it from the end? I'd just play/reverse on hover like this: https://codepen.io/PointC/pen/qeVZmV Does that help? Happy tweening.
    1 point
  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
    1 point
  4. Hey there blake, Thank you both for the welcome & the respond I do realize how a demo can help and i'm sorry for not providing one. The thing is i find it really hard to extract any sequence from my website due them being in a series of chained loop reactions, which if i want to i can extract that eventually! However i can't shake off the thought that this problem of mine is performance-related! Simply put we gotta go for all of the website unless i can pinpoint a problem first. So far i wrote about 4000 lines of javascript (that's optimized object-oriented programming btw) which i know the best, so you get the point... Ok based on what you suggested SVG is not the best pick when scaling something SVG filters are terrible when animated Got it, i can definitely switch from SVG filters to PNG's but what can i use instead of the SVG itself? What is best & what to avoid when scaling? I gotta say i never saw a website do this kind of scaling that i intend without the help of canvas, or something... This is an example of a star:DevStar.svg This is a space storm:RightWing.svg Another space storm:Dlm_StarFlow.svg Now when flying all of these may scale way more than the user's screen (they eventually get a 0 autoAlpha and reset scale), And to consider that most of these big elements have particles (all of them actually) This is an example with really bad fps xD, the actual website doesn't work this bad tho! Jwust wanted to show what kind of scaling it is i'm talking about... https://www.mediafire.com/file/0llb3u5r96zoi7u/ScaleSample.mp4/file
    1 point
  5. Hi again, Thank you so much for having this great forum! My first try at an interactive, drag and drop, section of most of my webpages was a disaster w/o GSAP. Then I remembered from my AS3 days (still do it) that these greensock forums had gotten me through a number of difficult coding and design issues. I also remembered that greensock and HTML5 were almost synonymous. I was able to figure out my question, but just having this site available gives me so much more confidence in my ability to learn HTML5 and its greensock applications. So, thank you, Jack, GSAP, and these forums!! I'm sure I'll be back. The new code will be posted to codepen shortly for anyone who is looking for a way to have multiple drag objects with a single drop area where the objects are prevented from being dropped on top of one another.
    1 point
  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. ?
    1 point
  7. Glad you found a solution. If your goal is to get rid of any transforms, you don't have to pass in that long matrix3d() value. You could do any of these: tl.set('.text2__hidden', { transform:"none"}); //or tl.set('.text2__hidden', { clearProps:"transform" }); //or explicitly reset things: tl.set('.text2__hidden', { x:0, y:0, z:0, scale:1, rotation:0, skewX:0, skewY:0, rotationX:0, rotationY:0 }); Happy tweening!
    1 point
  8. I'd probably just adjust the eases a bit. Maybe something like this? You can adjust the config in those elastic eases to your liking or create a custom ease too. When you're looking for a smooth transition from the first to the second tween, you'll usually want to easeIn to the first and easeOut of the second. You had them both as easeOut in your original demo which can be problematic for the type of effect you're looking for here. Happy tweening.
    1 point