Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Dx802

  1. Thanks for the warm welcome & the interesting insights. Didn't expect such a fast reactions, hence the late reply. If I analyse correctly, our biggest enemy here is the reflow, which should be less relevant as its a fixed position non responsive animation. I don't understand why painting would be an issue here; If I change the curved line reveal to a linear one, performance goes up, although it are still the same amount of pixels to be drawn in a comparable timeframe, not ? I did some tests on both the CSS and the GSAP approach. CSS: To ensure the elements are rendered on a seperate layer, I added the following to all the divs - backface-visibility: hidden; - will-change: transform, opacity; /* or others*/ - position: fixed; The result can be found on http://codepen.io/Dx802/pen/LNJGJo It looks more performant, but still the GSAP seems to win GSAP : http://codepen.io/Dx802/pen/PNdZXz - Its not the exact same animation; I wasn't able to match the exact 3d transform and was not able do the curved line reveal - It looks like using the CSS 3d transform wasn't just transferable to GSAP. Any tool like http://ds-overdesign.com/transform/matrix3d.html available for GSAP ? - The curved line reveal, I'm a bit uncertain there how to get this working in GSAP Any good places to start looking ? Seems to be very good on framerates even on slower hardware; ofcourse the animation is only at half of the process
  2. Hey Guys, I'm pretty new into GSAP, but based on an advise of a friend I'm posting this question on this forum. I need a series of animation to run on a rather low end pc (intel atom - windows 10 - 2 gig ram). I used CSS3 animations as I assumed the hardware acceleration was the best there. The result can be found on (https://jsfiddle.net/p0deznot/ -- http://codepen.io/Dx802/pen/RaJRaE) Its made for a fullHD screen (no need for responsiveness). The problem is that the performance is not as good as hoped, especially on the curved line reveal. Is it possible to convert these animations to GSAP ? If so, where do I start .... The animations are pretty simple - Container flips in (0% opacity to 100% 3d transform) - Content of container is revealed (curved line reveal) - Content is animated a bit (opacity, move, ...) Any chance anybody hint me if performance could be better with GSAP ? Or point me in the right direction to try these same effects in GSAP ? Many thanks