swampthang

I'm looking at the Raphael FreeTransform tool on github and wondering if anyone has been able to successfully integrate that into GSAP via the Raphael Plugin. Need a FreeTransform tool and that one looks pretty good. Just don't want to do anything that causes conflicts with GSAP, etc. Also, really all I need is the ability to add selection handles that allow resize and rotate. I of course need drag but not sure if that will conflict with GSAPs draggable. Any insight from someone with experience in this would be greatly appreciated.

Thanks, Jonathan. If I add the stroke-width attribute, the paths surrounding the channel I mentioned above just gets surrounded with thicker path lines. You can see what I'm talking about here where I manually added stroke-width to the group surrounding the paths, etc. I could go in and remove all the fills but then you just get a hollow channel. http://codepen.io/swampthang/pen/XKaWbV/?editors=1000 I think for now I might push back on these particular SVGs.

I'm having to work with huge collections of simple line-art SVGs and set up an app that will find all the various elements of the SVG (line, path, rect, etc), add drawSVG to them and export out to video. There's an entire folder where the artist decided to use paths with no stroke-width but, instead, used fills between adjacent paths. Forms little 4px channels where there should be 4px stroke-width on a single line. But, in most of the other folders in the same collection, the artist used paths with stroke-widths as you would expect. Referencing the Codepen, the first 2 SVGs that appear have lines/paths with strokes and the next 2 use no-stroke lines/paths with fill in-between as mentioned. You can see that the last 2 are like, "hey, there are no lines to draw here, move along!" The other trick is that I have to be able to do this programmatically - won't know if one of these is being loaded. I could check for paths with no stroke-width, etc., but, man! Welcome to the world of high inconsistency. Does anyone know of a way to detect and hack one of these so that it draws in/out?

Ahh, thanks for the input, Jonathan.

Looks like I can wrap the inner svg's in a foreignObject and get it to work. http://codepen.io/swampthang/pen/LkLrRG/

ahhh, that explains it. Not a good thing since I'm trying to use this in Electron which uses the Chromium browser. I'll just have to dynamically wrap each inner svg in a <g/> tag. thanks so much for pointing that out.

Ok, now I'm not sure what the deal is but am unable to get a nested SVG to respond to draggable. I've looked at a few posts in the forums but not finding one where a complete SVG is nested inside another and trying to move the nested SVG itself. When I remove the outer SVG it works. I've added a stopPropagation() to the inner svg and know that it's what's being selected because there's a log for both inner and outer and it seems to be firing correctly. Here's the codepen. http://codepen.io/swampthang/pen/LkLrRG/ Sure hope this is possible because I have to use an SVG as the wrapper.

Figured out how to store the svg file. Was overthinking this. All I had to do was write the xml variable created here.. var xml = new XMLSerializer().serializeToString(svg); like this... fs.writeFileSync('./tmp/img'+current+'.svg', xml); FFMPEG doesn't support export from SVG so had to convert the sequence of SVGs to an exact sequence of PNGs. I found this which does the job beautifully. https://www.npmjs.com/package/blender It takes an input directory and, using a JSON config file, it converts to PNGs and saves them to whatever directory you give as an output. However, before I was able to create the videos I had to know that all the PNGs were created so I had to set up a promise-based series of functions and already knew about this really cool "promise-style async sequence flow-control" npm package: https://github.com/getify/asynquence With that working, I turned to FFMPEG and found that I needed to name the sequence of images with leading zeros - like img00001.png, img00002.png, etc because the way FFMPEG works out of the box is like this... ffmpeg().input("./tmp/pngs/desktop/img%04d.png") The %04d part tells FFMPEG that we have a sequence of images named img{number}.png and that there are 4 leading zeros. Got the video export working now so almost there! The next big hurdle is figuring out how to package (dynamically link) FFMPEG in the packaged Electron apps.

