swampthang

Now this is interesting. I forked the above pen and changed the fromTo opacity to go from 0 to 0.99 for the text instead of all the way to 1 and it remains visible. Weird. https://codepen.io/swampthang/pen/eYZNGGd?editors=1010

Hey, @PointC, thanks for the reply. I want to be able to layer text, images and video all within a master SVG. I built a video creation app that already does all of this except allow stacking for video elements in the same stack as other elements. Currently, the user can add videos but all the videos are behind everything else, iow, they're not located inside the main SVG. I use that main SVG to build a PNG sequence and then stack all the animations on top of the videos. I'm looking for a way to allow videos to live among the other elements so a user can place them anywhere in the stack they want. I'm just experimenting with it right now but hoping there's a way to do this and leverage GSAP as the animation engine.

Wondering if anyone has any experience with embedding video in an svg in combination with text. In the codepen, clicking the play button (in Chrome) reveals the text fading in (opacity) but it promptly disappears. I read here that you can embed video elements in a container such as a g, etc., but I could never get the video to display that way. I'm using foreignObjects but the video seems to "cover" the text unless it's animating. Any idea what might be going on?

Thanks, @ZachSaucier. My problem was that I didn't understand all the in's and out's of liveSnap. Your point is well taken regarding using type: 'x' rather than type: 'left' Below is what I ended up with. It works the way I was wanting it to. And sorry for not being more clear. I wanted either end of a block to snap to either end of the other 2 allowing you to move them around which would change the snap points. https://codepen.io/swampthang/pen/zYrVLao?editors=1010

I think I finally figure it out. Here's codepen 3: https://codepen.io/swampthang/pen/pogXKGq?editors=1010

Ok, I'm an idiot. I need to be able to drag any of the 3 blocks to the left or right and snap them to the edges of the other 2 blocks but only when they get within a few pixels of the other blocks. I created another version of it where I'm setting liveSnap to an array. Is there a way to return an array AND use a radius value? Ok, now I'm seeing that using an array is a 1-time setup. So, once you've dragged one of the blocks, snap is still using the old array. Here's the other pen: https://codepen.io/swampthang/pen/XWXLEvR

In Chrome, none of the blocks are draggable left/right.

I'm attempting to set up a simple Draggable with liveSnap. Want any of the green blocks to snap to either the left or right of the other 2 but none of the blocks are draggable. What am I doing wrong here? (I'm sorry about still using 2.x but I can't upgrade yet)

