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

132 Specialist

About swampthang

  • Rank
    Advanced Member
  • Birthday September 11

Profile Information

  • Gender
  • Location

Recent Profile Visitors

3,986 profile views
  1. Getting back to the issue of not being able to set a subpixel width, I've found that I can add a subpixel padding to the handle on the right which forces the browser to see the calculated width as subpixel.
  2. I plan to make the conversion at some point but the desktop app i've created is pretty involved/complex - the current and all previous versions allow users to save and reopen files using data created in GSAP 2.x - using all the old stuff including gsTransform values, etc. I have a lot of other things weighing on me right now and just don't have the bandwidth to make the change right now. But I really look forward to having the time to switch. Really anxious to do that!
  3. Ok, I forked the above and used the update method. Getting closer but whenever I drag the left handle, you can clearly see the right handle jumping around a bit. If there's a better way to do this I'd love to know. Also, setting the width is still rounding to integers. Is there no way to set a subpixel width? https://codepen.io/swampthang/pen/OJXorgE?editors=1010
  4. In @OSUblake's pen: https://codepen.io/osublake/pen/WYKKEN an embedded draggable element is used to resize a parent element that is also draggable. It works good when you only have one draggable element that is always positioned at the width and or height of its parent. I need to be able to resize a parent element on the x-axis from a handle at x=0 and another one at x=parent.width. In the past, I've used draggable on the parent and JQuery UI's resizable inside the Draggable. Now, I have to be able to resize and position the parent to subpixel accuracy so can't use JQuery Resizabl
  5. 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
  6. 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.
  7. 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.
  8. Thanks for the clarification, @OSUblake. Really appreciate your weighing in.
  9. 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
  10. 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.
  11. 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
  12. 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
  13. 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?
  14. 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
  15. swampthang


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