Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

swampthang last won the day on June 19 2016

swampthang had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by swampthang

  1. I was making this way more complicated than it should have been. The issue was the width and height relative to the viewBox. For now, this works: https://codepen.io/swampthang/pen/mdPWXwv?editors=1010
  2. Thanks for the reply, @ZachSaucier. I'm trying to animate the g element from just outside the stage area on the right (the dashed lines) to its current position. Then animate it to just outside the stage area on the left. In my app, I'm stuck (at this time anyway) with < version 3 so can't really leverage those methods.
  3. I'm trying to figure out how to calculate the x position for a g element that would animate in from just "Off-Stage" (right, left, top, bottom) in an embedded SVG that is inside a div container which is scaled. When you change the container's scale setting (zoom) everything changes. Also, the original SVG was 640 x 640 but I resized it to 186 x 186 in this example which adds to the confusion for my feeble noggin. The reason for all these differences is a user can zoom the stage container in and out as well as resize the embedded SVG so I need to accommodate those changes.
  4. Thanks for the clarification, @OSUblake. Really appreciate your weighing in.
  5. Awesome, @ZachSaucier! I added it to this fork. https://codepen.io/swampthang/pen/GRZJyYy I had tried dynamically adding everything in that fork yesterday thinking it might make a difference but it didn't. So, I implemented your suggestion by adding a "changing" class (with will-change: opacity) just before running the animation. But, it's recommended here that you use will-change sparingly. So, I removed it after the animation was finished but it disappeared again. So I added the z = 1 thing after removing the class and it works! Thanks so much for the sugg
  6. I understand, Blake has told me more than once to beware the evil foreignObject but I need a way to allow users to type and wrap text in a container. At this point, text is the only thing I place in a foreignObject. All bitmap images go in a nested SVG containing an image element and vector images go in as a nested SVG.
  7. 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
  8. 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 sta
  9. 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?
  10. swampthang


    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
  11. swampthang


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


    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
  13. swampthang


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


    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)
  15. @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
  16. 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
  17. 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 st
  18. 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
  19. 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.
  20. 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"> &l
  21. Ahh, ok. Thanks for clarifying, Jack. Much appreciated!
  22. Ahhhh, thanks for the info, @ZachSaucier!
  23. 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?
  24. Was able to get it all working. Thanks for the help all.
  25. 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.