[I made a small, helpful tool to make development a little easier]

Thanks for sharing. 

Having timeline controls available while developing can save hours for sure. 

Clever idea having the "relative" time jump buttons.

Thank you Carl!

 

By the way, if marcamos is the definition of mediocre JS developer and comes up with things like this, then, excuse myself while I commit sepuku.

[I made a small, helpful tool to make development a little easier]

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.

[Progress Counter]

Thanks Jonathan!

[Progress Counter]

Yup, confirmed, that is what I was in need of.

 

Thanks PointC!

[Progress Counter]

Wait a minute, I believe this CodePen demo gets me what I want: 

See the Pen ryfJu by GreenSock (@GreenSock) on CodePen

I'm going to give it a try and I'll report back.

[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!

[Quickly scale multiple elements up-and-down]

PERFECT! Thank you so much.

[Quickly scale multiple elements up-and-down]

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!

See the Pen qZWBPW by marcamos (@marcamos) on CodePen

[Animate an object along a path and reveal dots behind the object]

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!

[Scaling a *huge* SVG by a *large* number = blurring / stuttering]

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!

[Scaling a *huge* SVG by a *large* number = blurring / stuttering]

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.

[Scaling a *huge* SVG by a *large* number = blurring / stuttering]

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.

[Scaling a *huge* SVG by a *large* number = blurring / stuttering]

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!