So, here's the progress... I have Blake's awesome sample code working in my application. Electron has full access to the filesystem and to anything that can be done in node.js. In Blake's awesome sample code the section that creates and appends the blob image to an element is... var xml = new XMLSerializer().serializeToString(svg); var blob = new Blob([xml], { type: "image/svg+xml" }); var img = new Image(); img.crossOrigin = "Anonymous"; img.onload = function() { list.appendChild(this); }; img.src = URL.createObjectURL(blob); and it creates multiple img elements that look like this... <section> <img crossorigin="Anonymous" src="blob:http%3A//s.codepen.io/e8ccd85d-cd49-4c20-9445-e841a9b96142"> <img crossorigin="Anonymous" src="blob:http%3A//s.codepen.io/2c1e1cd4-232d-44b6-a919-f7637a1cce39"> <img crossorigin="Anonymous" src="blob:http%3A//s.codepen.io/3eae7d75-27ea-44e5-bc45-b069e71e6da4"> <img crossorigin="Anonymous" src="blob:http%3A//s.codepen.io/e48c7b71-5127-4691-af12-19cbbb45cbe5"> <img crossorigin="Anonymous" src="blob:http%3A//s.codepen.io/dc3e933e-6fd8-4f24-a4d3-fb8583b5c517"> </section> See next post...

Hehe, thanks you guys. My local npm build was up to date but the codepen, where I was testing had gotten stale. Wow, I'll have to make sure I make that one of the first things I check from now on. Getting fired up about the possibilities!

I'm trying to animate the x and y of a nested SVG and am getting the error: Failed to execute 'setAttribute' on 'Element': 2 arguments required, but only 1 present. The codepen uses the min version so can't debug this. What am I missing? http://codepen.io/swampthang/pen/oLZEOK/ Related post: http://greensock.com/forums/topic/14620-tweenmaxset-drawsvg0-in-nodejs-not-working/ regarding the above related post - I'm not going to have a lot of control over the SVGs that will be dropped in to the editor except that I should be able to strip some attributes out.

Thanks, Blake. Going back to school on SVGs this morning. I thought I understood them better than I really do. Found this 3-part article on understanding SCGs - https://sarasoueidan.com/blog/svg-coordinate-systems/

Thanks for the reply, Blake. Yea, nice that everything is one browser and controlled version. Cross origin policy restrictions aren't an issue with Electron either. I'll play with that option. I notice that you're embedding everything inside the svg tag. Is that something that can't be avoided with your method? I need to be able to animate entire div's containing either text or svg's inside a containers coords. So, for example, a structure like this where the #stage element might be 1440 x 900 might have 2 different elements like... <div id="stage"> <!-- Will animate this using scrambleText, etc --> <div id="text1" class="text-container"> Some text here </div> <div id="svg1" class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170" class="svg inlined-svg" role="img" id="svg-0"> <g id="Background"/> <g id="Circle"> <path fill="#FFFFFF" d="M85 170c-46.87 0-85-38.13-85-85S38.13 0 85 0s85 38.13 85 85S131.87 170 85 170z"/> </g> <g id="TEXT"/> <g id="Icons"> <line fill="none" stroke="#282D33" stroke-width="4" x1="32.43" y1="126.4" x2="130.43" y2="126.4"/> <path fill="none" stroke="#282D33" stroke-width="4" d="M87.09 121.73v-4.61c0-1.27 1.03-2.31 2.31-2.31h33.45c1.27 0 2.31 1.03 2.31 2.31v4.61"/> <path fill="none" stroke="#282D33" stroke-width="4" d="M122.45 109.05c0-1.27-1.03-2.31-2.31-2.31H92.08c-1.27 0-2.31 1.03-2.31 2.31v3.46c0 1.27 1.03 2.31 2.31 2.31h28.06c1.27 0 2.31-1.03 2.31-2.31V109.05z"/> <path fill="none" stroke="#282D33" stroke-width="4" d="M122.11 64.67c0.79 0.79 0.79 2.08 0 2.87l-18.88 18.88c-0.79 0.79-2.08 0.79-2.87 0l-4.54-4.54c-0.79-0.79-0.79-2.08 0-2.87l18.88-18.88c0.79-0.79 2.08-0.79 2.87 0L122.11 64.67z"/> <path fill="none" stroke="#282D33" stroke-width="4" d="M97.49 40.06c0.79 0.79 0.79 2.08 0 2.87L78.61 61.8c-0.79 0.79-2.08 0.79-2.87 0l-4.54-4.54c-0.79-0.79-0.79-2.08 0-2.87l18.88-18.88c0.79-0.79 2.08-0.79 2.87 0L97.49 40.06z"/> <line fill="none" stroke="#282D33" stroke-width="4" x1="98.02" y1="77.55" x2="80.07" y2="59.61"/> <line fill="none" stroke="#282D33" stroke-width="4" x1="113.24" y1="62.33" x2="95.3" y2="44.39"/> <rect x="42.45" y="83.84" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 181.2005 100.7024)" fill="none" stroke="#282D33" stroke-width="4" width="54.59" height="8.07"/> <rect x="43.27" y="104.12" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -63.9865 65.8295)" fill="none" stroke="#282D33" stroke-width="4" width="8.41" height="12.07"/> <line fill="none" stroke="#282D33" stroke-width="4" x1="83.88" y1="79.18" x2="78.44" y2="73.74"/> <line fill="none" stroke="#282D33" stroke-width="4" x1="78.17" y1="84.89" x2="72.73" y2="79.45"/> <line fill="none" stroke="#282D33" stroke-width="4" x1="100.11" y1="65.05" x2="92.57" y2="57.51"/> <line fill="none" stroke="#282D33" stroke-width="4" x1="122.07" y1="90.9" x2="130.82" y2="90.9"/> <line fill="none" stroke="#282D33" stroke-width="4" x1="120.75" y1="84.37" x2="128.13" y2="79.68"/> <line fill="none" stroke="#282D33" stroke-width="4" x1="120.75" y1="97.43" x2="128.13" y2="102.12"/> <line fill="none" stroke="#282D33" stroke-width="4" x1="91.5" y1="90.9" x2="82.75" y2="90.9"/> <line fill="none" stroke="#282D33" stroke-width="4" x1="92.82" y1="97.43" x2="85.44" y2="102.12"/> </g> </svg> </div> </div> The text might be animating in from left to right and then drawing while the text comes in from right to left and scrambling, etc.

