Jump to content

swampthang last won the day on June 19 2016

swampthang had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


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
  • Location

Recent Profile Visitors

6,682 profile views
  1. I needed a simple countdown timer class and have seen a few posts here over the last few years, including the awesome timer animation by Greensock here - https://codepen.io/GreenSock/pen/qBjGZaE But I just needed something simple and reusable. This community has been so good to me over the years and I've not been the most contributive member. I created this class yesterday and wanted to share it in case anyone needs this kind of thing. It could use some refactoring so it's probably a tad bloated but it's a good starter class. You can pass the total number of seconds you want the timer to run, the container into which you want the timer to appear, a start callback and an end callback. I did use a few Bootstrap css classes so if you don't want to use that, just style the css as you like. I also used a google font for the timer text. I hope this helps anyone in need of a simple timer. Thanks again for all the help over the years.
  2. I was contacted by a company needing developers who can work in Adobe Animate but I think they're entertaining the use of GSAP as well. This will be full-time work for 3 months. It's for a very large company and the US Air Force as a sort of flight training thing. Please let me know if you're interested as the work will probably begin pretty soon. Pay can be 1099 or W2.
  3. Thanks, Blake. I had just finished this version about the time you posted this except for the progress reset step. Glad to see I was on the right track. https://codepen.io/swampthang/pen/bGoWbde Thing is, I have to kill all the tweens and rebuild them whenever tween durations change because, even though the tween durations change, the timeline keeps the same duration according to the GSDev timeline. I can see why durations would call for that kind of treatment though, unless you have some thoughts about how that could work as well. Thanks again, as always.
  4. I understand that function-based values only run once - when the tweens in a timeline are created. I'm trying to figure out how to update property values in an existing timeline. In the codepen, I have speed and distance fields from which the duration and x properties are taken. I'd like to be able to make changes to the fields and have the property values change based on whatever is entered into the field while the timeline is running. I've looked at the invalidate() method but trying to figure out how that would work while the timeline is playing. Is this not possible? ANY way of achieving this?
  5. This version works much better. I'm only changing the gain level of the background music in this one. There is no compression on the track. I created 2 GSAP timelines, 1 to be used for lowering the music (duckingTL) and one for handling turning it back up (releasingTL) because a user might choose a release speed value longer than the attack (lowering) speed value or visa versa. Also, the knee value is really a slope setting so I chose varying eases based on the knee value. https://codepen.io/swampthang/pen/poWbMdK?editors=1010
  6. I needed to create what's known as side chain compression in real time using the Web Audio api but it doesn't have that built-in functionality. It does have the ability to change each of the params AND it has a setValueAtTime method but that has NO CALLBACK which is crazy! So, I turned to good ole GSAP and thought I'd post the results here for anyone who might be able to get something out of this. I haven't been in here in a while so wanted to at least contribute something. Hope it helps someone.
  7. 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.
  8. 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?
  9. 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).
  10. Looks like this works. Click the PRE-RENDER button before stepping forward. https://codepen.io/swampthang/pen/wvJadXO
  11. 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.
  12. Is running masterTL.time(0.1) as a setter supposed to return the object?
  13. 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.
  14. 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.