Jump to content


  • Posts

  • Joined

  • Last visited


12 Newbie

Profile Information

  • Gender
  • Location
    Beverly, Massachusetts, USA

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hi everyone, I recently made a small tool to make development a bit easier and wanted to share it with you, get feedback, etc. https://github.com/fromtheoutfit/gs-animation-tools I'm still very new with GSAP—and I'm mediocre at best with JS—so this tool could surely be improved, but I found it to be really helpful in a recent project. Please let me know what you think here or in GitHub, and please feel free to fork it, copy it, steal it, submit pull-requests, issues, etc.
  2. Thanks Jonathan!
  3. Yup, confirmed, that is what I was in need of. Thanks PointC!
  4. Wait a minute, I believe this CodePen demo gets me what I want: http://codepen.io/GreenSock/pen/ryfJu I'm going to give it a try and I'll report back.
  5. marcamos

    Progress Counter

    I'm trying to create a progress counter that mimics what's used in the Timeline Tip: Understanding the Position Parameter demos — see the first one, labeled "No position: Direct Sequence", and note the helpful progress counter I've pointed out here. I've hunted all around Google, Codepen, and of course here in the forums and I'm coming-up empty. Maybe my search-fu is weak. I've got a bit of sample code that gets me part-way there: var tlMaster = new TimelineMax({onUpdate:updateCounter}); tlMaster.to('#item', 10, {y:500}); function updateCounter() { console.log(tlMaster.totalProgress()); } …but this is generating numbers faster than desired; I'd like the update frequency to be more like your demos I've linked-to above. Any tips, or pointers? The above code is only sending a log to the console — I'll handle the actual insertion of the progress value into a DOM node once I figure out the timing part. Thanks!
  6. Hello! I'm working on my second-ever GSAP feature and, naturally, I'm a little stumped. I've succeeded in getting mostly what I want (see the associated Codepen demo), but I believe I'm being stumped by the… yoyo:true …part. In the Codepen demo, it's "yoyo'ing" only after it scales-up all of the squares, but what I'm aiming for is each square scaling up-and-down individually, starting at the first, then second, then third, and so-on. (Does that make sense?) Many thanks for any tips you can provide!
  7. I've been tasked with animating an object (a ship) along an invisible path (that's provided to me in an Illustrator file), where the path becomes dotted as the object passes along it. See the attached screenshot. I've been working with GSAP for a couple of weeks now and I feel confident it's possible, and I'm happy to dive in and figure it out, but I thought it'd be wise to ask for a few pointers first. This thread seems to touch on the dotted path part of it, and I imagine it's a matter of combining that advice with some additional code that'll move the ship along the same path? I'm not quite sure how I'd ensure the ship and the revealed dots would stay in synch … perhaps one can directly rely on the other? Thanks for any helpful tips any of you may have!
  8. Update! After speaking with the client, we're splitting up the gigantic SVG into multiple smaller SVGs that will have far less data and can be strung together with little transitions between them. I've been working on this adjustment for a few days now and it's much better. Thanks, again, for everybody's help!
  9. Thanks again for all of these tips; I've implemented as many of them as I know how, and the results are no better. I think the client and I need to rethink this project a bit; perhaps chunk-up the one SVG into many smaller ones that can be added/removed smoothly … or something along those lines.
  10. Thank you Diaco and Jonathan. I'm going to read through that other thread, and try all of the tips recommended above. I'll report back later today, I'm sure.
  11. Hello! A new project has brought me to GSAP and I'm starting to wrap my head around what's possible, how to do things, etc. Please forgive me as I fumble my way through this… Rather unsurprisingly, I've stumbled into a wall with regard to the first animation this project requires, which can be described as scaling a huge svg by a large number … but perhaps it's better to link straight to a demo page. Forgive me for not using CodePen—they have a file-size limit and this demo exceeds it: https://jsfiddle.net/163eys6b/7/ Give your browser a little extra time to process that page; like I said, the SVG is huge. The project calls for a big map of (almost) the entire world which starts zoomed all the way in to Amsterdam, which then slowly zooms out all of the way, from scale:1600 to scale:1. In the above JS Fiddle, you'll notice that it does what it should do, but it does it with a stutter (I'm using the latest version of Chrome stable as I type this, version 47.0.2526.111). I can remove the stutter by removing force3D:false, but that results in a very blurry experience about 5 seconds after the zoom-out animation begins. Am I doing this right? Or, is this SVG + scale combination just too much for the browser to handle comfortably? Thanks for your time!