• Content Count

  • Joined

  • Last visited

Community Reputation

3 Newbie

About chris_hengst

  • Rank
  1. chris_hengst

    SVG Animations and GPU workload

    👏 Thank you! I was animating a <g> tag inside of the SVG tag. As I animate the <div> containing the SVG, I do get the same result with much lower GPU usage! I will optimize it this way! Thanks again!
  2. chris_hengst

    SVG Animations and GPU workload

    Hi there, I'm using GSAP to animate inline SVG's in my iOS Cordova app. FPS Performance is alright, everything is working fine, but the energy usage of my app is enormous! While debugging this issue with Xcode, I've noticed that it has to do with the SVG animations. A simple pulsing animation of an inline SVG allocates around 80% of GPU power of an iPhone X. The phone is running hot after a minute... If I switch the SVG element with a simple DIV or a canvas tag, the GPU is down to 5%. The "force3D" property has no influence on this... To rule out that this is a bug with Cordova, I've also tested this in the native iOS Safari browser with the same result. I've read the SVG Gotchas under the SVG-Tips . Sounds like there is no easy solution for this as the browser (or GPU?) calculates each frame. 1. Do you have any tips/ideas on this? 2. Do you think it would be better to switch to canvas if possible? I've no experience with canvas. Is it possible to use multiple (a lot) of canvas tags on one page? I'm using SVG's for icons/graphics to adjust colors at runtime. Thank you for any tips!
  3. chris_hengst

    Glitchy and plopping sounds during animations

    @Dipscom thank you for your reply! Yeah, I'll probably have to see if the recoding will do the trick. I've already assumed that this would not be a GSAP problem but I wanted to give it a shot here because this 'bug' drives me crazy for a while now So if anyone has any further suggestions I'm happy to try them out! Thanks again!
  4. Hi there! I’m facing some sound issues with my app and was wondering if maybe one of you guys had similar issues... I’ve attached a video link ( where you can see and hear what’s happening. The plopping is totally random and appears mostly when there is a lot of interaction with the interface (opening modals, dragging the wheel > all handled by gsap). If I set this modules do “display:none”, to have a clean interface, the sound issue does not appear. Now you would say: We need some code... The app’s code is currently a big MESS. I cannot reproduce the issue in CodePen and to be honest, I don’t want to share my complete project folder. The app uses a lot of jQuery and the DOM is very stuffed. The ‘wheel’ is an inline SVG asset. I’m currently recoding this project with vue.js to get it A LOT leaner but this will take me a while and I would love to get rid of the sound issue before that... So I’m just taking a shot here. I’m happy for any kind of advice! I’m not sure if it is actually related with gsap, or maybe the sound issue appears because of the sum of nonoptimal code, but maybe there is some little ‘fix’ out there someone of you guys know. The issue appears in every browser. On my local machine and on mobile devices (iOS more frequent than Android though). Even on the ‘brand new’ iPhone X. The app uses cordova. I’ve tried a lot of different JS sound libraries (tone.js, howler.js, ...) currently I’m using pizzicato.js. Always the same issue. Sounds are handled by the WebAudio API. If you want to see the app in action and you are using an iOS device: With the following codes you can download the app for free on the Apple App Store (codes only work once...) TJFXHHXAHP9J KA7EA96TXEEP 4RNKFN6NH39M AWMFYTJE6AYJ 3WL76FLXNRFN FHEWJ7JYLFW9 WM4WN4AHYAFK 67E3AXNMXNRY K9Y37PFEFXWR TJLLWYFP3RWF TWHFKJ9J34YF 3M9XYTRPLA9W JAWLR9EYEFAA P3HXWEW66W7T Y73LPRM939PJ Thanks!