@namisuki, some questions for you: Are you attempting to do this on a web server? Are you using or can you use node.js? If you are or can use node.js, can you install any node module on your server? I am using node.js in Electron and am using ffmpeg (using the node module fluent-ffmpeg) to build out videos. ffmpeg is lightening fast but you have to create a png sequence to hand it as an input. I have everything in a master SVG. You can add images using the <image/> element in an embedded SVG and text can be added in a foreignObject. I can point you in the right direction for this if you need help. As for creating an image sequence, here's an example of how to create the sequence from a GSAP timeline (older so not 3.0) https://codepen.io/swampthang/pen/yaYJpm With each iteration of the loop I use the node module base64-img to save each sequence as a transparent png in sequence like this: const base64Img = require('base64-img'); function processTimeline(obj) { let current = 0, thisImgData, thisFilePath, FPS = 30, saveDir = 'your/save-to/path/', masterTL = yourMasterTimeline, masterSVG = document.getElementById("stage-master"), // this is the id of the master SVG duration = masterTL.duration(), frames = Math.ceil(duration / 1 * FPS); TweenMax.ticker.fps(FPS); masterTL.progress(0); // set the progress of the masterTL to 0 // advance by 1 frame masterTL.progress(current++ / frames); makePNG(); function makePNG() { if( current == frames ) { masterTL.progress(1); // make sure the timeline is all the way to the end } let xml = new XMLSerializer().serializeToString(masterSVG); // get the base64 string thisImgData = buildSvgImageUrl(xml); // set the new filename let padded = pad(current,5); let filename = `img${padded}`; let thisFilePath = saveDir+filename+'.png'; loadImage(); function loadImage() { // now create the png file and save it to the save-to folder let canvas = document.createElement("canvas"); canvas.width = WD; canvas.height = HT; let ctx = canvas.getContext("2d"); let img = new Image(); img.crossOrigin = "Anonymous"; img.onload = function() { ctx.drawImage(img, 0, 0, WD, HT); let url = canvas.toDataURL("image/png"); // I'm using a node module by the name of base64-img (see entry at top) let fullPath = base64Img.imgSync(url, saveDir, filename); URL.revokeObjectURL(url); checkCurrentFrame(); }; img.src = thisImgData; img.onerror = function(error) { console.log(error); }; } function checkCurrentFrame() { if( current == frames ) { createAnimationVideo(obj); // whatever your video creation script is } else { // advance the current frame masterTL.progress(current++ / frames); makePNG(); } } } function buildSvgImageUrl(svg) { let b64 = window.btoa(unescape(encodeURIComponent(svg))); return "data:image/svg+xml;base64," + b64; } function pad(str, max) { str = str.toString(); return str.length < max ? pad("0" + str, max) : str; } Adding the png sequence as a single input is as easy as: proc = new ffmpeg(); proc.addInput(`${group.dir}img%05d.png`) .addInputOption('-thread_queue_size 512') .addInputOption(`-r ${obj.FPS}`) .addInputOption(`-f image2`); You can look at the fluent-ffmpeg docs to see how to set up the ffmpeg process listeners like proc.on('start', function()). There's an on 'start', 'progress', 'error', and 'end'. Hope that helps. FFMPEG is an executable so it's not subject to the single thread limitation of javascript. fluent-ffmpeg is a node module that allows you to make calls to the executable from within a javascript thread.

Ok, for anyone else who has this issue, I may have learned my lesson with foreignObjects. I can't believe I didn't know about being able to use an <image/> tag in a nested SVG with xlink:href but here's the solution. It seems to work in all browsers except Internet Exploder but foreignObjects don't work in it anyway. https://codepen.io/swampthang/pen/zYGmYzo

First, this is only happening in Safari as far as I can tell. This is a simple fade-in for (please don't curse me) an image inside a foreignObject and a nested SVG (ducking a right hook). I discovered that, as soon as the animation begins and the style attribute is added to the image, the browser redraws and sets the image (which is first in the stacking order) on top of the SVG. I set up 3 buttons. The timeline starts out paused, so clicking the play button shows you the stacking switcheroo. REWIND/STOP is obvious. The 3rd button pauses the timeline and removes the style attribute from the img. If you do that towards the end of the timeline, you can see the gray circle (the svg) come back to the top of the stack as it should. Does anyone know a way around this in Safari?

Ok, I think I might have figured this out. I had to embed the foreignObject in a <g> element. I wrapped the image itself in a foreignObject. Seems to have fixed it! https://codepen.io/swampthang/pen/ExjQBWM?editors=1010

In the app, I can convert SVGs into png images and it will work. But, I'm trying to avoid the file-size hit. You mention avoiding nested SVGs so I was thinking maybe I could create a <g> element and drop the contents of the SVG into it. I tried doing that but it doesn't display either. Safari. Grrrrr.

Still working on the Self-Contained SVG app and ran across a Safari display issue. The codepen looks right in all browsers except Safari. Even works in Internet Exploder and Edge. There's an SVG (blue button) nested in the main SVG that should be visible over a base64 image that's inside a foreignObject. Structure is like this: <svg width="728" height="200" xmlns="http://www.w3.org/2000/svg" version="2" viewBox="0 0 728 200"> <style> <![CDATA[ // styles go here ]]> </style> <foreignObject x="0" y="0" width="728" height="200"> <div xmlns="http://www.w3.org/1999/xhtml" width="728" height="200" style="width: 728px; height: 200px"> <div> <img src="data:image/jpeg;base64,base64DataGoesHere" /> </div> </div> </foreignObject> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 486 124" x="150" y="37" preserveAspectRatio="xMinYMin meet"> <g data-svg-origin="239 121" transform="matrix(1,0,0,1,0,0)" style="visibility: inherit; opacity: 1; transform-origin: 0px 0px 0px;" clickurl="https://aquickmarkewt.com" newwin="true"> <g xmlns="http://www.w3.org/2000/svg"> <g> <path d="M64 121.5a57.5 57.5 0 010-115h357a57.5 57.5 0 010 115z" style="isolation:isolate" fill="#231f20" stroke="#231f20" stroke-miterlimit="10" opacity=".25"></path> <path d="M415 107.5H58A49.55 49.55 0 018.5 58h0A49.55 49.55 0 0158 8.5h357A49.55 49.55 0 01464.5 58h0a49.55 49.55 0 01-49.5 49.5z" fill="#1b75bc" stroke="#231f20" stroke-miterlimit="10"></path> <path d="M58 115.5a57.5 57.5 0 010-115h357a57.5 57.5 0 010 115z" fill="#231f20" stroke="#231f20" stroke-miterlimit="10"></path> <path d="M415 107.5H58A49.55 49.55 0 018.5 58 49.55 49.55 0 0158 8.5h357A49.55 49.55 0 01464.5 58a49.55 49.55 0 01-49.5 49.5z" fill="#1b75bc"></path> <path d="M415 107.5H58A49.55 49.55 0 018.5 58 49.55 49.55 0 0158 8.5h357A49.55 49.55 0 01464.5 58a49.55 49.55 0 01-49.5 49.5z" fill="#1b75bc"></path> <path d="M444.6 18.4a49.24 49.24 0 019.9 29.6A49.55 49.55 0 01405 97.5H48a49 49 0 01-29.6-9.9A49.24 49.24 0 0058 107.5h357A49.55 49.55 0 00464.5 58a49.24 49.24 0 00-19.9-39.6z" fill="#166091"></path> <path d="M23.5 65A41.53 41.53 0 0165 23.5h357a40.79 40.79 0 0125.6 8.9A41.33 41.33 0 00415 16.5H58a41.46 41.46 0 00-25.6 74.1A40.79 40.79 0 0123.5 65z" fill="#47a8ea"></path> </g> </g> <text x="0" y="0" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 251, 76, 0, 1);" data-svg-origin="-120 -39" transform="matrix(1,0,0,1,0,0)" class="">Button</text> </g> </svg> <script> <![CDATA[ // all the javascript goes here ]]> </script> </svg> Chris Gannon mentioned wrapping the SVG with a div and adding the xmlns attribute. I tried that and it works as long as there isn't any javascript (which has to be contained in a CDATA block). If you do, it complains about an Unexpected token right where the CDATA starts in the script tag. Unexpected token '>' I tried placing the nested SVG in a foreignObject, when you do, the SVG no longer appears. The pen that has all the javascript and animation in it is here in case anyone is interested... https://codepen.io/swampthang/full/OJVQxzy If you inspect the elements tab in Safari's inspector on that page, you can drill down into the nested SVG and see the animation running and, selecting the g element that is animating, you can see the bounding box highlighting where it should show up. I saw where Jack told someone that Safari is the new IE. I believe it! Any of you SVG gurus have any idea what needs to happen to be able to see the nested SVG in Safari?

Ahh, ok. Thanks for clarifying, Jack. Much appreciated!

Ahhhh, thanks for the info, @ZachSaucier!

I am a Business Green member so have Custom Ease and Custom Bounce. I'm creating a new app that allows a user to export a self-contained SVG but, of course, I can't include anything in the SVG but the free version of GSAP. Is it possible to create a custom bounce, for example, and export that out as SVG Data and run it using the basic ease engine?

Was able to get it all working. Thanks for the help all.

Yea, it needs to be a file that someone can place anywhere they like using the object tag. But, given the fact that I have to save it as a string to a file, I should be able to use a regex to assure all img tags are closed by parsing the string just before it gets written to the file. Thanks again for the help on this.

Thanks, @OSUblake. Really appreciate that. You gave me a couple of things to try today!

Thanks, Blake. Yea, it's strange alright. Wanting to be able to export a self-contained SVG with animation like the one attached. test2.svg

@OSUblake this is a very simple codepen. I've tried using an xml string to create the img and forcing a closing tag like: <img src="source" /> but when it gets added, the closing "/" always gets stripped out. If you then take that svg outerHTML and create an svg file with it and try to open that in a browser, you get the following error: This page contains the following errors: error on line 2 at column 154: Opening and ending tag mismatch: img line 0 and div Below is a rendering of the page up to the first error. If you add back the closing tag to the img, it works fine. I just have to figure out how to do that dynamically. https://codepen.io/swampthang/pen/NWqdMzo?editors=1010

Will do ASAP. Thanks for the response, @OSUblake

Preface this by saying this isn't a GSAP question but I've spent 2 days trying to figure this out. If I had hair it would all be gone by now. Does anyone know how to dynamically add an img element to a foreignObject in an SVG without the closing tag being removed? For an inline SVG it doesn't seem to matter but if you view the svg itself in the browser, it complains about missing the closing tag for an img. I'm dead in the water on all the above if I can't figure this out. Just hoping for some mercy here. Stack overflow is void of good info on this.

Here's a VERY SIMPLE test. This was exported from the app.... https://codepen.io/swampthang/pen/abOBeKp?editors=1010 You can use the svg as a file (without having to inline it in the html) using an object tag. An img tag won't work - won't animate. Do it like: <object type="image/svg+xml" data="test.svg"></object>