chrisgannon

It's certainly possible to play and reverse a EA timeline using GSAP based on time - just bear in mind that the EA timeline is ms and GSAP using secs so you just divide by 1000. I like to use TimelineMax for this kind of thing - you basically set up a TimelineMax that is a clone of the EA timeline (i.e. has the same duration). It has an onUpdate function that, when it plays, tells the EA timeline playhead to be the same as the TimelineMax playhead. So if your EA timeline is 10 seconds just create an empty TimelineMax like this: var t = new TimelineMax({paused:true, onUpdate:playEdgeTimeline}); var emptyTween = TweenMax.to($(''), 0, {x:0}); t.add(emptyTween, 10); //get the time positions of your Edge labels - divide by 1000 to get secs var timeFrom = sym.getLabelPosition('myEdgeLabel1')/1000; var timeTo = sym.getLabelPosition('myEdgeLabel2')/1000; //add label copies to your TimelineMax at the same positions t.addLabel('myMaxLabel1', timeFrom); t.addLabel('myMaxLabel2', timeTo); //Tween it! t.tweenFromTo('myMaxLabel1','myMaxLabel2'); //playEdgeTimeline is called onUpdate (every frame) and tells //the EA timeline playhead to be at the same time as the //TimelineMax playhead - remember to multiply by 1000 for EA's timeline function playEdgeTimeline(){ sym.stop(t.time()*1000); } That's it! If you want to control that specific tween you can do things like: var myLabelTween = t.tweenFromTo('myMaxLabel1','myMaxLabel2'); myLabelTween.vars.onComplete = function(){myLabelTween.reverse();}; Hope that helps.

Are you trying to use GSAP to tween between labels or is this a pure Edge Animate timeline tweening question?

Sorry I'm not sure I follow you - can you rephrase your question? If you're asking how to drag through the main timeline it's simple. Just change these lines from: //the symbol or timeline you want to scrub through on the stage var mySymbol = sym.getSymbol("mySymbol"); to: //the symbol or timeline you want to scrub through on the stage var mySymbol = sym; This now just references sym which is the main timeline

You're welcome - I just noticed a slight bug which I've fixed. I added the line(s): //set it to its minDrag position - this also populates the _gsTransform object used in onDrag TweenMax.set(draggerElement,{ position:'absolute', x:minDrag } );

This code should help you: //the symbol or timeline you want to scrub through on the stage var mySymbol = sym.getSymbol("mySymbol"); //the symbol's total duration var mySymbolDuration = mySymbol.getDuration(); //the dragger symbol's element (the thing you're going to drag) var draggerElement = sym.getSymbol("myDraggerSymbol").getSymbolElement(); //your min and max drag values var minDrag = 0; var maxDrag = 1200; //set it to its minDrag position - this also populates the _gsTransform object used in onDrag TweenMax.set(draggerElement,{ position:'absolute', x:minDrag } ); //create your Draggable instance var scrubDragger = Draggable.create(draggerElement , { type:'x', bounds:{minX:minDrag , maxX:maxDrag }, onDrag:onDrag }); function onDrag(){ //percent through your entire drag var dragPercent = (draggerElement[0]._gsTransform.x/maxDrag); //a percentage of the entire duration of the symbol you're scrubbing through var scrubToFrame = Math.round(dragPercent * mySymbolDuration); //tell that symbol to go to and stop at that frame (well, it's miliseconds actually - your value will be in the 1000s) mySymbol.stop(scrubToFrame); }; If there are any errors in this code it's because I was up all night whilst my wife gave birth to our second son!

