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


swampthang last won the day on June 19 2016

swampthang had the most liked content!

Community Reputation

130 Specialist

About swampthang

  • Rank
    Advanced Member
  • Birthday September 11

Profile Information

  • Gender
  • Location

Recent Profile Visitors

3,749 profile views
  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