Jump to content
GreenSock

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

Leaderboard

Popular Content

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

  1. Vue's data system uses setters to detect changes, which is being triggered with this.timeline = new TimelineMax() in your mounted section because it's a different type than null. And you don't need reactivity for a timeline. Vue can't detect when you make changes to a timeline.
    3 points
  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 points
  3. First off, the demo is really mesmerizing! Codus to whoever built it ❤️ I should design a very interesting loading screen, cause another downside is bidding farewell to that cute 3 MBs of design and probably pass 15 MBs!! Not nagging over here, there's always a sacrifice anyways... I was beginning to switch the idea from rocket to a wheel or something (desperate times i know) cause i have a form of fly which does nothing but rotating and that part is legit the smoothest piece of animation in the whole thing! It looks cool too, but not as much as the fly effects When i think about PNG and SVG's differences in nature, i think it would work perfectly fine cause PNG just goes straight to cache so when scaling, browser have less graphical difficulties to deal with and doesn't need to redraw something at every pixel change, therefore we'll get better performance. Besides i'm that person who gives up perfect graphics for better fps in a game, so i think i know what option i'm going with. Though i wonder, can canvas (or any other tool for that matter) do the SVG scale without performance issues? So far i got what i asked for, Mostly i needed confirmation that there isn't a magical tool out there doing what i'm doing 10x better! No point in reinventing the wheel, at least not without improving it! I thank you dearly ❤️ and will post about my success so there's conclusion on this topic!
    3 points
  4. 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
    3 points
  5. Hey, maybe this concept could be helpful ... https://codepen.io/mikeK/pen/BXNOgN https://codepen.io/mikeK/pen/PMOyZB Happy tweening ... Mikel
    2 points
  6. 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 points
  7. 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.
    2 points
  8. 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
  9. 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.
    2 points
  10. Hey, thanks for the replies (and for GSAP itself too!) Yep, sure, Vue, agree on everything, it was a sort of minimal example replicating the issue and unfortunately seems to steered the original question I was just wondering if maybe anyone had any insight from GSAP's side of things, what interaction might be happening between the Tween and the Timeline since separated (by time or code) there are no issues observed with no changes in the Vue-related code that fails once the events are happening concurrently. (Only when the Tween is running it somehow interacts with the assignment of the Timeline object, as the codepen shows, otherwise no issues observed) I'll likely look into the issue further just for the fun of it, but the workaround of assigning a placeholder "new TimelineMax()" to the Vue's data at start and then replacing it with the real deal is working without any issues for my case, and at worst, I won't be using Vue's data for these objects, no problem. This is likely also a good clue to start the investigation I guess! Thanks again, will update you if I find out anything!
    1 point
  11. Also, you should probably use $refs instead of selectors like ". moving-rect" and ".circle". Elements may be swapped out during rerenders e.g. when Vue detects a change.
    1 point
×