Leaderboard

Hi @evomedia.lt, Something like that ... Happy tweening ... Mikel

hmm, it looks like your demo went away while i was working on this and I deleted the css animations. Here is a basic approach: I didn't have time to match the timing. So weird to have to figure out things like what 15% of 7 seconds is or to script an animation by percents and then apply an overall duration. Hopefully you find the GSAP way is MUCH more intuitive. Definitely spend some time here: https://greensock.com/position-parameter

Are you familiar with lagSmoothing? https://greensock.com/docs/TweenMax/static.lagSmoothing GSAP is built to honor timings primarily, but it'll also adjust for some amount of lag. It's a trade-off of course and you can control it to be whatever you prefer. As far as I can tell, things are working as they should. Remember that you cannot assume things will always run at 60fps. GSAP was built to be completely resolution-independent in terms of time, so you you jump anywhere. If you've got tons of things animating and there's a lag in the browser for .25 seconds, for example, on the next tick GSAP will jump .25 seconds ahead (as it should). It kinda sounds like you were expecting it to act as if .25 seconds didn't elapse, but only 1/60th of a second (assuming 60fps) - is that right? Again, you can tweak lagSmoothing() to give you that behavior but that also means that when the browser bogs down, your animations will get slower and slower. Hopefully docs and the video there make it clear.

This was the hint I needed. Thanks so much, Carl!

Hi @Lacika1981, A straight line on a solid background does not necessarily need drawSVG: Otherwise, it is advisable to look at the great examples of @PointC. For example, this svg-stroke-dasharray-quick-tip Happy tweening ... Mikel

Ah, amazing! I was on the right track but this helps me a great deal. Thanks a bunch!

Yep, @Shaun Gorneau is exactly right. Another thing you could try is just animating a mask of a dashed line. I wouldn't be surprised if @PointC swings by and offers another suggestion, as he's done a lot in this realm. Happy tweening!

Hi and welcome to the GreenSock forums. Thanks for the demo. The biggest problem is that you create a new timeline on every click. Please see the console logs in this demo: If the menu is already open, there is no need for a new timeline. You really want to reverse the timeline that was created on the previous click, not one that was just made. There are a few ways to go about this, but your end result needs to be that each menu has a reference to its own animation that it is in charge of playing or reversing. Probably the best approach to this setup is what @OSUblake does in this thread This version from @pointC may be a little easier to understand (you would have to change the interaction to be click-based of course) and a similar approach

Here is a collection of campaign work and a UI i built for previewing campaigns that is responsive. http://digital.bradleylancaster.com/index.html

Love your work Joe! Awesome interaction design there and sleek animation styles.

I was setting something there to test out, and just forgot about removing it. You can replace it with the offset and it will work the same. Sounds like you got it. The params with forEach are in the opposite order of jQuery's each, so index is the 2nd param. And 0 will evaluate as false, so there won't be a pause at the start. To be honest, it wasn't obvious at first where the spaces were even coming from. I couldn't see any spaces when I inspected the elements in my dev tools, so I made a version using canvas just to compare. Then it hit me. I was using " " in my canvas to detect white spaces, so I logged this out. console.log(quote.children[0].childNodes); // [div, text, div, text, div, text, div, text, div, text, div, text, div, text, div, text] Bam! Like I said, whitespaces are usually found in between words. Those whitespaces are text nodes, which won't show up as an element in your dev tools. So to add a delay in between words, we need to start the loop with words instead of chars, and follow this pattern - word > chars from word > whitespace delay > word > chars from word > whitespace delay > word > chars from word > etc. And yes, I would have to agree that there should be an option to have the whitespace wrapped in a div. I can definitely see how it could be useful.

I might be misunderstanding something here about your goal, but couldn't you simply do this:? tree.set("#map-container", {className:"+=show-map"}); Remember, CSSPlugin allows you to animate between classes, and you can use "+="/"-=" prefixes to do relative values.

Hi, What you're looking for is a TimelineLite/Max method call . http://codepen.io/bassta/pen/qpsno - here is a simple codepen how to use it. Here is the code: tree.call(function() { //addClass, toggleClass, or your custom logic. $('#map-container').addClass("red"); }, null, null, 2);