Hey all, All the demos, tutorials and downloads on my blog (http://chrisgannon.wordpress.com) are free - no charges anywhere as far as I know! You can buy my Edge Animate templates at http://bit.ly/17FbHAC if that's what you mean? Happy tweening!

I totally didn't read the 'get parent symbol' bit and just posted some useless stuff about referencing the composition and stage. Buh. Sorry. Need. Sleep.

From the documentation // Get the stage from the composition level, get the symbol, // and play the timeline sym.getComposition().getStage().getSymbol("symbolName").play();

This is not so much an EA issue as a general interaction issue. Consider assigning roll-out code at a later date once the initial roll-over has occurred - that way you have more control over when and how the roll-out will behave. Maybe even consider adding the interactions to the nested buttons once the menu has slid out...

Sorry Jack I totally missed your response on this. I'll dig out that project again and see if I can create a demo of it (not working). Once again apologies - I must have missed the little Notifications bell!

I have created lots of Greensock tutorials and demos on my blog chrisgannon.wordpress.com - feel free to check them out!

Hey Jack, Here's a snippet of my code. It's a set of 3D rotating pages whose rotationX property should be reset to 0 onRepeat. FYI this code is actually in a for..loop - it creates 6 tweens and pushes them into a TimelineMax instance. var tm = TweenMax.fromTo(temp_symbol_JS,10, {immediateRender:true,rotationX:rotationIncrement*i}, {rotationX:(rotationIncrement*i)+360, ease:Linear.easeNone, onStart:initWebKit, onStartParams:["{self}", i], onUpdate:positionPage, onUpdateParams:["{self}"], repeat:-1, onRepeat:resetRotation, onRepeatParams:["{self}"]}); timeline.insert(tm); //later function resetRotation (tween){ console.log("I repeated"); } I need 'immediateRender:true' in order to set the initial rotationX of each page. However I am finding that the onRepeat function is fired 6 times immediately. Is this expected behaviour or have I totally missed something? Cheers, Chris

Cheers Carl! I'm familiar with passing the tween's self reference but I didn't know the animated value would be part of that tween object. Seems obvious really and very handy - as usual Jack is pre-emptively implementing useful stuff. The second and third examples you gave are also useful - not particularly in the context of my current experiment but useful syntax to know (old AS2 stylee!) - thanks again.

Hey Jack, I'm trying to improve on the current method of applying animating values to Webkit's 3D transforms ( this is my current jQuery implementation http://chrisgannon.w...-and-greensock/ ). The new method I'm trying is as follows (and allows the tween to be used in TimelineMax etc). var myObject = {value:100}; TweenMax.to(myObject, 3, {value:400, onUpdate:applyValue, onUpdateParams:[myObject.value]}); function applyValue (val){ console.log(val); //always passes 100 }; I may be missing something here but I would expect the 'val' parameter to be updated onUpdate but it seems to only pass the initial value that was set. i.e. 100. The following obviously works but it's no longer a generic function available to any element. var myObject = {value:100}; TweenMax.to(myObject, 3, {value:400, onUpdate:applyValue, onUpdateParams:[myObject.value]}); function applyValue (val){ console.log(myObject.value); //animates from 100 to 400 }; Is there a way to access/pass the animating value? I should also point out that I am also placing the tweens in a TimelineMax so that may be the issue. Cheers, Chris

I've written a function that you can add to any jQuery element that goes some way towards encapsulating this method. It's written as an Adobe Edge demo but it works the same for normal DOM animations. You can check it out here http://chrisgannon.w...-and-greensock/ Happy 3D rotating!

Hi heyitsjayy, Yes my article/tutorial will be featured in the June edition of FFDMag - I'll post the tutorial on my blog once it's published. Sure Edge has its bugs but even for a free preview it's pretty stable now (it's currently on Preview 6 - I'm on the prerelease board and the Edge team are very good at squashing bugs). I would also argue that it's perfect for professional banner ads especially now that we have Greensock JS - the two are perfect together. Also don't forget that Edge has a 'Publish' feature now that minifies the Edge JS includes - couple that with Greensock's minified versions and together you can shave off a considerable amount of file size AND keep the amazing performance we've all come to expect (and that great performance extends to iDevices too). Happy tweening!

Yup just finished an article/tutorial for Flash and Flex Magazine called 'Moving To Adobe Edge' and in it I rely heavily on the Greensock JS library (the whole tutorial relies on it actually). I'd certainly recommend GSAP inside Edge as it's a lot quicker and it has features that, as a Flasher, I have come to rely on - familiarity does not breed contempt in this instance! The mag will be out in June but in the meantime check out my demos and tutorials at chrisgannon.wordpress.com -I've just uploaded the source for all my Edge/Greensock demos. Happy tweening!