Just to keep the info flowing in this thread, I'm currently using Electron Recorder to take screenshots. https://github.com/mikolalysenko/electron-recorder

Hey, Blake. I've tried to avoid using canvas and there are very few good screenshot utilities for Electron that don't require canvas. I really like your approach best but have a glitch in my understanding of how to apply it to a complex animation. I have to admit that I haven't done a lot of work in converting Blob's and creating data URL's. So, I'm going back to school on them right now. Before I waste a lot of time heading down that road, do you think it's practical or possible to create data URLs of each frame of a complex master timeline where elements are being positioned at various x/y points as well as being drawn in, etc? I keep thinking there's got to be a way to do this and preserve transparency in the resulting animated gif or MP4. What I know... I'll have a set container size like 1024 x 768 or 1440 x 900, etc. All animations will take place inside that container. I'll only use SVGs and text. Want to be able to use the splitText plugin as well as drawSVG. I keep thinking I'm so close to something that could be so much better than screen capture because I bet this could be resolution independent. Might even be able to "export" animated GIFs and MP4s at 2X resolution, etc. While I know this isn't something that is GSAP-specific, I think there's something really useful for GSAP users that could result from this and create a whole new use for these animations. Your thoughts?

All i have to do now is figure out how to capture all the animations including x/y Tweens and Bounce, etc. That's probably why most folks I've seen have opted to try screen capture. I'm wondering if I could use a simple screen capture utility and do the same you were doing, pause and then advance 1 "frame" at a time but do that for a master timeline. These animations could get a little hairy. I think I'm gonna give that a go.

This is awesome, Blake! What a huge help this is! Thanks so much.

This is proving to be a real challenge to do it right. Any guidance from someone who has any experience at this sort of thing would be greatly appreciated. Would be awesome to figure out a way to export to some sort of plugin that could run in a video track preserving the GSAP code. How cool would that be!

Oh, no, got that worked out. All the GSAP animations are working great. My BIG, HUGE (in my best Trump voice) issue is finding a way to export the animations.

You bet, Carl, thanks for clarifying - and yea, thanks, Blake! As to what I'm building, it's an app that folks will be able to install where they can pull in any number of SVG's, enter text and animate them along the timeline using some very simple assembly tools. I've got the basic idea working and there's a lot more to go - miles to go before I sleep I'm stuck right now at the most important feature and that's finding a way to export the animations for use in video editing (mp4's) or on the web via animated GIFs. Striking out left and right. I would invite anyone who thinks they might have a solution to let me know because I'd be happy to subcontract this part of the project out or pay someone hourly to help me get set up and headed in the right direction. And, yea, Electron is an awesome build tool. The github folks are developing it and it's getting more powerful every day. In fact, there are several apps on the market right now that were built in it. It's all HTML5, css and js. Pretty awesome for someone with front dev skills already!

