Search the Community

Hi guys, I am looking into building an adverting system that would use GS at it's core. I am going to use bottom end android tables as display units and I currently find that animations are jerking due to the low spec CPUs. I know that there is some GPU support in CSS3 but I am not sure how practical or applicable this is to the mobile platform. Having said that I know that most of these low spec tablets do have quite good GPU's for video playback up to 1080p 30fps and I am only looking for 720p 30-60fps. So what I am looking to do is use the 'save to image' function of canvas and either post to the server or use something like PhantomJS in Node to render the frames to a folder then use ffmpeg to stitch them into mp4s at the desired frame rate. This would also allow a host of other effect to be applied programmatically. I know that GS plays nice with KineticJS for canvas rendering and I have altered the codepen example (http://codepen.io/GreenSock/pen/xaDAG) to use the tick event listener as a test. I am however worried that this is not synchronous and would not post to the server fast enough to capture all the frames if run clientside. Should I rather use seek to jump a frame forward at a time and then render the canvas out. Does seek work with the KineticJS plugin? Many thanks in advance, any other approaches welcome.

Hi there guys! can you please help me I am struggling how to code the animation for it properly with my 4 separated frames images. I want to animate it smoothly and nicely like normal cyclist. Here's my code for animating 4 framed images. JavaScript: window.onload = init; function init() { TweenMax.set("#two, #three, #four", {alpha: 0}); animationOne(); } function animationOne() { TweenMax.to("#one", 0, {alpha: 0, delay: 1}); TweenMax.to("#two", 0, {alpha: 1, delay: 1}); TweenMax.to("#two", 0, {alpha: 0, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 1, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 0, delay: 1.2}); TweenMax.to("#four", 0, {alpha: 1, delay: 1.2}); TweenMax.set("#one", {alpha: 1, delay: 1.3}); TweenMax.set("#two, #three, #four", {alpha: 0, delay: 1.3, onComplete: animationTwo}); } function animationTwo() { TweenMax.to("#one", 0, {alpha: 0, delay: 1}); TweenMax.to("#two", 0, {alpha: 1, delay: 1}); TweenMax.to("#two", 0, {alpha: 0, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 1, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 0, delay: 1.2}); TweenMax.to("#four", 0, {alpha: 1, delay: 1.2}); } HTML: <div id="cyclist"> <img id="one" src="https://s32.postimg.org/inysw8m2d/wiggins_01.png"/> <img id="two" src="https://s32.postimg.org/ip8qpnnw5/wiggins_02.png"/> <img id="three" src="https://s32.postimg.org/c0279n2k5/wiggins_03.png"/> <img id="four" src="https://s32.postimg.org/j4k0io9th/wiggins_04.png"/> </div> CSS: img { position: absolute; left: 10px; top: 10px; bottom: 0; right: 0; } For full editing please go here: http://codepen.io/Waren_Gonzaga/pen/PzEzag Kindly fork my pen and please revise. It really helps me to figure out how to make a code for this animation.