Search the Community
Showing results for tags 'gif'.
Found 4 results
-
I'm working on a project where we are creating a tool as a sort of helper app that we can use to create an animation using HTML5/JS GSAP (not Flash version) and then export the animation with transparency for use on the web as a standalone file such as animated GIF, MOV or MP4 as a transparent layer in a video editing program. The animation tool will focus on the goodies from the DrawSVG, MorphSVG and SplitText plugins. So, obviously we would chain together a bunch of GSAP scripts and then try to capture the completed animation playing inside a specific container using some sort of rendering process that gets converted into the above mentioned filetypes. Does anyone know of a way to accomplish this? I am working in a Node.js environment so will have all that's possible in Node available to me including file system access. I am hoping someone has already created an export tool that can be plugged in to our helper application. Thanks in advance!
-
I recently struggle to deliver a couple of banners for XAd. They needed to be a 320x50 and a 300x250 with weights of 20k and 40k respectively. After some research I ended up doing it in Photoshop. However "Video Timeline" only allowed for linear interpolation. My question is: When requested for GIF banners what is your approach? tools? workflow? dealing with the art director?
-
Hi, I was wondering if it's possible to use GSAP for creating animated gifs? I noticed when using Export > Export Movie > Animated Gif, it only captures the timeline animated items, not the ActionScript-based ones It is possible, however to capture ActionScript-based animation via Export > Export Video is there a way round having to use Timeline animation, or would I have to convert the Video to a sequence, then produce a gif? Thanks
-
Hello, I was wondering if someone had any success of animating a set of images (known also as sprite sheets). I was thinking that animating the css property background-position, and maybe adding some autoAlpha would do the trick. I will probably try and implement something of sorts unless someone has already beaten me to it, so there is no need to re-invent the wheel... looking forward for reading some ideas on the matter... EDIT: Something quick and dirty is the following: var t1 = new TimelineMax({delay:0, repeat:-1, repeatDelay:0}); t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':posX}},0.1); t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':(posX-50)}},0.2); t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':(posX-100)}},0.3); } we have a <div id="spriteContainer"></div> and some css: #spriteContainer{ background:url(fishSprite.png); background-repeat:no-repeat; position:absolute; left:50%; top:200px; width:38px; height:26px; overflow:hidden; } I used this sprite sheet:
