Search the Community
Showing results for tags 'TimelineMax'.
Found 486 results
-
Hi Is there a way to to add a listener when the timelinemax instance reaches a label or would I have to use TimelineMax.currentLabel on the onUpdate to see the label change? Thanks!
-
I'm propably missing something stupid >_< . My code is very simple: mainTimeline = new TimelineMax( { onComplete: test() } ); mainTimeline.append(TweenMax.from(header,2,{x:-header.width})); Why on earth "test()" function would fire instantly without waiting for tween to end? What am I missing? Regards. Luken
-
I am new to both Jquery and TweenMax but so far I love using TweenMax js. I took the code from http://www.snorkl.tv...script-preview/ exploding bunnies example and tweaked it a bit to get a effect of multiple rain drops falling on the screen. It looks good in firefox, chrome and safari but in ie 7 and 8 (I don't currently have access to ie 9) it is not displaying correctly. There is only 1 rain drop displaying and it is grey instead of the white png. Also I have it paused when loaded and have a click event to play the tween but it is playing upon load. Any ideas of what I am doing wrong? here is my code: var rainDrops = $(".rainDrop"); var frame3Tl = new TimelineLite({paused:true}); rainDrops.each( function (index){ var delay = 1 + (Math.random()*2); var duration = 1 + (Math.random()*3); var left = 7 + (Math.random()*840) + "px" var rainDrop = $(this); $(this).css({'left': left}); frame3Tl.insertMultiple([TweenMax.staggerTo(rainDrop, duration, {css:{rotation:1}, ease:Power1.easeOut, delay:delay, repeat:-1}), TweenMax.staggerTo(rainDrop, duration, {css:{rotate:"1deg", top:"504px"}, ease:Linear.easeNone, delay:delay, repeat:-1}), ]); } ) Thanks for your help!
-
Hi. I'm creating a project that uses TweenLite to tween easel properties. Everything goes right all the time, except for when I try to user TimelineMax.insert() to insert a tween (that doesn't tween any properties, but that I add to keep a reference to the object and to add the onUpdate-events the whole time the object should be on the easel Stage) at a certain point in my code. At all the other points in my code where I use insert() to insert a tween at a certain position, everything goes right, but not at one point. I keep getting the error Uncaught TypeError: Cannot read property '_time' of null at line 564 of TimelineMax.js.. At this line this.timeline == null. I've logged the other times I use insert() and this.timeline is never null. Also, I logged the object and it's properties, and they are also all not null or undefined. I'm pretty stuck, do you have any idea? Thanks! (For reference, the insert code i use:) this.timelineMax.insert( TweenLite.to( object.easel, object.duration, { } ), object.start ); -
I know you can set a defaultEase for TweenMax, but how can I set it for a TimelineMax? I've tried... var tl = new TimelineMax({defaultEase:Power2.easeInOut}); ...and other variations but nada happens. Is it possible? Thanks
-
Hey Guys, The TimelineMax method getLabelsArray() will not work for me. Here is a super simplified version... var tl = new TimelineMax(); tl.append('start'); tl.to($('#elem'), .5, {css:{top:'200px'}}); console.log('yo'); // This one shows in console var labels = tl.getLabelsArray(); console.log('yo2: ' + labels[0].name); // This does not Has anyone been able to get this to work? All I'm really trying to do is play a label by index, and this is the only way I can see to do it. Thanks for any help
-
Hi greensocks, I'm creating an animation sequence for an element in a site that I'm trying to get to start once the whole div has loaded. My difficulty isn't in starting the animation but in having the entire animation play. From my understanding of TimelineMax, each animation will play in order so if the 1st animation in the timeline doesn't execute, the following animations won't either. Am I wrong in that understanding? Here's what I've got now: <script language="JavaScript" type="text/javascript"> function playBdayTimeline() { var bdaySurprise = document.getElementById("headline1"); var ourBday = document.getElementById("headline2"); var bdayPromoGift = document.getElementById("promoGift"); var bdayPromoDay = document.getElementById("promoDay1"); var timelineIntro1 = document.getElementById("timelineIntro1"); var timelineIntro2 = document.getElementById("timelineIntro2"); var timelineIntro3 = document.getElementById("timelineIntro3"); var promoDeal = new TimelineMax(); promoDeal.from(bdaySurprise, .7, {css:{autoAlpha:0, top:'-20px'}, ease:Quad.easeOut}); promoDeal.from(ourBday, .6, {css:{autoAlpha:0, top:'-15px'}, delay:-.4, ease:Quad.easeOut}); promoDeal.to(bdayPromoGift, .6, {css:{alpha:1, scale:2}, delay:-.4, ease:Quad.easeOut}); promoDeal.to(bdayPromoDay, .6, {css:{autoAlpha:1}, delay:-.1, ease:Quad.easeOut}); promoDeal.from(timelineIntro1, 1, {css:{autoAlpha:0, top:'-15px'}, delay:-.2, ease:Quad.easeOut}); promoDeal.from(timelineIntro2, 1, {css:{autoAlpha:0, top:'-15px'}, delay:-.4, ease:Quad.easeOut}); promoDeal.from(timelineIntro3, 1, {css:{autoAlpha:0, top:'-15px'}, delay:-.4, ease:Quad.easeOut}); promoDeal.from(introSlider, .6, {css:{autoAlpha:0, }, ease:Quad.easeOut}); } </script> From the above, the second half of the timeline (bottom four of the promoDeal timeline) animate in beautifully smooth sequential order. However, they do so after the first half of the timeline just "pop" in... no animation whatsoever. If I change any of the properties in the first four lines (ie.change to scale: .5), they take but they don't animate so something seems to be working there... What's going on here? Why would only part of my timeline execute? Thanks for any ideas!!
-
Hi guys, context: im creating an infographic where tv-ratings are being visualized. I have a huge TimelineMax where 1000 dots (mc's) are constantly being tweened. This timeline is attached to a standard Slider from the Flash Components. Now, if i let the timeline play, no errors occur. When i skip ahead or back in time, some dots (that were in the middle of tweening) just stop playing and just stand there half-way.... please check it out herrre: http://dominggus.nl/...fstuderen/temp/ this is what happens when you skip/drag the slider: switch(event.type) { case UIEvent.THUMB_DRAG: mainTimeline.goto(event.value, false); break; case UIEvent.THUMB_PRESS: mainTimeline.gotoAndStop(event.value, false); break; case UIEvent.THUMB_RELEASE: mainTimeline.gotoAndPlay(event.value, false); break; case UIEvent.SLIDER_CHANGE: if (!bottomSliderGUI.playMode) { mainTimeline.gotoAndStop(event.value, false); } else { mainTimeline.gotoAndPlay(event.value, false); } break; } mainTimeline is a TimelineMax, and for each dot/mc (viewer), this is being used: mainTimeline.insert(new TweenLite(viewer, 1, {x:target.x, y:target.y}),labelTime); who can help me? what seems to be the officer, problem?????
-
I'm trying to get TimelineMax to Delay its start for 3 sec and it Doesn't work I used the methods listed in the Documentation, with no success. ill be glad for any help. This is the code I'm useing function stars_OP():void { var timeline_OP:TimelineMax = new TimelineMax(); var clips_OP:Array = getChildrenOf_OP(Object(this).phone_anim_mc.container2_mc); function buildTimeline_OP(e:MouseEvent = null):void { timeline_OP.gotoAndStop(timeline_OP.duration); timeline_OP.clear(); clips_OP = shuffleArray_OP(clips_OP); var a:int = clips_OP.length; while (--a > -1) { var Randsize_OP = Math.floor(Math.random()*(1-0+1))+0; var clip_poz_x_OP = clips_OP[a].x; var clip_poz_y_OP = clips_OP[a].y; var poz_x_Rand_OP = Math.floor(Math.random()*((clip_poz_x_OP+250)-(clip_poz_x_OP)+1))+(clip_poz_x_OP); var poz_y_Rand_OP = Math.floor(Math.random()*((clip_poz_y_OP+20)-(clip_poz_y_OP-5)+1))+(clip_poz_y_OP-5); timeline_OP.append(TweenMax.from(clips_OP[a], 0.5, {alpha:0, scaleX:Randsize_OP, scaleY:Randsize_OP,x:poz_x_Rand_OP, y:poz_y_Rand_OP, blurFilter:{blurX:20, blurY:20, quality:1}, ease:Expo.easeOut}), -0.24); } timeline_OP.gotoAndPlay(0); } buildTimeline_OP(); } I tried this [left]var timeline_OP:TimelineMax = new TimelineMax({Delay:3});[/left] and timeline_OP.Delay = 3;
-
Is there a way to persist and restore a Timeline, something like the XML methods in the TransformManager? Or is this a feature that might be considered?
-
Hello all, I'm trying to add multiple images to a blank movie clip on my stage using the addChild method in an array. After many hours I got it almost working. The only problem now is that all of my arrayed images tween at the same time. They don't stagger. Is there any way to take the code that I have done and have each image tween, then the next, and so forth? I also need the timeline to repeat indefinately after all arrayed images have finished (which is why I have nested timelines). Thank you! var myTimelineCardMain:TimelineMax = new TimelineMax({repeat:-1}); var sArray:Array = [] var imgBD:BitmapData=new card_28(315,355); var card1:Bitmap=new Bitmap(imgBD); card1.x = -315; card1.y = -355; var img1BD:BitmapData=new card_21(315,355); var card2:Bitmap=new Bitmap(img1BD); card2.x = -315; card2.y = -355; sArray.push(card1,card2); for(var i:int = 0; i < sArray.length; i++) { card_main.addChild(sArray[i]); } var myTimelineCard:TimelineLite = new TimelineLite(); myTimelineCard.insertMultiple([new TweenLite(card_main, 0, {y:467, x:920}), new TweenLite(card_main, 3, {rotation:-9, ease:Back.easeOut}), new TweenLite(card_main, 3, {delay:3, rotation:200, ease:Back.easeOut})], 0, "sequence"); myTimelineCardMain.insertMultiple([myTimelineCard], 0, TweenAlign.SEQUENCE, 3);
