anthonygreco

Is there a way to update the ease on a timeline? As opposed to the ease on a Tween? Or does this need to be rebuilt in a different fashion? Basically, I'm looking to create a timeline for several elements on the page, and since I needed to update the eases on those timelines, I placed my timelines in an array that I can retrieve later for updating. Will I need to create another array of tweens and target them instead? Can I access a tween inside a timeline and alter it's eases from just the timeline perhaps? Any thoughts on how I should address this? http://jsfiddle.net/anthonygreco/on11v708/

This is pretty close to with what I'm trying to accomplish. Thanks Carl. Looks like my Club membership has expired so DrawSVG Plugin won't help me atm but creating the necessary strings shouldn't be tough. The methodology you took of creating the timeline should prove resourceful, yet I need to perform the animation on only one path, as creating multiple path nodes isn't an option with the constraints I've been given unfortunately, which was why I thought of creating more "mock" data to conditionally check against. For a little clarity to what this use case is for (and help understand a little better) this would be something of a "trend line" and if the line ended in a upward slope this effect would be added to visually show the user the trend is going up. Again, appreciate all the feedback guys!

First, thanks for the assistance. That's still using dashoffset though, which is going to offset the entire path with dashes which is why dasharray is needed. I've been trying to check lengths of current dashes in the drawChase method (I won't share the fiddles until it's more sane) but still feel like I may could approach this another way with some sort of mock data that i can watch in the drawChase method and build the dasharray based on it.

Well that's the idea more or less, but I only want 3 dashes to run through the path. Does that make sense? This is why I'm using dash array instead of dash offset.

Hey guys, I'm not too sure if I've simply been staring at this too long or if I'm just having one of those off days where simple math decides it's gonna kick my teeth in. I'm trying to animate the stroke-dasharray of an svg path with multiple dashes "chasing" one another through the path --similar to christmas lights that chase one another in a sequence. I've roughly figured out what I need to do here, but I can't seem to figure out a way to address a second and third dash to enter in. Basically, I need to start one, and then continuously check to see if the current dash(es) have animated far enough to start entering in the subsequent dash and similarly I think I'll need to check the same "offsets" when it reaches the end of the line. Anyone feel like taking a stab at a sane approach for this? If even just high level of how I might store some "mock" variables to watch in order to make the process easier, etc. As always any help is greatly appreciated! P.S. - A side note is I'm not sure why the ease isn't working on the "chase" (it's set to Bounce atm for ease of visually seeing if the ease is being picked up)

Was actually looking at something to do with this today and ran across this site. It may even be the best visual representation I've come by, and it's interactive. Read up on SVG paths too.

Bezier curves use control points. There are several resources out there for this. Just give this a go: https://www.google.com/search?q=calculating+bezier+curves That primer link is very informative. Hope this helps.

Was just editing my last response.. Yeah, looks like TweenLite can handle it so long as the ease pack is included. Thanks a lot for the quick assist @Diaco.AW!

TweenMax is required here right? Can't do it with TimelineLite alone?

Doesn't this effectively apply the elastic ease to each tween though? I want the ease on the timeline.

Can anyone tell me if this should work and I've just missed something? The idea is to create a set of tweens with linear ease, add them to a timeline with an ease and see the magic happen. Here's is a completely stripped down easily readable example of what I'm trying to do: http://jsfiddle.net/anthonygreco/g7a5zeek/ $(function() { var tl = new TimelineLite({ ease: Bounce.easeOut }), totalDuration = 2, divLength = $('#container div').length; $('#container div').each(function(i) { var duration = totalDuration / divLength, tween = TweenLite.to($(this), duration, { left: 350, ease: Linear.easeNone }); tl.add(tween); }); });

You just need to move the transform-origin into the css object: http://codepen.io/anon/pen/gbRvRV and the value should be 50% 50%.

@Carl, Awesomeness all around. I just switched jobs this week (the last one wanted my sanity) and should have more time to put into it again soon. Will keep you all apprised of updates!

Hi @JGM.io! Here's a link to another thread with more details: http://greensock.com/forums/topic/8604-snapsvg/?p=37893 I haven't had any time to maintain the logic and I think it's high time it needs it. Especially now that there's also http://greensock.com/drawSVG thanks to @Jack!

FYI, You may look at the successor of superscrollorama called scroll magic. http://janpaepke.github.io/ScrollMagic/

I use Quicktime, since I'm on a Mac then I run the raw capture through Handbrake (there's a windows and a mac version) with whatever custom compression settings I see fit.

Answers it excellently. Thanks Jack!

Curious, does anyone know how to create a staggerTo() tween with a group of three.js elements. When I tween a position/scale/rotation using .to() it looks like this: TweenMax.to(element.scale, 6, { x: 0.4, y: 0.4, z: 0.4, ease: Quad.easeOut }); I've found a way to make it work, basically just loop through and create a new array. I'm really just curious if anyone has a better way. This is what I have currently: $.each(elements, function(index, elem) { staggerElements.push(elem.position); }); returnData.push( TweenMax.staggerTo(staggerElements, 12, { x: 0, y: 0, z: 1.5, ease: Quad.easeOut }, 0.1) );