Ahhhh, just saw your post above. Where exactly do I put that? Nevermind, I was able to figure it out. Thanks for the tip! Got it to work. I had to use the node path though as you'll see below. I guess this is something that I'll have to do for all the Business Green plugins that I wish to use. Here's how I have it set up for anyone else who needs help with this. Might not be the perfect way, but it works. I had created a custom module called svg-animate and the package.json file has index.js as the main script to run. { "name": "svg-animate", "version": "1.0.0", "description": "A set of animation functions for svg files using Greensock's GSAP utilities", "main": "index.js", I had set up the index.js file in that module to require gsap and thought, since everything else seemed to be working, that the plugins were included as well. Since finding out different, I added the var DrawSVGPlugin line just below where I added the TweenMax require statement... var TweenMax = require("gsap"); var DrawSVGPlugin = require("gsap/src/uncompressed/plugins/drawsvgplugin"); Here's a SS of my editor showing the file structure and where I've added this to the index.js file..

Could this be a licensing issue? We do have a Business Green membership but it's under a different account name than mine. I've had this account (connected to my personal email) for some time now so prefer using it for this kind of communication. Here's how I installed GSAP (maybe someone can see what I omitted or did wrong): First, I ran... npm install gsap That created a folder structure that looks like this... I had downloaded the club version of GSAP so unzipped it and diffed the 2. All I did was add the missing files to the node version. If there had been differences in the files that were in both folders, my diff app would have pointed them out. You can see the diff here... So, is there a place in the node files (or even the package.json file) where I need to add something for each of the Business Green plugins?

Thanks, OSUBlake, for the reply and test svg. Your test animation worked just fine in the app. Also, I remember it working once before. To answer your version question, here's from the package.json... { "name": "gsap", "filename": "TweenMax.min.js", "version": "1.18.5", "description": "Think of GSAP as the Swiss Army Knife of animation...but better. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, generic objects, whatever) and it solves countless browser inconsistencies, all with blazing speed (up", "homepage": "http://greensock.com/gsap/", "main": "./src/uncompressed/TweenMax.js", However, I was wrong when I said I thought the drawSVG script was executed properly - it isn't. I added a console.log at the top of the set: method in DrawSVGPlugin.js and it didn't write anything to the console. Is there something I need to do besides this... var TweenMax = require("gsap"); to set this up? At the top of the DrawSVGPlugin.js file I see this... /*! * VERSION: 0.0.11 * DATE: 2016-05-24 * UPDATES AND DOCS AT: http://greensock.com * * @license Copyright (c) 2008-2016, GreenSock. All rights reserved. * DrawSVGPlugin is a Club GreenSock membership benefit; You must have a valid membership to use * this code without violating the terms of use. Visit http://greensock.com/club/ to sign up or get more details. * This work is subject to the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { At the top of the TweenMax.js file I see this... /*! * VERSION: 1.18.5 * DATE: 2016-05-24 * UPDATES AND DOCS AT: http://greensock.com * * Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin * * @license Copyright (c) 2008-2016, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { As an aside, I'm wondering why there's a TweenMax-2.js file in the uncompressed folder.

I'm creating an app in a node.js environment and using a set of functions like the ones in the codepen. The codepen works and everything works in the node.js app as well except this call in the hideStrokes function: TweenMax.set(shapes, {drawSVG:0}); I see the svg container animate to the center of the screen but the lines in the svg appear as soon as I run the unHideSVG function. I can inspect the page using Chrome's dev tools and see that the drawSVG script was executed properly because I can see all the transforms, etc. Works in the codepen though. Anyone know of a reason why that particular call would fail in a node environment? http://codepen.io/swampthang/pen/RRoJOp/ By the way, I am using the npm install version of gsap and it did install all of the files and plugins in the node_modules directory. In the js file where all the functions are running I require the module like: var TweenMax = require("gsap"); Calls to drawSVG are not erroring so I assume it's finding it.

Found this nice write-up of some options. Still hunting for the best solution. https://github.com/veltman/gifs