Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'performance'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hi, I am aware my question is not complete but I need help to help you help me Do let me know what more I can provide to find a final solution. We have created an entire website using GreenSock animation. There is one master timeline. Other timelines only perform certain animations. We are using TweenMax along with eraser.js, howler.js, slick.js, splittext.js, jquery-ui.js. The issues is that the website keeps on crashing on mobile devices, including iPhone 6s plus. This is because website is alot RAM heavy and does not work well on any device which has less ram. It includes iPhones, iPads, most android smartphones. It works flawlessly on devices with good ram (OnePlus3). I have used all browsers on the phones on which the website crashed. It is impossible to find the issue as I do not get any error log on crash. I have reach the conclusion that the issue is RAM based on the observation that after restarting the phone the website works fine for a few minutes before crashing again. I have tried to debug it using chrome inspect element but have not been able to reach any conclusion. Following are the elements that I have looked at. - svg animation, I only have 1 single svg animation in the beginning of the website, - dom elements. The number of dom elements was too much because of splittext which is not resolved, - using x and y instead of left and top for better performance, - using scale in only one animation - using autoAlpha everywhere instead of opacity I kindly request you to provide me more details on how can I debug my website. Following is the link : www.icdlabs.in/final If you require any specific part of the code, I will post it here, please do let me know. Thanks in advance.
  2. Roddy

    Phone Performance

    Hi Guys, I've built this animation of a pinata exploding. It looks great on desktop, but really, really sluggish on IPhone and IPad. Does anyone have any tips on improving performance? Is it my code, or just too many tweens going on at once? Thank you, Dave Rodman
  3. 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!
  4. I find it easier sometimes to create two timelines rather then one for complex animations. I know I can make one timeline out of it, but my head is spinning as it is. Wondering if there is a performance hit of any sort using two timeline instead of one. I will have two object moving at once regardless. Thanks
  5. Hello, I have 9 svgs takes fullpage at each, each svg contains several elements, runs about 6 seconds to complete. On computer everything works great, but on mobile it starts to slow down , even on iPad pro 12.9. (so slow). My site has 9 svgs, each takes fullpage, you can scroll to see different animation. Here is my site: https://rockmandash.github.io/InteractiveInfographic/ If you open the url on computer, it will load pc version svg and code, otherwise it will load mobile version svg and code XD. Here is a svg animation code look like: tlScene02.from($svg02topLine, 0.6, topLineParameter, 0.5) .from($svg02bottomLine, 0.6, bottomLineParameter, 0.5) .from($svg02Heading, 0.3, HeadingParameter, 0.7) .from($svg02subHeading, 0.4, subHeadingParameter, 0.8) .from($svg02Bg, 0.4, { y: -100, opacity: 0 }, 0.9) .from($svg02Door, 0.4, { y: -100, opacity: 0 }, 1) //---------------------------港澳 .to($svg02PeopleHongKongAndMacao, 0.7, { y: 190, opacity: 1, ease: Power1.easeIn }, 1.4) .to($svg02PeopleHongKongAndMacao, 0.7, { x: -90, ease: Power1.easeOut }, 2.1) .from($svg02BubbleHongKongAndMacao, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 2.8) .from($svg02LineHongKongAndMacao, 0.1, { y: 3, opacity: 0 }, 2.9) .from($svg02TextHongKongAndMacao, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3) .from($svg02FlagHongKong, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.1) .from($svg02FlagMacao, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.2) .call(animateNumberIncreasing, [$svg02NumberHongKongAndMacao, 14.5, 1, 'percent']) //14.5 % .from($svg02NumberHongKongAndMacao, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3.5) //---------------------------中國 .to($svg02PeopleChina, 0.7, { y: 70, opacity: 1, ease: Power1.easeIn }, 1.9) .to($svg02PeopleChina, 0.7, { x: -140, ease: Power1.easeOut }, 2.6) .from($svg02BubbleChina, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.3) .from($svg02LineChina, 0.1, { y: 3, opacity: 0 }, 3.4) .from($svg02TextChina, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3.5) .from($svg02FlagChina, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.6) .call(animateNumberIncreasing, [$svg02NumberChina, 40.1, 1, 'percent']) //40.1 % .from($svg02NumberChina, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3.9) //---------------------------日本 .to($svg02PeopleJapan, 0.7, { y: 80, opacity: 1, ease: Power1.easeIn }, 2.4) .to($svg02PeopleJapan, 0.7, { x: 130, ease: Power1.easeOut }, 3.1) .from($svg02BubbleJapan, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.8) .from($svg02LineJapan, 0.1, { y: 3, opacity: 0 }, 3.9) .from($svg02TextJapan, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 4) .from($svg02FlagJapan, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.1) .call(animateNumberIncreasing, [$svg02NumberJapan, 15.6, 1, 'percent']) //15.6 % .from($svg02NumberJapan, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 4.4) //---------------------------東南亞 .to($svg02PeopleSoutheastAsia, 0.7, { y: 200, opacity: 1, ease: Power1.easeIn }, 2.9) .to($svg02PeopleSoutheastAsia, 0.7, { x: 115, ease: Power1.easeOut }, 3.6) .from($svg02BubbleSoutheastAsia, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.3) .from($svg02LineSoutheastAsia, 0.1, { y: 3, opacity: 0 }, 4.4) .from($svg02TextSoutheastAsia, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 4.5) .from($svg02FlagSingapore, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.6) .from($svg02FlagThai, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.7) .from($svg02FlagMalaysia, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.8) .from($svg02FlagPhilippines, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.9) .from($svg02FlagVietnam, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 5) .call(animateNumberIncreasing, [$svg02NumberSoutheastAsia, 13.7, 1, 'percent']) //13.7 % .from($svg02NumberSoutheastAsia, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 5.3) .from($svg02BottomText, 0.4, BottomTextParameter, 5.2); You can see my site is almost complete, but I really don't like the low speed on mobile. All the animation done inside svg so I think I probably can not cache them as png or wrap them as div? So I was thinking moving to canvas will get better? I haven't try it yet. Please help, thank you! update: I think canvas is much more worse, so my problem stick to svg mobile performance issues.
  6. Hi, I try to animate a lot of canvas shapes created with Easeljs and animate with timelineMax. The animation is too slow, the demo is here http://codepen.io/nicmitch/pen/jyKPqy . I think I do something wrong but I do no what. Any suggestion?
  7. staging.mkeballet.org Hello GSAP crew. I've got a site here that does full page xPercent tweens(inspired by the answer to my previous question - thanks Blake), coupled with drawing an SVG path, and a few other things. On mouse wheel, a function called goNext() or goPrev() fires. Within those functions are the individual functions that kick off the parts of the cover transition - drawing the circle forward/backward, transforming the text in and out, and sliding the cover xPercent in and out. Everything is going great, on at least the user facing side, even on retina screens. Except when you make the screen larger than an average laptop. On larger screens, the cover images are of course larger. And when they "clip" in and out, the red circle path chugs as it draws. If you inspect the sources, you'll find the JS file in js/custom/mkeballet.js. I've minified the irrelevant sections, and tried to comment what the relevant hunks do. The goNext() function is where things come together for this example. So in summary, my question is do you see anything about the way I'm organizing/writing my GSAP code that is counter-intuitive, or am I just trying to do too much that jank is inevitable? I've been here https://developers.google.com/web/tools/chrome-devtools/memory-problems/?hl=en But I'm not that good at memory monitoring yet so I haven't been able to discern anything useful yet. Thank you!
  8. Hi All.. I am new to GSAP and investigating whether GSAP is the right tool/platform for a PoC I am building (vs. using Anime.js, Pixi.js, D3.js, other). Here is the use case: Initialize a rectangular canvas with a variable but large number of tweens (i.e. 30,000). All of the tweens begin on the left edge of the canvas and are distributed vertically from top to bottom, evenly. GSAP will animate the tweens along a fixed path from the left edge of the canvas to the right edge. The path contains multiple fixed segments (i.e. 9 segments) that each of the tweens will follow. Each of the tweens will have different durations for each of those segments before finishing at the right edge of the canvas. The tweens can certainly be very small and the canvas can grow tall enough to accommodate all of the 30K tweens (top to bottom) You can assuming the data for each tween is available (can be all hardcoded for now but will eventually be retrieved via Web Service API) I created the following codepen (http://codepen.io/angecles/pen/apopOm) which shows the concept in action with just 10 tweens. Any support from this group would be appreciated!
  9. Guys, I am using gsap for ui animations and when i test them in mobile hardware, they seems too sloppy and not fluid as they look in desktop. The animation is inside this method: initChatOpenCloseAnimation: function() { this.animationCloseTimeline = new TimelineLite({ paused: true, onComplete: _.bind(this.focusComposer, this) }); var container = $(this.options.launcherContainerElement); var chatBotContainer = $(this.options.chatbotContainerElement); this.animationCloseTimeline .to(container, .3, {scale: 0, opacity: 0}, 0) .to(chatBotContainer, 1, {opacity: 1, y: 0, visibility: 'visible'}, 0); }, Do you have any clue of what i'm doing wrong? Thanks in advance.
  10. Hi all, first of all congrats on the great animation engine. I am using GreenSock, mainly TimelineMax and TweenMax for timing and tweening positions, rotations etc. of my WebGL / ThreeJS scene objects. The resulting format is always an interactive (Apple) iBook for children - basically a compressed website that runs with a WebKit standard similar to the one used in Safari Mobile. Performance was never a real issue until a colleague recently discovered that certain animations freeze or behave different (jumpy, stuttery) after running for several minutes (about 10-15 minutes dependent on the device) while others still run smoothly. It occurs only on the mobile device and only on generations < iPhone 6. What helps is to throttle the TweenMax ticker fps down to 30, but of course this doesn't look as smooth. I also tried playing with the lagSmoothing - with no success. Do you have an idea where these freezes come from? Since they occur only after a certain amount of time.. could it be that the JS execution stack suddenly becomes too big because the device isn't really capable of doing 60fps? Turning RAF on and of also didn't change much. Thanks for any hints or input.
  11. Hello, I've created a SVG animation with snapSVG + Greensock but I am not happy with the performance. (lagging and etc.) I would like to have any opinion for better performance. Here is the URL. Thanks in advance. Please leave a comment if you need more details.
  12. Hey guys, I just started using GSAP and so far I am very impressed. I am running into some performance issues though, so I could really use some help! I am working on creating a web application that is kind of like a guitar hero for piano. I need the application to be able to animate a bunch of rectangles downward at a constant rate (each rectangle represents a note in a song). I am running into some performance issues though, since a song can contain thousands of individual notes. I have created a codepen that demonstrates what I am talking about. There is a stutter once and a while that I cannot stand. Here is a link to the codepen http://codepen.io/MicahHauge/pen/EyJjGA?editors=0011 Let me know if you see a better way of doing this that will prevent the stutter. Thanks, Micah Hauge
  13. Hi everyone! I'm planning on making a Christmas project which would require many elements being animated on a fullscreen illustration. So imagine 100-200+ little animations moving repeatedly on a fullscreen page, along with music running. You could think of Google's SantaTracker as an example - Website and Github. I dabbled with canvas for a bit, but animating proved to be a lot more complex than with simple SVG and Greensock. and attempted to bring in SVGs in Paper.JS as well, to merge the gap between SVGs and canvas, but I kept running into difficulty exporting SVG paths to be animated. --> If you have experience with SVG in Paper.JS, I'd love to hear about your experiences! I didn't really like canvas to start with anyway... (I'm just not familiar with it enough). So I'm thinking of sticking to pure inline SVG and Greensock animation, since I like the simplicity yet high quality vector aspect of them. The issue is I have kept hearing of SVG performance issues due to the DOM (where canvas performs much better in comparison). I have done tests with heavier illustrations imported from Illustrator, where 100+ elements are animated and looped; other than using a lot CPU, performance on desktops/laptops seemed fine (macbooks and such); there was a bit of lag on mobile devices, but subtle enough to be able to get away with it. I tried a Nexus 6P which is probably a good phone though... I ran tests on several websites (with Google's PageSpeed's tool notably). It scored between 50-60%, which isn't ideal. Since I am new to development, and know little about performance testing, I wanted to ask the Greensock community your thoughts on what I should maybe look out for and for best practices. Or if you have any advice on how to go about this. I have though of importing static components as PNGs or JPEGs instead of SVG, would that help with the performance or would it do the opposite? Think background elements for example. I have thought of using the <use> tag to duplicate existing SVG code to lighten inline SVG-load. But I have read that doing that actually is detrimental to performance. Has anyone had that experience? Looking forward to hearing your thoughts. Thanks!!
  14. Hello, First thanks for this nice library and fine the documentation you produced. I am working on a 2D SVG game built with react.js. Why react? Because its something I have already used and know and also because react.js is the hot lib nowadays... Turn out that I needed a solution to animate my SVG, I first tried plain CSS animation but the result weren't the same in different browser or platforms so I spent some time to look for a more robust solution and I end up going for GSAP. I quickly found out that GSAP and React aren't the best friend but things could be worked out, after reading forum I tried react-gsap-enhancer but well It didn't solve my issues. One of my goals was to have some SVG element animation in a loop inside different components and containers all getting their props from redux store. What happened is that loop were working fine at first but at some point after some rendering due to game activity loop animation stopped definitely... , I solved some of those issues by creating a react component (not stateless) for each svg I wanted to animate, using ref callback to get the element and starting the animation when componentDidMount() and preventing the component the rerender using shouldComponentUpdate(){return false} in order to prevent react from rerendering the component on every tick of a timer for example. So I thought I found a solution, I got my simple animation loop going in background only tweening 1 or 2 attribute like scale, a total of 5+ animation loop. Thats when I started to realized that the app got slower and checking the CPU usage it was at best around 140 just in idle mode (only open the web page), i removed all loop and it was back to 0 in idle mode. Thus here I come asking for help..., I do need animations for the game... I was about to go premium so I could add even more animation like particles and text animation... but now I do not know what I can do to prevent animation from killing players CPU also the game main target will be mobile phone... Is there anyway to hire a GSAP expert to look into those issues ? (please note its an indie game not so much $) Has anyone managed to make react and GSAP play well together to animate a bit more than just a svg rectangle or circle... but complex SVG with hundreds of paths ?
  15. Hi GSAP Friends, Question/Observation/Bug: Working on a DrawSVG animation and was having some huge performance issues on iOS mobile. It turns out that adding a size directly to the SVG element was causing the issue (adding a size to a div wrapper helped eliminate the issue). Size on SVG pen (awful on iOS): http://codepen.io/ryan_labar/pen/wWqGZk Size on div wrapper pen (much better on iOS): http://codepen.io/ryan_labar/pen/mErPEK Any reason for this issue (am I doing something wrong)? Not needing to wrap an SVG in a div would really be idea. Is it a GSAP bug, or the fault of the browser (or both)? Thanks! **UPDATE** even with the div wrapper, performance isn't great on mobile, what should I do? From my understanding, resizing my SVG's viewbox/internals may help, but IDK if that will eliminate the problem, it's not exactly a huge svg file--size or otherwise
  16. Hello, Animation which I try to do, works well with computers or iPhone, but if it fires on Android it can munch, unfortunately, is not smooth. Maybe someone is able to help me in what I was doing wrong and how to improve? The code is a mess, but this is the first time I try to move animations from CSS to JS. The alpha version for phones was not very smooth and able to "trim". After using GSAP is much better, but it seems to me that it might be better. In addition, some questions (GSAP, JS, CSS): 1) The problem with the grid. I can not set the width (50%) plus a margin? The elements are in absolute position, otherwise when opening the remaining contents can jump. If I use the width: calc () animation can behave strangely. I tried to change position relative to the absolute (in animation), but without success. In the version of the tablet / desktop grid of 100% is replaced by 50% in 2 rows. 2) FadeOut flashes. I'm not sure what causes this? It seemed to me that zIndex, but probably not? 3) I do not know how to get 100% of the width div before animation? now the value entered is rigidly spoil responsiveness (width: '375.5px' or width '457.5px') 4) Literature, which will allow me to expand my knowledge? I know that's a lot, but maybe someone will help me? Sorry for bad english. Regards Links: http://codepen.io/Ard/pen/rLmRwK http://codepen.io/Ard/full/rLmRwK/
  17. Hello invaluable mods and heroes! In any little project or exploration I do, I try to learn something about performance. Sometimes I need to scrap an interesting technique simply because I can't use it with an ok frame rate. Such as this one: http://codepen.io/stromqvist/pen/grNJwR Here's another one with an ok frame rate: http://codepen.io/stromqvist/pen/bpPyNY In this case specifically – It made me thinking... Somewhere in between those two explorations, my computer starts to breathe heavily. There's probably some very demanding computations going on. Obviously, that's something that I wish to avoid. I'm not too strong on the javascript side, but something tells me there ought to be a way to do this computation once and then just repeat it, since the animation loops identically every time. Is something like this doable? In general – I don't know much about the heavy load on the CPU (and possibly GPU) that different GSAP animations can invoke. Don't know much about memory leaks, caching and similar computer science stuff, but I do come across it in some articles I read, and as a Js novice, I figure I'm making all the typical mistakes in the book. I'd love any thoughts and advice relating to GSAP and performance! Any reading tips and most of all any codepen examples on how to apply GSAP in smart ways! I understand that my question is broad. I would narrow it down if I knew how. Please share any thought that comes to mind. I just wanna move a little bit forward from here. Thanks for reading and taking your time! Peace, love & GSAP!
  18. Hello Carl, Jonathan & all GSAP crew. First of all I wanna tell you HUGE THANKS for your awesome library. GSAP is the best one for web animation. W3C should add it for standarts of HTML5 or HTML6 =) Now about my strange issue. For my project i used scrollTo plugin & TweenMax.to className. Animation works fine when you click once or twice on image. But if you click a few more times animation starts glitching. And few more times & browser hangs off. I have 10 images on page & when you click on every image to expand it animation starts glitching too. Maybe it's problem with logic of my code or something else. I created a small codepen demo to show you my problem. Please help me to solve it.
  19. I'm working on a digital signage system's content editor interface, which produces HTML5 pages. I've recently replaced the animation engine of these generated pages from pure CSS3 to GSAP and I'm experiencing some cases when the content animation has strong lag and freezes on our android devices, while on Windows/latest Chrome it runs well. I also tested some GSAP codepen demos on the android devices, and those run well, so I think I'm doing something wrong here, and would like to get some help. One of the devices I tested on (possibly the strongest hardware): http://www.gearbest.com/tv-box-mini-pc/pp_282317.html The example page: https://storage.googleapis.com/content.myshopdisplay.com/193/1377/8401/index.html About the code in the page: The page has a transform scale applied to stretch the content to full screen (this is not animated). The page first moves in letters one-by-one by animating the top and left properties, to make the word EURONICS. This runs laggy but still ok on android. After that a big background picture fades in by opacity animation, then 4 stars also appear on the right side by opacity animatin in a delayed sequence. The strongest lag happen when the big background picture fades in. It takes about 1 second on PC to animate that, and on android it takes about 30-60 seconds. Each page element has their custom CSS values in the inline style attribute. The animatin timelines are generated at the start of the page: I create a timeline for each element new TimelineMax({repeat: repeatAnimation, repeatDelay: 0, paused: true, smoothChildTiming: true}); Then I iterate over the style properties that should be animated (not all on an element's style attribute, I store the animated properties in a separate container), I create a timeline for each of these, this constructor function gets no arguments. After that I iterate over the time positions I stored. If this is the first value at position 0, I use the set() function: propertyTimeline.set(targetElement, valueObject, 0); If it's not the 0 position I calculate the exact duration of the tween and add it to the timeline with the to() function: propertyTimeline.to(targetElement, duration, valueObject); When all values processed for a property I add the property timeline to the element's timeline at position 0. The element's timeline contains only these property timelines. When this is done to all elements I iterate over all of the element timelines and call play(0) on them. I do not add the element timelines to a main timeline because they can have different length, and they can repeat, and they need the ability to restart at different times. It's understandable that too many effects can cause lag, but this page is not too effect-heavy in my opinion, so I'm clueless why is it so laggy. It is also very inconvenient that this lag actually extends the full duration of the animation, while with CSS iirc it only skipped frames when it was too laggy, but It finished the animation at the desired time (this is important for our system because these pages are being played one after one, and the pages change at a fixed time) What could be wrong here? Thanks in advance for your help! Roland
  20. 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?
  21. 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.
  22. Is TweenLite.to(curSlide, 0.5, {left:"-100%"}); slower than TweenLite.to(curSlide, 0.5, {x:"-500px"}); ?
  23. 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
  24. 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!
×