Jump to content
GreenSock

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!

swampthang

BusinessGreen
  • Posts

    372
  • Joined

  • Last visited

  • Days Won

    1

swampthang last won the day on June 19 2016

swampthang had the most liked content!

1 Follower

About swampthang

  • Birthday September 11

Profile Information

  • Gender
    Male
  • Location
    Louisiana

Recent Profile Visitors

4,778 profile views

swampthang's Achievements

  1. Yes! Thank you! Loving the other input too. I didn't realize this was an issue in Chrome on Windows since I'm on Mac myself.
  2. I wonder of anyone knows a workaround for this. I need to be able to set an absolute size for a stroke width - not having it grow or shrink with the scaling of the path. The codepen works beautifully in all browsers except Safari. Attached is a screenshot of what happens. All I can do at this point is add a window.navigator.userAgent check for Safari and change the vector-effect value to be 'non-scaling-size' which does nothing really in this scenario. Any thoughts?
  3. For anyone else who might just happen to need to step through their animation 1 frame at a time 😀 here's another way of handling this. https://codepen.io/swampthang/pen/qBrdzdp As Jack so eloquently and thoroughly explained... So, rather than jumping to the end and beginning, just advance 1 frame beyond the next frame and then and back TO the next frame so GSAP knows for sure the box should be displayed. if (currentFrame + 2 <= totalFrames) { // temporarily move 1 frame beyond the next frame to assure set() does display! masterTL.progress(currentFrame + 2 / totalFrames); } Thanks again to Jack for taking the time to explain the issue. Especially given the fact that this is such an edge case (as most of my issues have been).
  4. Looks like this works. Click the PRE-RENDER button before stepping forward. https://codepen.io/swampthang/pen/wvJadXO
  5. Makes sense. The option to immediately show/hide something with no in/out animation has been a bit of a brain-twister for me in these situations for some time. You'd think the more challenging stuff would involve actual animations, huh! I'll try the things you suggested. Yes, Jack. Duh! Thanks so much for the thorough explanation. Sometimes my feeble noggin gets the best of me.
  6. Is running masterTL.time(0.1) as a setter supposed to return the object?
  7. Another thing I noticed is that going all the way to the end of the timeline (frame 34) and then back to frame 33 where the box displays, you can click rewind and step forward and you'll see the box on frame 4. I'm wondering if this has something to do with how immediateRender works. Added a TO END button because I also noticed that, before the image ever displays, you can jump to the end masterTL.progress(1) then rewind masterTL.progress(0) then start clicking the frame >> button and you'll see the image on frame 4. One thing to note, frame 1 starts at 0. There is no "frame 0". For example, if the frame rate is 30 FPS, in the video world, the last frame of the video starts 0.03333333333333333 seconds before the end of the video.
  8. Trying to use tl.set(item,{autoAlpha:1}) on items at specific times. It has all seemed to be working fine but I just noticed recently that, when I step through (calculating frames for each step), autoAlpha doesn't get triggered until the next frame. I'm thinking there may be some Math issue here and wondering if any of you Math wizards might have the answer. WHAT SHOULD HAPPEN: In my thinking, when masterTL is at the time 0.1, the box should display but it doesn't display until the following frame. But what's even more curious to me is that, when you frame back from 5 to 4, it continues to display. Any insight would be greatly appreciated. Thanks.
  9. 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.
  10. 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!
  11. 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
  12. 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 Resizable anymore because it only supports css - left/top and most browsers force round left/top to the nearest pixel. In the pen, you can see that the right handle works fine but the left one is a problem I can't seem to get around. The challenge is that both handles need to be contained inside the parent because I'll have multiple instances of the parent element in the same container. I tried to see if I could reset the left handle to 0 on each cycle of onDrag after getting the deltaX value so that the left handle would never appear to move from it's position at x=0 but that caused some problems. This is a real quandary in my feeble little pea-brain. Any help would be greatly appreciated. Thanks!
  13. 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
  14. 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.
  15. 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. Anyone have any idea how to get this to work?
×