Search the Community
Showing results for tags 'performance'.
-
I'm trying to achieve 60FPS in my UI. I'm using an x,y Draggable, but cannot currently get a jank-free experience with Draggable which makes me so sad because otherwise I love this tool (and even joined the club). See the chrome profile timeline below. How can we fix this?
- 8 replies
-
- draggable
- performance
-
(and 1 more)
Tagged with:
-
I've made a small animation test, trying to mimic this simple effect My code is available here and this is a screen-capture recording the results. 4 browsers from left to right: IE11 - a complete mess, not web worthy... then Microsoft Edge 13 - notice a round circle is a bit too much to ask... I used border-radius. Then comes the mighty Google chrome - notice how the animation elements are pixelated during the animation to achieve "performance"... and last is Firefox which is the only browser that delivered a sharp result although the movement was a bit jumpy lacking smoothness and elegance. I've used GSAP which uses a css plugin to animate the css properties via JS. Someone please tell me how this site is looking great even on IE11? It uses the same GSAP animation library as mentioned here... Any thoughts on techniques they may have used to improve the appearance of these animation? Footnote - I didn't add codepen since it didn't run my code correctly. I tried.
- 8 replies
-
- performance
- cross browsers
-
(and 3 more)
Tagged with:
-
Is TweenLite.to(curSlide, 0.5, {left:"-100%"}); slower than TweenLite.to(curSlide, 0.5, {x:"-500px"}); ?
-
My animation is slow but my various browser debugging tools don't show where the delay is happening. I will post again with specifics and a Codepen if this fails, but could someone take a look at my animation and tell me how they would approach understanding its performance? What tools do you use to see how long things are taking, how memory is being used, and where the bottlenecks are? http://catalyst.goodlookingsoftware.com/a/ Many thanks, Aaron
- 13 replies
-
- performance
- debugging
-
(and 2 more)
Tagged with:
-
Hello! I'm having trouble animating multiple elements smoothly. The animation is not as fluid as I hoped, on mobile it gets even more noticeable. I've tried a bunch of things and nothing seems to have any effect. Maybe there's a better approach to achieve the same result, I don't know, I'm just running out of ideas I created a code pen http://codepen.io/anon/pen/GpGJZP?editors=001 Thanks!
-
Hi, I am building a complex app for iOS with long scrolling sprites. Actually, using BlitMask instead of scrollRect on a large Sprite, on iOS iPad retina it destroys performance instead of improving it. Is it expected or am I doing something wrong? Actually, the flow is as follows: - create BlitMask once enableBitmapMode() once onEnterFrame apply BlitMask.scrollY apply BlitMask.scrollX onCompleteMotion disableBitmapMode() it works as expected, interaction is restored on motion complete, but performance is horrible... goes from 40fps to 3fps... I export in GPU mode. Am I doing anything wrong? Or is it related to parsing a complex BMP in a retina display and uploading to the GPU? thank you very much Filippo
-
I am using TweenMax to do a simple animation on slides, which looks like this: TweenMax.to(slides, 1.2, {y: (-100 * slideNum) + '%', ease: Power1.easeInOut}); I can see in google dev tools that layout is invalidated and recalculated for each update when using this function, but the translate css property should not need to recalculate the layout but only use composition. http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ Is this a bug, a sideeffect to animation using js or just me misunderstanding the concept completely
-
Hey Everyone, I'm working on a site that has some fairly light scroll-triggered animations(basic fade in and fade up). Everything works as expected - animations are triggered at the right time, everything looks good - except that the first time the animation is triggered, there is a slight lag/delay. It's fairly noticeable and I've tried what I can to smooth it out the first time(force3D, setting different props, etc). Everything is smooth and performant the second time the animation runs, but the first is the most important. Seems like something gets cached and allows the animation to run smoother after first time or something. Any ideas? Here's a test link. Scroll down to the 'work' section. http://sanghanco.surge.sh/
- 4 replies
-
- performance
- scrolltoplugin
-
(and 2 more)
Tagged with:
-
Why do the test? Because like this guy(Greensock slow on mobile devices:http://greensock.com/forums/topic/7842-greensock-slow-on-mobile-devices/?hl=android#entry34635), I have a serious performance problems on mobile devices of Android,Even the ‘opacity’ animation. I searched the Forums,and readed all related topics, the given advice is basically set force3d and use of x, y,But this does not solve the problem。 Accidental circumstances I try to replace my project to CSS animations, I were found it to be smoother ,the same effect on Andriod device. I wonder whether my code has a problem?So I decided to find an example of the official, to do a test?[/b][/b][/b][/b] The official test: http://codepen.io/GreenSock/full/2a53bbbcd47df627f25ed1b74beb407d/ The Test devices and OS: iphone 6 : ios 8.4 smartisan U1 : Android 4.4.4 ASUS K00U : Android 4.2.2 The test environment: iphone6 : safari、ios webview ( in wechat ) smartisan U1 :chrome 、android webview ( in wechat ) ASUS K00U:chrome 、android webview ( in wechat ) The test result: iphone6 ------------------------------------------- safari (quantiy:300) css : 55~60fps gsap : 25~30fps test video: ----------------------------------------------------------- ios webview ( in wechat )(quantiy:300) css : 55~60fps gsap : 25~40fps test video: ----------------------------------------------------------- smartisan U1 ------------------------------------------- chrome(quantiy:300) css : 5~10fps (Although the FPS value is very low, but the fact is looks smooth,see the video) gsap : 15~20fps (Is not so smooth) test video: ----------------------------------------------------------- android webview ( in wechat )(quantiy:100) css : 60~65fps gsap : 40~45fps test video: ----------------------------------------------------------- ASUS K00U ------------------------------------------- chrome(quantiy:200) css : 7~9fps (Although the FPS value is very low, but the fact is looks smooth,see the video) gsap : 15~25fps (Is not so smooth) test video: ----------------------------------------------------------- android webview ( in wechat )(quantiy:100) css : 65fps gsap : 13~25fps test video: ----------------------------------------------------------- The PS: I am a big fan of GSAP,but I have a serious performance problems on mobile devices of Android, I hope anyone who see this topic, if you have android devices, also can test, and replay to the test results。 Of course, I more hope that the official team can test the android devices, and optimize the performance issues on android devices,thanks!
-
I'm new to gsap. Starting to get into the code. The library looks great. When testing my animations, I noticed they looked a little different under firefox. Was using Elastic.easeOut and it was noticeably bouncier at the end under firefox. Was wondering if it's performance related. I found this greensock speed test page: https://greensock.com/js/speed.html. I selected the GSAP library. My results were as follows: Chrome (40.0.2214.111 m): ~90+fps - excellent IE (11.0.9600.17501): ~55-60fps - also extremely good FF (35.0.1): ~20-22fps - not so great My system is Win 7. I tried multiple times and the results were consistent. I have no idea if it's related to the perceivable differences in the elastic easing but the results for FF were surprisingly poor when compared to the two other browsers. I have pretty much the default settings for FF including hardware acceleration turned on. For kicks, I tried the same site on my Android phone: ~28-32fps - better than desktop FF. Do you see similar results with the latest version of FF? Is this a known issue with FF? Thanks, Peter
-
hello, thanks for this awesome GSAP i have one question, a simple code as below var tl = new TimelineLite(); TweenMax.set($a, {autoAlpha: 0, display: 'none', top: 100}); tl.staggerTo($a, 1, {autoAlpha: 1, top: 0, display: ''}, 0.2); tl.play(); staggerFrom seem better for my code but i cant get it work, i will try again late so now i set the $a property by TweenMax first. if i set the property by css file not by TweenMax, and then play with TimelineLite, will i get the nice performance from gsap too? e.g set translate, opacity, z-index, scale etc any different between set property from css / TweenMax? which one is better? sorry for my language skill, thanks so much
-
I am using GSAP along with a ScrollMagic plugin to time my animations using the user scroll. Everything works great on desktop, animations are smooth and look nice. But when I load the site on tablet and mobile issues start to show up. I have an iPad and a Galaxy S4, and the galaxy is performing much better than the iPad is. On scroll for the Galaxy there is a short jump at the start, past that the animations are a bit slow but work in general. When it comes to the iPad, the animations are nonexistant... on scroll everything locks up and moves for the scroll, then it seems to reload and moves everything to where they should be instantly. There is no tweening or easing happening and creates a very poor experience on tablet. Im looking for a way to improve performence on mobile / tablet and allow tweening and easing to happen at all on tablet. Thank you
- 11 replies
-
- animation
- responsive
-
(and 8 more)
Tagged with:
-
Hi, I am now testing my apps on 4k displays as these become more common. Using TweenLite: I am having an issue with the performance of a tween that occurs only when very high res displays are used. I am testing on 2560x1600 with the object in question spanning 2500px wide and 500px height, running on a core i7 high spec machine. The tween is simply a 0.5 second tween to alpha 0 and back again. The fade out is clearly running at around 4 to 6 frames per second. The object that is causing the performanc issue is a wood effect complex vector (as attached). With this layer removed from the animated object performance is perfect. I tried making the vector more simple and using optimise, with some very small improvement but nothng significant. In fact I tried making the vector 6X more complex and it was a little slower but not 6x as much. Anyone any ideas on how to improve this. Thanks Complex_vector.zip
- 2 replies
-
- performance
- display
- (and 4 more)
-
First of all let me thank you for your awesome loading features, what i mostly liked about them is that you can define loaders in an XML file, great job. Now to the important part. I just found out about Adobe Scout and decided to give it a try to tune my App and I found something quite weird that nearly doubled my memory use. The problem is that when i tried to decompress a loaded bitmapData with the getPixel(0,0) technique, two things used memory, Bitmap DisplayObjects and BitmapData, both used 20.480 KB. Why Bitmap DisplayObjects used memory? I thought that only BitmapData should have used memory, the Bitmap DisplayObjects was later garbage collected, but why is it being created in the first place.... So i tried using getPixel(0,0) on a clone of the bitmapData i loaded and Bitmap DisplayObjects never appeared. Is the Bitmap DisplayObjects memory being used by the ContentDisplay object that comes with the loader? If so, what can i do to prevent this from happening?
- 1 reply
-
- memory leak
- performance
-
(and 1 more)
Tagged with:
-
Back in the Flash days, animating a bitmap or sprite would yield better fps/performance than a movieclip. I'm curious if this translates to JavaScript as well. For example, do you get better performance animating an img directly vs animating a div that contains an img? Both anecdotal and technical replies would be greatly appreciated. Thanks!
-
I'm developing a slider with parallax effect, using TimelineMax. And it's joy ride with GSAP ! But, my intention was to deploy using node-webkit, and I'm getting quite inconsistent performance results. In the codepen I show just the basics, next and previous buttons and you should be able to swipe left and right. (Have to add much more, later, more content on each slide, probably dragging (with Draggable) and make it an infinite slider thing...) As for now, sometimes it just works beautifully, others, it's just a bit jerky, mostly at animations end, when slowing down. I've tried different easings, tried to thin the KBs of images, force3D: true, etc... Only thing is I get a better result, but still not allways smooth, if just open the page in chrome, instead of using node-webkit. I'm about to go back to Flash CC, AIR and Actionscript, (the animation code would virtually be the same) but I'd really like to do this in javascript and HTML5. wondering wether I'm getting hardware acceleration I tried chrome://gpu inside node-webkit, I get the same as just in chrome: Graphics Feature Status Canvas: Hardware accelerated Flash: Hardware accelerated Flash Stage3D: Hardware accelerated Flash Stage3D Baseline profile: Hardware accelerated Compositing: Hardware accelerated Rasterization: Software only, hardware acceleration unavailable Threaded Rasterization: Disabled Video Decode: Software only, hardware acceleration unavailable Video Encode: Hardware accelerated WebGL: Hardware accelerated Driver Bug Workaroundsclear_uniforms_before_first_program_use exit_on_context_lost texsubimage2d_faster_than_teximage2d Problems Detected Accelerated video decode interferes with GPU sandbox on certain AMD drivers: 298968 Disabled Features: accelerated_video_decode Additional GPU rasterization whitelist for field trial: 380694 Disabled Features: gpu_rasterization_field_trial Whitelist for using GPU rasterization for a broader set of content: 399306 Disabled Features: gpu_rasterization_expanded_heuristics GPU rasterization is blacklisted on non-Android: 362779 Disabled Features: gpu_rasterization Some drivers are unable to reset the D3D device in the GPU process sandbox Applied Workarounds: exit_on_context_lost TexSubImage2D() is faster for full uploads on ANGLE Applied Workarounds: texsubimage2d_faster_than_teximage2d Clear uniforms before first program use on all platforms: 124764, 349137 Applied Workarounds: clear_uniforms_before_first_program_use Threaded rasterization has not been enabled or is not supported by the current system. Disabled Features: threaded_rasterization It's a 16 GB RAM machine with a GTX 770 card, but the inconsistency has appeared almost identical on other machines with less resources, so I'm guessing it might not be a hardware issue ? Any ideas ?
- 2 replies
-
- performance
- parallax
-
(and 2 more)
Tagged with:
-
Hi there, I'm playing with the TweenMax API and I encounter some difficulties. I aim to animate a full svg. I use a basic Tween for test puprose TweenMax.to($('#' + 'front_side_down'), 1, { opacity: 1, display: 'inline' }) When the SVG does not contain much nodes, it runs smoothly and nicely. But when I hit more than 1000 groups node of svg path the animation got choppy. I wonder why it influence anything, as in any case we only target one element... Any help would be much appreciate ! Thanks ! P.S : I'm talking about a 3.5mo SVG file
-
Up to this point I have animated everything as a DOM element, but I always want to push the performance of my game more and more, so I have started to look closer at canvas. I am curious about what kind of performance gain I can expect from animating a cached javascript element vs an element on a canvas. Any resources, insights, or experiences on this topic would be greatly appreciated.
-
Hi, I'm developing a site that is getting results from twitter and showing one tweet at a time, it loads an iFrame of the tweet rendered by twitter via oEmbed. The tweet drops in to the center from 0 opacity to 1 then after a moment drops down out of the window fading out. The app is performing great with a few items but it seems to be chugging a little as that number grows. I know I could remove the older tweet items after they finish their tweens however the client wants to have this timeline running at a conference lasting 30 mins for each speaker, still not an issue til the request to be able to replay the 30 min timeline at a faster speed with timeScale so the speaker can view the audience reaction(it's also tweening a css gradient BG and playing sounds based on the hashtags(variety of feelings) of the active tweet being tweened). If I remove the items I'm a little concerned about playing back in this fast forward mode and being able to load the tweet iFrames again fast enough. Any ideas?
- 1 reply
-
- performance
- timeline
-
(and 1 more)
Tagged with:
-
Couple of days ago I discovered Greensock JS library. I am creating a web app with animations. So I decided to give it a try and I was surprised how smooth a movement can be. My first attempt to implement animation was jQuery animate and it was far away from smooth movement. After that I found jQuery CSS transit library which was much better than jQuery animate method, but there was still some jitter while animation. But Greensock beat all of them. I am getting very smooth movements. I understand difference between jQuery animate where object is being moved little by little until destination is reached and CSS transition where library tells the browser to move the object to particular position and browser can optimize the movement because it knows object's origin and destination. But how is this possible that Greensock has greater performance even over CSS transition? What is lying under it's performance?
-
I am attempting to animate opacities of several elements and experiencing some performance issues. Some preface... I'm using Snap.svg and have ported the RaphaelPlugin for Snap in my fork of GreenSock (https://github.com/anthonygreco/GreenSock-JS/blob/master/src/uncompressed/plugins/SnapPlugin.js) so generally speaking if anyone has experience with the RaphaelPlugin, any info you may have on the matter should be at least mostly relevant, though anyone with experience with GSAP may have just as valuable input. Now for the problem at hand. I have roughly 1500 different path elements on a page in which no more than 400+/- of them are animated at any one point and only animating their opacity via staggerTo shows the other simple animations choppy. The most interesting part is that the 400 or so path elements don't seem to be choppy, but the simple animation is. My first question is simple; I may have more afterward but for now.... are there any idiosyncrasies to staggerTo that I may not be aware of from a performance perspective? Eventually, I'll probably rebuild what I've done in a JSFiddle to get more specific circumstances available for assistance, but right now I'm more interested in the overall larger picture and any optimization guidelines anyone may have.
- 6 replies
-
- performance
- svg
-
(and 1 more)
Tagged with:
-
For example, I have a self-executing portion of code that creates all of the timelines and tweens I need, and then I run the .play() and .reverse() methods of the timelines in reaction to UI events. I have it stuck in my head (based on nothing in particular) that for some reason since I re-use the objects it will create no more new objects each time UI events trigger. Is this true? Am I giving up something by doing it this way and getting no performance gain? How can I performance test the difference in JS? Anyone know?
-
I recently started using GSAP for animating three.js as an alternative to https://github.com/sole/tween.js, commonly used for this. It made it really easy to do something like: make a cube spin and when it stops, wait until one of the faces are square (through a 90 degree rotation with repeat -1 switched on/off). However, I'm struggling with severe performance issues in tweening many objects at a time. I think this has to do with having to create a duplicate copy of the objects to store the tween data rather than just being able to directly tween object variables without having to write in onUpdate. This makes writing the tween a tad more tedious than tween.js, and it has been no easy task to convert from tween.js to GSAP. Once I finally did figure out how to do this, I found the performance was severely worse than using tween.js. I created an example modification of a three.js example which closely relates to the project I'm working on: Original, using tween.js: http://jsfiddle.net/justin_hackin/J3k9N/ (Tweening @ 292) Single variable for closure in loop, not working: http://jsfiddle.net/justin_hackin/dHLcg/ TweenMax demo: http://jsfiddle.net/justin_hackin/6bFJc/ (Tweening @ 298) I'm wondering, are these performance issues happening because each TweenMax closure is trying to store the whole object copy array ? I don't quite understand the deeper aspects of JS, excuse my ignorance. Am I doing something wrong here ? I really love these GSAP libraries so I hope I can make it work for the project I'm working on. If not, I really hope the developers will consider making the code more friendly to this kind of use. The project I'm working on might eventually be willing to invest in such a feature if it would take some efforts to implement, please let me know what could be possible. Thanks, ~Justin
-
Hello, I'm making a small 2D game and using (naturally) GSAP for the animation engine. So I'm Tweening a bullet by x,y and onUpdate I'm running collision detection to see if the bullet collides with any objects. However as the objects on the DOM increase onUpdate seems to be "skipping" some frames thus "lagging". Is there a better way to run somewhat complex code with TweenMax/Min? Maybe by listening on ticker? Or is onUpdate using requestAnimationFrame already? Thanks in advance!
-
Hello All, I am developing an app on android using phone gap. I am using timelinemax for animation. My animation is like this : one object is animating along with scroll animation. Animation works fine after scroll is completed. when both run simultaneously then object animation is poor. Is there any workaround for this ? Android Tested : 4.0 to 4.2 My second concern is that how we can achieve more smooth animation by force3D = TRUE or by Tweenmax.set(obj,{z:0.1}); ? Any help would be appreciated.
- 6 replies
-
- tweenmax
- timelinemax
-
(and 4 more)
Tagged with: