Search the Community

Showing results for tags 'performance'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 65 results

  1. Hi sorry if this has been asked already it's kind of a hard question to search for. I plan to have a pixi js scene of images for my website background where I'm often tweening images in and out of the scene, but in some scenarios tweening already offscreen images offscreen again so those tweens don't change any values. Do these unnecessary tweens affect performance? Is it better for performance to have conditional checks instead of 'no change in value' tweens? I don't think I will have performance issues either way but I wonder if gsap already has something built-in that automatically optimizes 'no change tweens' so that they don't have any affect on performance even if there are a large amount of them triggered all at the same time. Thanks.
  2. Techassi

    Poor mobile performance

    Hi, I am working on a project for university. I am using some animations on my site and on my desktop machine they all work fine and are smooth. But on my smartphone that's a whole different story. TweenMax.to(document.querySelector('.logo'), 0.4, {opacity: '0', ease: easeF}); TweenMax.to(elem.querySelector('.project_bg'), 0.4, {height: '40%', ease: easeF}); TweenMax.to(elem.querySelector('.project_shade'), 0.4, {height: '40%', ease: easeF}); TweenMax.to(elem.querySelector('.project_text'), 0.4, {top: '20%', ease: easeF}); TweenMax.to(elem.querySelector('.project_desc'), 0.4, {opacity: '0', ease: easeF}); TweenMax.to(document.querySelector('.project_total'), 0.4, {opacity: '0', ease: easeF}); TweenMax.to(document.querySelector('.close_button'), 0.4, {opacity: '1', ease: easeF}); TweenMax.to(elem.querySelector('.content'), 0.4, {opacity: '1', height: 'auto', y: window.innerHeight * 0.3, ease: easeF}); These animations in particular are very slow and stuttering on mobile devices. I don't know if these animations can be optimized but if yes it would help me alot if someone can explain me how. My easing function looks like this: easeF = new Ease(BezierEasing(.37,.01,0,.98)); Do I have to reduce the amount of animations or do I have to use a timeline (which I didn't at all until now)? URL: https://sftp.hs-furtwangen.de/~lautensc/gis/ Cheers and best regards!
  3. Hello, I'm trying to code a flickering animation, where a canvas and an image flicker on and off intermittently. I'm trying to get the timing of the flickering as accurate as possible: the canvas (multicoloured "mondrian" in the codepen) should be presented for 67 ms (4 frames at 60Hz) and the image ("stimulus" in the codepen) for 34ms (2 frames at 60Hz). I coded it using only autoalpha, drawing everything before the animation starts. The presentation times are recorded into an object called "vbl" in the codepen. On my macbook with chrome, animation works almost perfectly. But testing this animation on a few different setups (weaker windows machines, all chrome or firefox), I'm getting a considerable amount of mistiming: Especially in the first flickers in the sequence. Both the canvas and the image might be presented for too short or too long (0-100ms in range, though mean and median are close to wanted values). As timing is the most important issue for me, I am willing to use almost any trick to get it better. Any ideas? I'm fine with long (~0.7 second) loading times. Many thanks, Yaniv
  4. kaliel

    Over 400 svg elements performance

    Hello, I made a little animation with gsap, and i really like how easy it is. But while it look great on y computer (gtx 1080), my coworker has heavy performance issues (imac 2007). Be both use the same browser (chrome), and he has better performances with last firefox build. I saw some people switching to canvas/paperjs, but i look like painfull. I'd like to know if the performance issue is about the number of animated elements (~432) or the way i build the timelinemax (in loop). Here is the pen : https://codepen.io/kaliel/full/XVbGvY/ Thanks
  5. zadvorski

    Choppy animations on first run only

    In this demo I'm noticing a significant performance hit / choppiness when the animation first runs (click one one boxes). After that, every subsequent animation runs much smoother. I've noticed similar behavior in other projects when I'm manipulating the dom using tween max. Any ideas what can cause this / how to make it go away? Running this on a new macbook. Thanks.
  6. Zuriel

    FastDOM

    Can you tell me anything about FastDOM and if GSAP uses something similar or if you have ever heard of it, etc? I personally haven't heard anything about it until recently when someone recommended it to prevent some layout thrashing (something you see commonly with parallax animation where you are trying to move something based on scroll position, etc, etc). Whatever it is doing or whatever it does, it seems to boost performance. Do you know anything more about the techniques it uses and does GSAP do something similar? different? better? or are there some drawbacks to the process that FastDOM is using? etc. https://github.com/wilsonpage/fastdom
  7. Johan ⚡️ Nerdmanship

    CPU test like Modernizr?

    Designing by screen size and available features is common practice, but what about hardware? I wanna do something like this: if (powerfulCPU) { // Use a crazy amount of blur } else { // Skip everything fancy but still deliver a killer animation } Is there a way to perform a quick CPU test in the loading sequence of a website in a similar manner that Modernizr does feature testing? Or do you have any other thoughts on how to achieve something similar?
  8. We are building a quite long storyboard which consists of about 12 scenes. Basically, you scroll down the page and things happen: SVG animations, curtain div's coming down and up, pinned screens etc. We have a LOT of TimelineMax functions and we are starting to experience some performance issues, most likely because all the animations are still running even when not on the screen. Is there a way to stop/start functions to optimise performance? If you guys have any advice / links, please let me know.
  9. awagner

    Performance issues: Page transition

    Hi everyone! Would love to get your opinion on what might be causing performance bottlenecks in a page transition animation I'm working on. Live WIP site is here: http://adamwagner.io/ Click on the first image below the Lorem Ipsum "about me" section. The image is of a band playing. Notice the low frame rate as the image animates to the hero position, a circular splash element hides the page, and then the route changes to the project detail page. Click the "back" text at bottom left below the hero image. This will take you back to the home page with a reverse animation. NOTE: only works in Chrome because I'm using webm for the image I refer to above. Will fix for prod of course. Performance increases after multiple runs, but typically first run performance is very janky. I would love some tips - even if they involve a totally different approach. Thank you so much in advance! I've attempted to use best practices. For instance, I clone the image before animating, making it fixed position to avoid reflow. GSAP delightfully takes care of optimizing position tweens, but I also need to animate height and width. I also need to set autoRound: false, because I need perfect overlap with the real hero image once the transitory clone is removed. Here's the code: import React from 'react' import { injectGlobal, styled } from "styled-components"; import {TweenMax, Bezier, TimelineMax, Power3, Sine} from "gsap"; import store from 'store' // import ripple from '../utils/splash' let globalSpeed = 1; export default class ProjectImage extends React.Component { getDuration(start, end) { let pixelsPerSecond = 700; let duration = Math.abs((end - start) / pixelsPerSecond); // set min value of .2 duration = duration < .25 ? .25 : duration // set max value of .5 duration = duration > .5 ? .5 : duration return duration * globalSpeed; } onImageClick = (e) => { // get the first element - the <body> let body = document.body // get window width minus scrollbar let w = body.clientWidth let h = body.clientHeight // get clicked project element and position data let el_original = this.refs.project_image let {top, left, width, height} = el_original.getBoundingClientRect(); // clone it let el = el_original.cloneNode() // place element on top of original // find a cleaner way to copy these over let elStyles = ` cursor: pointer; width: 100%; height: 40vw; will-change: width, transform; background-image: url(${this.props.image}); background-position: center center; background-size: cover; pointer-events: none; ` el.style.cssText = elStyles + `z-index:200; position: fixed; top:${top}px; left:${left}px; width:${width}px; height:${height}px;` body.append(el) // get mouse click coordinates let {clientY, clientX} = e; // save original image coords for "going back" transition store.set('lastClickedProject', {top, left, width, height}) // create and append splash circle let splash = document.createElement('div') splash.style = ` border-radius:100%; width: 50px; height: 50px; background: ${this.props.pageColor}; position: fixed; top:${clientY}px; left:${clientX}px; z-index:100; opacity: 0.75; will-change: transform; ` body.append(splash) // animate splash TweenMax.to(splash, (0.6 * globalSpeed), {scale:80, opacity:1, transformOrigin: "50% 15%"}, Sine.easeIn); // animate image to the hero position TweenMax.to(el, this.getDuration(0, top), {bezier: {curviness:0.25, values:[ {x:0, y:0, width:width, height: height}, {x:-left, y:-(top/2.5), width: w, height: height+25}, {x:-left, y:-top, width: w, height: height+100}, ]}, ease:Power3.easeOut, autoRound:false}); // redirect to detail page setTimeout(() => { el.remove() splash.remove() window.___navigateTo(this.props.path) }, (this.getDuration(0,top)*1000)) } render() { let style = { cursor:'pointer', width:'100%', height:'40vw', willChange:'width, transform', backgroundImage:`url(${this.props.image})`, backgroundPosition:'center', backgroundSize:'cover', } return ( <div onClick={this.onImageClick} style={style} ref="project_image"> </div> ) } }
  10. icdindia

    Performance Issues on Mobile

    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.
  11. 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
  12. mathis

    Stuttering Animations

    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!
  13. 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
  14. 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.
  15. 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?
  16. 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!
  17. angecles

    Animating tens of thousands of tweens

    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!
  18. FAKS

    GSAP vs CSS

    Hi everyone, I wanted to reply this post -> http://greensock.com/css-performance But I don't know why I can't leave a message, even if I'm logged in... So I'll share my opinion here I'm working on a game webapp (HTML5/CSS/JS), running on desktop browsers, smartphone, tablet and also into a native IOS app (webview) built with Cordova. In this webapp, like in every games, there is of course transitions between pages, popup and dialog apparition, drag and drop functions, etc... there is also transitions/animations on elements such as div, svg, png from the DOM during the game. During my development process, I was looking for the best way to animate those elements to get the best visual effect during transitions, tween, bouncing effect, apparition effect, etc. I was focusing on this idea "the user should NOT see the difference between my webapp and a real native app". I wanted every transitions/animations look smooth and great. I know GSAP since 2010 so this was my first idea. GSAP is really the most convenient JS library that I know to animate. I have nothing to say on that point. But, during my test on different devices, I noticed that large transitions such as fade on the entire screen, dialog and popup bouncing, opacity apparition was laggy on smartphone and tablet (on desktop browser it was great). So I did some research and test. After reading lot of post about CSS vs JS I tried by myself to recode all those laggy transitions only with CSS rules. The result was surprising because those new transitions was great, no lag, very fluid, better than with GSAP. Then I found this article -> http://greensock.com/css-performance I tried the CodePen linked -> http://codepen.io/GreenSock/full/2a53bbbcd47df627f25ed1b74beb407d/ On my laptop I can't see any difference (I'm not talking about pure performance and FPS benchmark, I'm only talking about visual feeling, looking for something fluid, without lag). But did you try this CodePen on tablet and smartphone? The difference is huge. CSS transitions look really better, fluid without any lag during transition. I did test on iPad Pro, iPad Air, iPad 3, iPhone 5, iPhone 6... Each times I set the Quantity at 2000 and I can see a huge difference. CSS looks much better. Of course coding complex animation with pure CSS rules is awful, so if I could get the same result with GSAP I'll use it for sure. And you guys? Did you encountered the same issue with smartphone and tablet? Any opinion or comment are welcome! Thanks!
  19. niceoutput

    Sloppy and chuncky animations on mobile

    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.
  20. 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.
  21. mis8680

    Improve SVG animation performance.

    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.
  22. micahhauge

    PLEASE HELP: Performance issue.

    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
  23. isseto

    Performance on Large & Complex SVG

    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!!
  24. 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 ?