Jump to content
GreenSock

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!

OSUblake

Administrators
  • Posts

    4,261
  • Joined

  • Last visited

  • Days Won

    439

Posts posted by OSUblake

  1. 19 hours ago, InfamousRocket said:

    Though i wonder, can canvas (or any other tool for that matter) do the SVG scale without performance issues?

     

    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. 

    • Like 3
  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. 

    4 hours ago, qqignatqq said:

    I tried to write body = $('.mywindow'); but I have an error.

     

    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.

    • Like 3
  3. 31 minutes ago, InfamousRocket said:

    I do realize how a demo can help and i'm sorry for not providing one

     

    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.

     

     

    34 minutes ago, InfamousRocket said:

    SVG is not the best pick when scaling something

     

    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.

     

     

    36 minutes ago, InfamousRocket said:

    SVG filters are terrible when animated

     

    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.

     

    See the Pen NyXBbV by GreenSock (@GreenSock) on CodePen

     

     

    • Like 3
    • Thanks 1
  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. 

     

    On 8/2/2019 at 6:14 PM, InfamousRocket said:

    I DO NOT use canvas or flash for any of the purposes i expressed so far am only using JS, JQ, GSAP, CSS, HTML. My aim was to hit a project like this only with the knowledge of these programming languages and frameworks that i know i'm good at..

     

    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.

     

    See the Pen oWzVvb by osublake (@osublake) on CodePen

     

     

     

    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. ?

     

    • Like 3
    • Thanks 1
  5. On 8/1/2019 at 1:29 PM, Luckyde said:

    I took @OSUblake 's post

     

    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:

    See the Pen WYWZab by GreenSock (@GreenSock) on CodePen

     

     

     

    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. 

     

    • Like 1
  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. ?

     

     

    • Like 3
  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. 

    • Like 2
  8. 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

    • Like 2
  9. On 7/29/2019 at 10:03 AM, refael_b said:

    Thank you  again. I am frustrated. This is flexbox grid. The website is dynamic (php & mysql) so it can be 10 items or 9 items.

    mobile view it should have 1 item per row and stagger works great. ipad view it should have 2 items and desktop view 3 items. 3 items is max per row.

    How can one resolve this? I would appreciate an example. 

     

    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.

    • Like 2
  10. 2 hours ago, ZachSaucier said:

    You don't need to pass in a nodelist (what querySelectorAll gives you) - you can just pass in a string and GSAP will call querySelectorAll on that string if you want to.

     

    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. 

     

    38 minutes ago, GreenSock said:

    I wonder if you just need to add type="module" on your <script> tag(?) Typically script tags are NOT treated as modules (thus can't understand imports) in browsers. 

     

    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.

    • Like 1
  11. 17 minutes ago, codebeast_ said:

    Actually, the stepping and removing gradient improved the animation practically. It's back at 60fps.

     

    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.

     

     

    • Like 1
  12. 2 minutes ago, codebeast_ said:

     the SteppedEase examples visually works but when you look at the the paint debugger, all the hands are still repainted every second 

     

    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.

    • Like 1
  13. 9 minutes ago, codebeast_ said:

    The problem is, imagine I have 5 - 10 of these clocks on one page, there is a huge drop in performance.

     

    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.

     

    • Like 2
  14. 1 hour ago, Dhurgan said:

    But as a learning exercise I would like to build it myself... and I want it on a platform not bound to specific hardware/os so Java/JavaScript seems to be the most natural way to go...

     

    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/

     

     

    • Like 4
  15. 7 minutes ago, sum.cumo GmbH said:

    Unfortunately I am not allowed to post the SVGs used for morphing etc. until my project is live. That is why I did not create a complete codepen yet. But if the problems I have still remain I will take my time and create some content I am allowed to publish.

    I will let you know if it worked out.

     

    You don't have to post any SVGs from your project. The simpler, the better.

    • Like 2
  16. 10 minutes ago, OSUblake said:

    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.

     

    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.

     

     

    • Like 2
  17. 13 minutes ago, sum.cumo GmbH said:

    My main problem ist to keep the animation progress and update from its last state when running the animation function again. I guess I would have to create a main timeline?

     

    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)

     

     

     

    • Like 2
  18. 10 hours ago, sum.cumo GmbH said:

    I really hope this is not confusing.

     

    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

     

     

    • Like 2
×