Jump to content
GreenSock

Search the Community

Showing results for tags 'Timelinemax'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. This tweet is where it started https://twitter.com/gryghostvisuals/status/556154294823813120 I'm doing a series of tutorials and articles for Tuts+ on TimelineMax so I'm interested in types of effects and demos readers would like to see included in this series. Thanks in advance for your ideas posted \o/
  2. Hey, guys! I'm wondering the best way to setup a somewhat complex situation in which I can control tweens (TweenMax) from multiple timelines (TimelineMax) and/or from timelines and the tweens themselves. This is too involved for a CodePen, but it's likely just conceptual and I'll clarify, further. Here are some givens: I'm using drawSVG, but I think the analogy can apply to any tween. For simplicity, imagine a simple x tween in all cases 5 sets of 5 unique tweens (resulting in 25 unique tweens). need to animate each set in sequentially, but out simultanously. that is, "1,2,3,4,5 in" and "12345 out." The rub is that I want to be able to interrupt at any time. If this is clear, I could end up with "1,2,3 (half way) in", interrupt, and then "123.5 out" That is, 1 and 2 will finish, 3 will be half-way complete, I interrupt, and the 1, 2, and the visible half of three all tween out at the same time. When I was able to animate in and out sequentially, this was super easy because all I had to do was create one timeline and reverse it. Most important to this question, I could interrupt any time and everything looked beautiful. Half-complete still reversed seamlessly. When I was asked to switch to sequential in and simultaneous out, I was no longer able to reverse with a single timeline.reversre() call any time I wanted. For my first test, I created two timelines: sequential and simultaneous. I could easily play sequential in, then set the progress of simultaneous to 1 and reverse that timeline out. All fine, but I was no longer able to interrupt the switches. For example, half way through sequential in, the non-complete timelines would obviously jump to their ends to simultaneously reverse out. Then I wondered if I could create just the 5 sequential timelines but tell each tween to reverse individually (instead of reversing the timeline). And, I would then cleanup using progress() to make sure the timeline was at 0, etc. That is: "group1timeline.play()"; interrupt half way through the 3rd tween; "all group1 tweens reverse"; group1timeline.progress(0). But, I got some odd results. I moved on to thinking about synchronizing progress for each corresponding tween in the sequential and simultaneous timelines, but thought that too complicated. Next I thought about not using TimelineMax at all. . Put each tween of a group in an array and then play and reverse each one. That seems like it will work. How would you recommend setting up 5 sets of tweens so that I could sequentially animate each set in, but interrupt and simultaneously animate only the progress thus far, out simultaneously?
  3. Using TimelineMax and TweenMax, when doing a zero duration tween to adjust an object's visibility at a point on a timeline, the visibility is toggled immediately instead of in sequence. Example var text = some text object var img = some image object img.css('visibility','hidden') var tl = new TimelineMax() tl.to(text,3,{left:500}) tl.to(img,0,{visibility:'visible'}) tl.from(img,3,{left:500}) The image object will be visible at the start of the timeline animation, instead of after the text object animation. Although it works if you do: tl.to(img,0.001,{visibility:'visible'})
  4. In this demo, am I missing something that prevents tweenTo from working when seek works just fine? I'm sure I'm just totally overlooking something simple... Thanks!
  5. Is it possible to move labels around dynamically after they have been created? The reason I ask is that the parameters of my tweens are changing dynamically in realtime. If the start and end point of the tween moves, then I have to remove the tween from the timeline, and insert a new tween with the new parameters. What would be very nice, is if I can create the tweens based on labeled positions, and then move those labels dynamically...with the start points of those tweens moving accordingly. Is this possible? Thanks.
  6. Hey guys! I have a div with text placed inside a container with a flexible width which means that depending on the screen width the height of the div will change. I would like to tween the height and alpha so that they start at height: 0px and autoAlpha:0 and on click the height increases to 100% of the text as it fades in. The provided example is part of a much larger timeline in my project and all other aspects of my gsap code are working great. I have read through other demonstrations using the set property, but I have not seen this working with TimelineMax, only with TweenMax. Is there something else I need to do to get my text container to start at 0 and tween to auto? Much appreciated!
  7. Hello, I am having a little trouble with finding a good equation for animating text with a fixed play length. A user needs to be able to tell me: "I want this animation to play for [x] amount of seconds" I am using TimelineMax.staggerFrom with a SplitTextField to make this happen. I first need to ensure my understanding of StaggerFrom is correct. In this case, lets say we are doing a fade in by character. Here is my understanding of how this should work: T = total time (2 seconds in this case) C = total number of characters (let' use the word "Hello", so this is 5) A = time for each character to fade in S = stagger time (time between letters starting to fade in) I inferred from the documentation that the total time of a StaggerFrom could be calculated by the following equation: T = (S * (C-1) + A) example: "Hello" in 2 seconds 2 = (.35 * (5-1) + .6) This is saying that the total time equals the total of all the stagger times plus the time it takes for 1 character fade in. The difficult part, which I am having trouble with, is using different numbers for the stagger time and fade time, as I want the characters to overlap on the fade in. I believe my equation for how the StaggerFrom is working is incorrect, since my simulations in Excel all work but when I port it over to actionscript (and yes I checked the variables at runtime and they are matching my simulation), it only plays for around 1 second. If anyone could help correct my understanding of how StaggerFrom works, I would greatly appreciate it! Thank you!
  8. Is there is any way to reverse a timeline in a different way compare to when it plays for example in my case, I would like to move elements in the scene one by one but when it comes to reverse the scene I am thinking of moving all the elements out of the scene at once ! So is there a shortcut for this or I have to write another timeline? This is my timeline code : var tlThree = new TimelineMax(); // SP tlThree.add( TweenMax.to(".layer-thirtyFour", 0.35, {visibility:"visible", top:0}) ); tlThree.add( TweenMax.to(".layer-thirtyFive", 0.35, {visibility:"visible", left:0}) ); tlThree.add( TweenMax.to(".layer-thirtySix", 0.35, {visibility:"visible", top:0}) ); tlThree.add( TweenMax.to(".layer-thirtySeven", 0.35, {visibility:"visible", left:0}) ); tlThree.add( TweenMax.to(".layer-thirtyEight", 0.35, {visibility:"visible", left:0}) ); tlThree.add( TweenMax.to(".layer-thirtyNine", 0.35, {visibility:"visible", top:0}) ); tlThree.add( TweenMax.to('.detail[data-title="seaLevelRise"]', 0.35, {display:"block", alpha:1}) ); tlThree.add( TweenMax.to('.up[data-dest="greenHouse"], .down[data-dest="cleanEnergy"]', 0.35, {delay:0.2, display:"block", alpha:1}) ); Normally I use .reverse method like this : tlThree.reverse() But it reverses the timeline one element at a time and in some special cases I would like to reverse the timeline as a whole in a way that all elements move out of the page in 0.35 s time, please note that my CSS styles for these layers are like this for example : .layer-thirtyNine { visibility: hidden; position: absolute; left: 0; top: -100%; } So if this goes out of the page as a whole in any direction does it interfere with CSS ? Thanks in advance. PS: www.12wave.com Has done this using GSAP but I could not find out how!
  9. I have a clickable icon which when clicked by user I want to reverse a timeline and after the reverse process is finished play another timeline but the point is that I want to call a function just before the second timeline starts to play so here is the functions I would like to call : function day() { $('section').removeClass('night').addClass('day'); } function night() { $('section').removeClass('day').addClass('night'); } and here is the click function I wrote: $('.up').click(function() { TweenMax.delayedCall(0, function(){tlFour.reverse()}); TweenMax.delayedCall(5.4, function(){tlThree.call(day, 0); tlThree.play()}); } In which the second 5.4 delay is the time needed for tlFour timeline reverse to finish and here are my timelines : var tlThree = new TimelineMax(); tlThree.pause(); tlThree.add( TweenMax.to(".layer-twentyTwo", 0.5, {left:0}) ); tlThree.add( TweenMax.to(".layer-twentyThree", 0.5, {top:0}) ); tlThree.add( TweenMax.to(".layer-twentyFour", 0.5, {top:0}) ); tlThree.add( TweenMax.to(".layer-twentyFive", 0.5, {left:0}) ); tlThree.add( TweenMax.to('.detail[data-title="cleanEnergy"]', 0.5, {alpha:1}) ); tlThree.add( TweenMax.to('.up[data-dest="greenHouse"]', 0.5, {delay:0.2, display:"block", alpha:1}) ); tlThree.add( TweenMax.to('.down[data-dest="greenPlanet"]', 0.5, {delay:0.2, display:"block", alpha:1}) ); var tlFour = new TimelineMax(); tlFour.pause(); tlFour.call(night, 0); tlFour.add( TweenMax.to(".layer-twentySix", 0.5, {alpha:1}) ); tlFour.add( TweenMax.to(".layer-twentySeven", 0.5, {top:0}) ); tlFour.add( TweenMax.to(".layer-twentyEight", 0.5, {left:0}) ); tlFour.add( TweenMax.to(".layer-twentyNine", 0.5, {top:0}) ); tlFour.add( TweenMax.to(".layer-thirty", 0.5, {left:0}) ); tlFour.add( TweenMax.to(".layer-thirtyOne, .layer-thirtyTwo", 0.5, {left:0}) ); tlFour.add( TweenMax.to(".layer-thirtyThree", 0.5, {top:0}) ); tlFour.add( TweenMax.to('.detail[data-title="greenPlanet"]', 0.5, {alpha:1}) ); tlFour.add( TweenMax.to('.up[data-dest="cleanEnergy"]', 0.5, {delay:0.2, display:"block", alpha:1}) ); tlFour.add( TweenMax.to(".review", 0.5, {delay:0.2, display:"block", alpha:1}) ); Please note that tlFour.call(night, 0); is for the time that tlFour timeline plays as a result of another click and I would like to reverse that but as the timeline reverse method does not reverse calling functions I had to call the day() function to reverse that but the problem is that this function executes after tlThree is played completely but I want it to be called just before that, any other Ideas on how to write this code in a better way is also appreciated because I am new to GSAP, Thank you PS: for tlFour the night() function is called just before the timeline begins to play and that is fine but for tlThree this is not happening and that is the problem.
  10. Hi guys, so about a year ago i used teenmax v 1.12, and it worked fine. I updated to the latest version somehow the same code doesn't work anymore. Can someone point me to the new changes in the codes. Or maybe if my code is wrong. Thx. TweenMax.to($("#cover"), 5, {css:{alpha:0}}) The above is the code. If i replace v 1.14 to the old version, somehow it works. By the way i'm using this in adobe Air HTML.
  11. So I am using .reverse() method for my Timeline in some cases, The questions is how could I jump to the first frame instead of waiting for it to complete the reverse ?
  12. Hello! I posted once before about a similar problem, and I was able to workaround that problem easily, but this one is a tad different. In the codepen sample I provided, there are 6 color blocks. Each one is animated in its own timeline, and each timeline is then nested in a master timeline. In this master timeline, I set up a pause at the end of each nested timeline, so that playing the timeline only plays one scene (or, in this example, one animation) at a time, then pauses and waits for the user to press "continue". It is also paused at the start, so you must press "continue" to see the first block. In the linear sequence, all is well: run the codepen and press continue at the end of each block's animation and the blocks animate in when and as expected. The following steps, however, cause a problem: 1. Run the codepen 2. Press continue to display the red block 3. Keep pressing continue and finish the sequence so that all blocks are on-screen 4. Press the button labeled "Orange" and see the orange block animate in as expected 5. Press the button labeled "Blue" and see the green block animate in As you can imagine, the blue block should have been the one to animate in. In addition, I am firing events on each block animation's start and finish, and the events fired for step 5 are two start events for the "green" block and 1 finish even ("green-done") for the green block. The "blue" event never fires. I'm at a loss. Anyone have any idea why this isn't working, or what I'm doing wrong? Effectively, having these "jump-to-scene" buttons is crucial for a project, so any help would be very valuable. Thanks, Frank
  13. Hello, I am having a little trouble with the SplitTextField and need a little direction. I cant find a good way to explain this, so I'm going to describe it bluntly. Example: I have two animations in a timeline, 1 should fade text in, the next should use a splittextfield to fade out by word When I run the animation as a whole, the text appears after the entire animation is complete (once the splittextfield has been disposed) My Theory: Since I am adding all the animations to a master animation at once, the splittextfield is being created right away and looking at the current state of the textfield. Since it has an alpha of 0, the splittextfield is created with an alpha of 0 and never shows on the screen. Below is my code of each item: // FADE IN /**Text Fades In From 0 to 1 (Alpha)*/ public static function FadeIn(target:Object, time:Number):TimelineMax{ var t:TimelineMax = new TimelineMax(); TweenMax.set(target,{alpha:0}); t.add(TweenMax.to(target, time, {alpha:1})); return t; } // FADE OUT BY WORD /** Text fades out by word */ public static function FadeOutByWord(target:TextField, time:Number):EnhancedTimelineMax{ var stf:SplitTextField = new SplitTextField(target, "words"); var t:EnhancedTimelineMax = new EnhancedTimelineMax({onComplete:cleanup, onCompleteParams:[stf]}); t.splitTextField = stf; t.add(TweenMax.staggerTo(stf.textFields, time / 2, {alpha:0}, (time / stf.textFields.length), cleanup, [stf])); return t; } // CLEANUP /** Cleans up the Split Text Field */ private static function cleanup(mySTF:SplitTextField):void{ mySTF.destroy(); } // TEST PROGRAM masterTimeline = new TimelineMax(); createTextField("MAKE SOME NOISE!!!!\n GO DIAMONDBACKS!"); masterTimeline.add(StandardAnimations.FadeIn(text,4)); masterTimeline.add(StandardAnimations.FadeOutByWord(text,4)); masterTimeline.play(); My Goal: I would like the text to fade in to an alpha of 1, then I want the fade out function to fade each word using alpha from 1 to 0. My Question: If my theory is correct, how do I keep the splittextfield from being created right away? Please let me know if there is a correct method which I am missing. Thank you very much!
  14. GRDC

    Printing a timeline

    Before I go trying to reinvent the wheel, I thought I'd ask if anyone has experiencing in printing a timeline and its nested timelines/tweens in block format. What I'm envisioning are blocks whose widths are relative to their duration, contain nested elements which can be interacted with the fin-tune and/or reorder animations.
  15. I am using TimelineMax to create a sort of comic that the user can step through. At the end of each sequence of animations, I have a label to indicate the completion of a scene, a pause, and a triggerEvent function that lets my application know that we now need user interaction to continue (typically, to display a next button). Unfortunately, when the user clicks the "next" button to continue (which simply calls the play() method of the timeline), the triggerEvent function fires again, because the playhead was paused at that same frame. There are a number of solutions I am considering so that the triggerEvent function doesn't fire on play, but I wanted to first find out from folks here if there is another way I should be approaching this that is more obvious (as is frequently the case). Thanks in Advance, Frank
  16. Hello, I am having a little bit of trouble finding a way to remove the split text field from a textfield once I stop the animation its in. Long story short, I made a library which creates little timelines (sub-animations) for each animation (a timelineMax for flashing text, one for bouncing text, etc.). I give the end user the ability to combine all these little tiimelines into one big timeline, so that they may do something like the following: Text fades in, text flashes, text spins, text slides off screen All is working fine until one point. If one of those sub-animations uses a Split Text Field for its operation and the end user clicks the stop button before that sub-animation completes, the Split Text Field stays on the textField and I cannot find a way to remove it (usually the textField disappears). If needed, I can provide some code but I have a sneaky suspicion that there is a very simple and already completed solution for this exact issue. I can say that I do the following whenever the "stop" button is clicked as an attempt to fix the issue: (These are applied to the 'master' timeline) timeline.stop(); timeline.seek(0); timeline.clear(true); TweenPlugin.activate([blurFilterPlugin]); TweenMax.to(target,0,{blurFilter:{remove:true}}); Thank you in advance for your assistance!
  17. rgfx

    Pause before loop.

    Hello, Trying have the last animation sit for 0.5s before it restarts. Tried a few things that are commented out. Dug around a bit with no luck. window.onload = function() { var logo = document.getElementById("logo") // tweenBtn = document.getElementById("tweenBtn"); //var tl = new TimelineMax({repeat:-1}) var tl = new TimelineMax({repeat:-1}) //logo will animate 100px to the right of its current position tl.to(logo, 0.5, {left:"+=100px"}) .to(logo, 0.5, {left:"+=100px"},"+=0.5") .to(logo, 0.5, {left:"+=100px"},"+=0.5") .to(logo, 0.5, {left:"+=100px"},"+=0.5") /* Delay Fails */ // .delay("+=0.5"); // .pause(0.5, false); // .delayedCall(0.5, function() { tween.resume();}); } Thanks for your help.
  18. Hi guys! I'm developing a mobile app with computer network animations, using GSAP. My intent is to show multiple messages to user using tl.call() function of TimelineMax, with $ionicPopup, before the animation starts. See the code: function($scope, $stateParams, $ionicPopup) { TweenLite.defaultEase = Power1.easeInOut; var tl = new TimelineMax(); tl.call(function() { tl.pause(); $ionicPopup.alert({ title: "Informação", template: "{{'SEQUENCE_NUMBER_PRESENTATION_1' | translate }}" }).then(function() { tl.resume(); }); }); //"dummy" here tl.call(function() { tl.pause(); $ionicPopup.alert({ title: "Informação", template: "{{'SEQUENCE_NUMBER_PRESENTATION_1' | translate }}" }).then(function() { tl.resume(); }); }); //more code } The problem occurs when I call tl.call() like that, one just after other, the second does not work! If I insert a kind of "dummy" statement between the two "calls", like "tl.to('.animationFrame', 0.5, {x: 0});", it works fine. Can you say what is wrong in my code, or if it is a bug in GSAP? Thanks.
  19. If you look at the Codepen demo you will see I have three buttons, each linked to a different timeline. Clicking a button starts a timeline, which then pauses. I have two issues: 1) I don't want a button click to start a timeline if one is already active. I tried changing the test to if ( ( timelines[1].progress() === 0 ) && ( !timelines[current].isActive() ) ) { but that doesn't work. 2) My button code would obviously be better in a for loop, but if I do that JSLint says I shouldn't declare functions within a loop. I've googled for solutions but what I've found has been hacky or inelegant. Any ideas how I can solve that? I've been using GreenSock for about a week, and I love it! Great design.
  20. Is there a way to set a callback after instantiation of a TimelineMax object?
  21. import com.greensock.*; import com.greensock.easing.*; TweenLite.defaultEase = Linear.easeNone; var tl:TimelineMax = new TimelineMax(); tl.add( TweenMax.to(mc1,2, {x:"500"}),0.5 ); tl.add( TweenMax.to(mc2,2, {x:"500"}),1 ); tl.add( TweenMax.to(mc3,2, {x:"500"}),1.5 ); tl.add( TweenMax.to(mc4,2, {x:"500"}),2 ); tl.add( TweenMax.to(mc5,2, {x:"500"}),2.5 ); stage.addEventListener(MouseEvent.CLICK,Rewind); function Rewind(e:MouseEvent) { tl.tweenTo(0); } Hi, I'm trying to tween a TimeLine to a certain time in the timeline (0, in this case). Is it possible to control how quickly this it tweened to? even adding easing? Something like tl.tweenTo(0,2,{ease:Sine.easeInOut}); Thanks, Darren
  22. Hi all, I'm doing a front page with 5 animations where one fades away in place of another, and so on, and then it loops. Rather than write one enormous hideous looping timeline I thought I'd make each of the animations a separate timeline and use callbacks to trigger subsequent timelines and JQuery to fade the relevant DIVs in and out. A condensed version of my code is below. The callbacks work great until I get to the last animation (vr_pan5). It fades in the DIVs required to replay the first animation, but then doesn't restart the first animation (vr_pan1). I tried shuffling the order of the timeline declarations in the code. The issue seems to be an inability to play a timeline at the top of the code, after having played a timeline further down. I also tried moving code in and out of the window.load function, but that didn't make a difference either. Sorry for asking what is essentially a Javascript question and not a Greensock question! Also, sorry for not creating a codepen; I figured a glance at my semi-pseudocode would be enough for someone enlightened. Code follows: var vr_pan1, vr_pan2, vr_pan3, vr_pan4, vr_pan5; vr_pan5 = new TimelineMax({paused:true,repeat:0, onComplete:nextAnim, onCompleteParams:["#fg5", "#bg5", "#fg1", "#bg1", vr_pan1]}); vr_pan5 .add("start") //tween some stuff ; vr_pan4 = new TimelineMax({paused:true,repeat:0, onComplete:nextAnim, onCompleteParams:["#fg4", "#bg4", "#fg5", "#bg5", vr_pan5]}); vr_pan4 .add("start") //tween some stuff ; vr_pan3 = new TimelineMax({paused:true,repeat:0, onComplete:nextAnim, onCompleteParams:["#fg3", "#bg3", "#fg4", "#bg4", vr_pan4]}); vr_pan3 .add("start") //tween some stuff ; vr_pan2 = new TimelineMax({paused:true, repeat:0, onComplete:nextAnim, onCompleteParams:["#fg2", "#bg2", "#fg3", "#bg3", vr_pan3]}); vr_pan2 .add("start") //tween some stuff ; vr_pan1 = new TimelineMax({paused:true, repeat:0, onComplete:nextAnim, onCompleteParams:["#fg1", "#bg1", "#fg2", "#bg2", vr_pan2]}); vr_pan1 .add("start") //tween some stuff ; function nextAnim(fadeout_div1, fadeout_div2, fadein_div1, fadein_div2, new_anim) { $(fadeout_div1).fadeOut(); $(fadeout_div2).fadeOut(); $(fadein_div1).fadeIn(); $(fadein_div2).fadeIn(); var o = new_anim; o.restart(); } $( window ).load(function() { vr_pan1.play(); }); Thanks, eh.
  23. Hey there guys! I've spent a good deal of time trying to figure this out - so now I've decided to ask a bit of help. When running and reversing timelines, the properties might change. Is there a way of updating these properties on the fly? I've come up with a small example, check out the codepen! Please let me know if you need me to clarify anything
  24. This may be obvious, but I was wondering the best practice for dealing with Timelines on rollover/out states? Specifically I do a Timeline animation on rollover of an object (using jQuery's hover()) — on rollout I want to kill that timeline and tweenback — I use a simple TweenMax on the rollout because I don't simply want to reverse the Timeline (that would be the obvious and elegant solution), as the 'out animation' is different from the 'in animation'. The best I could come up with is to store the Timeline in the object, and then kill it on rollout (myTImeline.kill()) and then do the 'out animation'. Is there a more elegant way? I take it because a Timeline is a complex thing that there's no equivalent to TweenMax's 'kill all tweens of this object'?
  25. I am having some issues related to tweening HTML elements in 3d — specifically <li>'s in this case. I'm working on a site which is generated by PHP and have a menu generated for me of this type (the real menu is longer) <ul id="menu-main" class="menus menu-secondary sub-menu sf-js-enabled"><li id="menu-item-42" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-42" style="visibility: visible; opacity: 1; transform: translate3d(0px, 0px, 0px);"><a href="http://whatever.com/category/about/">About</a></li> <li id="menu-item-1350241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1350241" style="visibility: visible; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="http://whatever.com/search/">Search</a></li> <li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47" style="visibility: visible; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="http://whatever.com/category/popular/">Popular</a></li> </ul> Wanted to fool around with some simple GSAP animation, and all works fine but I cannot get the li's to tween rotationX or rotationY within the jQuery hover callbacks. rotationZ works. If someone could point out the obvious point I'm missing I'd be grateful. initMenus(); function checkMenuItem(theTween) { if ($(theTween.target).hasClass('current-menu-item')) { tl = new TimelineMax(); tl.to(theTween.target,.25,{ease:Quad.easeInOut,scale:1.5}); tl.to(theTween.target,1,{ease:Bounce.easeOut,scale:1}); } } function menuover() { var tl = new TimelineMax(); tl.to(this,.25,{rotationX:'+=30deg',ease:Quad.easeIn,scale:1.5}); tl.to(this,.35,{rotationX:'-=30deg',ease:Quad.easeOut,scale:1.25}); } function menuout() { TweenMax.to(this,1,{ease:Bounce.easeOut,scale:1}) } function initMenus() { var tl = new TimelineMax({}); $('#menu-main li').css('visibility','visible'); $('#menu-main li ').hover(menuover,menuout); tl.staggerFrom('#menu-main li ',1.4,{onStart:checkMenuItem,onStartParams:["{self}"],alpha:0,x:"-=100",ease:Elastic.easeOut},.15,.1); }
×