I'm not sure I fully understand your issue. You reference the use of angular, yet I see nothing angular related. Why doesn't Snap's select method help? It is the Snap way of selecting elements of a loaded fragment in the callback of the load method. You seem to be using jQuery's find method which I'd imagine is traversing the entire DOM. If you'd like to PM me with more details I'd be happy to try and assist. As for benefits of the plugin, I guess you'd have to try it out and make that judgement yourself. Though, I've recently discovered that there are some limitations I haven't worked out such as animating points of a polygon, where using the "dummy object" is the only resolve until I have the time to update the plugin.

Snap has a select() method: http://snapsvg.io/docs/#Element.select you can use in the callback where you're currently appending the fragment that was loaded. I actually use the method in my previous post JSFiddle example. Assuming you're using my SnapPlugin: function SVGLoaded(data) { var element = data.select('#someId'); var elements = data.select('.someClass'); TweenLite.to(element, 1, { snap: { width: '+=100', height: '+=100' }, ease: Quad.easeInOut }); TweenLite.staggerTo(elements, 1, { snap: { width: '+=100', height: '+=100' }, ease: Quad.easeInOut }, 0.2); s.append(element); s.append(elements); }; *untested code but should give you an idea.

So famo.us is a new javascript framework with a bit of a different angle in that it replaces the browser's rendering engine with its own, which is actually written in JavaScript. (resource: http://developers.slashdot.org/story/13/12/04/2047255/famous-to-open-source-rendering-engine-replacement-javascript-framework) I've been playing around with it a few days so far and looks extremely promising, but also in infancy. I will be keeping a very close eye on it progress. It's on github (https://github.com/Famous/famous) already despite the "wait line" on the site (which is mainly for docs, tutorials, etc) I guess the reason the links may not be working/greyed out is due to the fact that they're in the middle of launching and are only allowing so many people in initially. (a.k.a. generate some hype ) As for comparing Famous to GreenSock, IMHO I think that's impossible to do since it's a different rendering engine entirely. So maybe not quite apples to oranges, but perhaps organic vs synthetic apples. lol idk...

Hi all, While I don't think there's anything wrong with the "dummy object" method described above, I've been using Snap.svg for a while after using Raphael and when I made the move to Snap I did a basic port of the RaphaelPlugin to Snap.svg. I've used it rather extensively and haven't found any issues or Snap-related properties (cx, cy, etc) I couldn't tween yet, but haven't had the time to run extensive tests yet either. I have a fork of GreenSock here: https://github.com/anthonygreco/GreenSock-JS which contains the SnapPlugin and a repo with just the plugin here: https://github.com/anthonygreco/GSAPSnapPlugin. Usage is identical to the RaphaelPlugin. (using "snap" in place of "raphael") JSFiddle Example: http://jsfiddle.net/anthonygreco/MAtwr/ If anyone uses this and finds any issues feel free to add the issue to github, submit a pull request to the forked repo, reply to this thread, or PM me. Happy Tweening!

So I reached out to the Snap community as well and I've found what's supposedly a "caching mechanism" of sorts that is now commented out (https://github.com/adobe-webplatform/Snap.svg/blob/master/dist/snap.svg.js#L4430) in my Snap source (which turns out, the number of "Timer Fired"s is equal to the number of elements in the scene and as many as 50 times in a second... agreed a TON) and I still see the issue: http://jsfiddle.net/anthonygreco/Kpe67/ so now I'm really lost as to what is causing this. I am thinking more and more that I need to move away from SVG for this project, but want to as if there is any chance there's anything else I should look at benchmarking first?

Thanks for clearing up staggerTo Jack. That's what I thought after checking the source, but wanted to be certain I wasn't looking right over something. --- It's been a long week..... So, for a JSFiddle: http://jsfiddle.net/anthonygreco/Kpe67/ Now this is weird... In my actual project I just created ONE rect that was rotating and was experiencing the performance issue, but in JSFiddle I have to up the number of elements to see performance decrease. Which actually makes perfect sense to me and may well be eluding to the fact that I may have other things going on in my logic that aren't immediately apparent that are adding to this issue. Either way the performance issue does become noticeable as you add more elements. Just swap the commented out line for the howMany variable to see what I'm referring to. So my question of concurrent animations still stands. Is this something that's simply a limitation of hardware/browsers in general? Is there any type of "caching" or other ideas I could possibly do to help mitigate the issue? I know there was a link I saw (that I can't find now ) that demonstrated the power of GSAP over other animation libs (i.e. jQuery's animate()) and remember that I upped the limits of the particles being emitted and was blown away at how well GSAP performed so I feel like there's a way to fix this. I'm about to swap out the tween.to()'s for timelines to see if that has any weight on the matter. I welcome any other thoughts or ideas on the matter.

Upon further debugging I've discovered that this seems to be more of an issue of concurrency. For instance, I've removed all of the elements in place with only one rectangle in one svg node that has an endless tween like so: TweenMax.to(rect, 3, {snap: {rotation: 360}, ease: Linear.easeNone, repeat: -1, repeatDelay: 0}); As soon as any other animation is triggered (i.e. a hover event of a DOM element that just fades in/out a div on over/out) the rotation animation jerks for a millisecond and the hover animation is choppy from beginning to end. I'm gonna set up a JSFiddle shortly with an example, but thought I'd let you know my new finding since I'd imagine this is something you've seen before, I'm just wondering if it's something that can be mitigated. Fiddle to come...