Search the Community
Showing results for tags 'stuttering'.
Found 4 results
-
I noticed that very specific to Apple iOS mobile devices using the Safari browser on mobile, using the animation effect marginRight for background elements having a background-image with repeat-x seemed to have a stuttering effect. When viewed in desktop browsers and browsers other than Safari, the stuttering effect on the background repeated element is not seen. Is it because of one of the CSS effects I applied, which is the width != 100%, or is it the way GSAP JavaScript code is written? Please kindly view the Codepen attached. All good helpful feedback appreciated! -
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!
-
This is a first for me since i have been using GreenSock for many years and it never failed me since. I discovered its quite easy to even create banners using Adobe Animate CC 2017.. However now in that new workflow/method i noticed a asimple animation not running smooth but jerky or stuttering. The animation should go smooth from left to right in an even manner... but it doesn't..., the customer noticed it ..In fact he made the remark i didn't see it at first while developing. Its like the animation "jumps" bridging larger gaps to reach the end of the animation. I have a link here: http://dru.sterkburo.info/demo/demo1.php. It does this in every browser (FF, Safari and Chrome) on mac. But most noticeable in Chrome. Any one any ideas?; 1. I read some one having trouble in safari and using transform: translate3d(0,0,0); that ran smoother/faster. But that isn't it safari only? 2. I can raise the frame rate in Adobe Animate CC 2017 and this does make - while developing - animations run smoother but online they are jerky and stuttering again Looking forward to any help or suggestions Regards
-
I'm trying to scale an image down from 200% to 100% to the center of a div. First I used the image as the background of the div, simply animating the backgroundSize with background-position: center;. This worked, but caused the image to heavily stutter during the animation in both Chrome and FF at least. I then created a workaround and setting the initial image width and height to double the original size and setting the left: -25%; (also tried using translate() for this). .windmolens { position: absolute; left: -277px; top: -40px; width: 1108px; /* original image size is half of this */ height: 160px; /* original image size is half of this */ } NuonTl.to(background, 3.5, {width: "554px", height: "80px", left: 0, top: 0}) Result: http://comheroes.nl/nuonbanners/728x90/ With this code I have the stuttering in Chrome, FF and IE11. There's no stuttering if I leave out the positioning (left, top animation).. Any tips?
