mathis

Hi Jonathan, Thank you for your detailed answer! I changed my code regarding your advices and in fact the animations were more fluent, but not as fluent I hoped. So I continued testing and I finally found the "wrongdoer". It was the CSS Blur filter for the background image which caused so much work for the cpu (or gpu I'm not quite sure). So now it runs like a charm, even on the Mac mini and in fullscreen mode. I'm so sorry for wasting your time, but I really didn't expect that this filter can cause so much trouble. But thanks to you, my code is optimized now. So, thank you again for your help!

Hi Jonathan, thank you for your quick answer! I'm currently developing and testing it on an iMac from late 2012 and also noticed that it runs much more fluent in Firefox. But I already tested it yesterday on my Laptop with Windows 10 and there I had also a lot of stuttering in Chrome. So I don't know your computer but I guess you have more cpu or gpu power than me. The main problem is, that the system should run on a Mac mini, which has also big problems with the animations (in Firefox too). So if you have any advices for me how I could improve the code, I would be really glad. If you need further information or anything else, please let me know. Edit: I also forgot to mention, that Chrome should be run in Fullscreen mode and then the stuttering is getting worse.

Hi all, like the topic already mentions do I have a problem with stuttering animations inside my TimelineMax animation and it would be really great, if somebody of you could help me. I'm currently developing a system for our company in which images and videos of our work can be uploaded/selected with the help of a CMS. These media should be animated afterwards, so that it looks like a dynamic generated showreel. So I used PHP to dynamically generate the JavaScript code and basically it works, but as you can probably see in the Codepen or in the demo, especially in Chrome the animations are stuttering a lot (depending on your computer/device). I have to say that I'm new to Greensock and also not the most experienced developer, so I would appreciate every advice of you. Regarding my code I guess there's a lot of potential for optimization. Especially the way of adding the subtimelines to the maintimeline and calling the functions of the subtimeline is probably wrong. For example: var mainTimeline = new TimelineMax({repeat:-1}); mainTimeline.add(websiteTimeline(website)); function websiteTimeline(website) { MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); // Create sub timeline var timeline = new TimelineMax(); // Add tweens to sub timeline timeline.call(morphToPhone); function morphToPhone() { TweenMax.to("#bezel-macbook", 0.2, {morphSVG:"#bezel-phone"}); TweenMax.to("#camera-macbook", 0.2, {morphSVG:"#camera-phone"}); TweenMax.to("#screen-macbook", 0.2, {morphSVG:"#screen-phone"}); TweenMax.to("#shape-macbook", 0.2, {morphSVG:"#lock-phone", css:{opacity:0}}); TweenMax.to("#line-macbook", 0.2, {morphSVG:"#speaker-phone", css:{opacity:0}}); TweenMax.to("#touchpad-macbook", 0.2, {morphSVG:"#lock-phone"}); } } I also already read about the performance differences between JavaScript and CSS, so my next step would be to use more pure CSS and less TweenMax animations, but I wanted first ask you guys, if you have some better advices for me. I hope anyone of you can help me. Here again the links to my Codepen and demo... Codepen: http://codepen.io/mathis-krueper/pen/ZeQEzZ Demo: http://mathis-krueper.de/captain/references/ Thanks in advance!