Search the Community
Showing results for tags 'timelinelite'.
Found 168 results
-
If one has has a long timeline with various 'sections', which one could delineate by labels, what is the best way to know when it has played through a section? Is there a way to 'listen' for a tlmeline passing through labels — or is the best way to add a callback at the end of each section which would dispatch an Event? PSEUDO CODE _timeline.addLabel('start section 1',_timeline.totalDuration()); _timeline.to(...); _timeline.addLabel('end section 1',_timeline.totalDuration()); // can I detect when this passes? _timeline.addCallBack(dispatchAnEvent(finishedSection1),_timeline.totalDuration()); // or is this the only way? Thanks for any help.
- 2 replies
-
- 1
-
-
- as3
- timelinemax
- (and 1 more)
-
Simple question regarding TimelineLite / TimelineMax .add() with Stagger: Is it necessary to do this: tl.add([tween, tween, tween], "+=5", "normal", "stagger", 5); // shown in documentation example or would you do this: tl.add([tween, tween, tween], "+=5, "normal", 5); // what I would expect to do
-
var duration = 0.65; var tl = new TimelineLite({onComplete: function(){ tl.reverse(); }}); tl.addLabel(labels[0], 0); tl.appendMultiple([new TweenLite(help, duration, { _alpha: 0, delay: 3 }), new TweenLite(year, duration, { _alpha: 100, delay: 3 }) ]); tl.addLabel(labels[1], duration*1); // first stop tl.appendMultiple([new TweenLite(dragger, duration, { _x : getXFor(arr[1]), ease: Strong.easeOut }), new TweenLite(year, duration, { _x : getXFor(arr[1]), ease: Strong.easeOut }) ]); tl.addLabel(labels[2], duration*2); // 2nd stop tl.appendMultiple([new TweenLite(dragger, duration, { _x : getXFor(arr[2]), ease: Strong.easeOut }), new TweenLite(year, duration, { _x : getXFor(arr[2]), ease: Strong.easeOut }) ]); tl.addLabel(labels[3], duration*3); // 3rd stop tl.appendMultiple([new TweenLite(dragger, 0.5, { _x : getXFor(arr[3]), ease: Strong.easeOut }), new TweenLite(year, 0.5, { _x : getXFor(arr[3]), ease: Strong.easeOut }) ]); hi guys, im having a problem with tl.gotoAndPlay(label[0]). is there something im doing wrong here? thanks, Carlos
-
I am getting this issue where if the progress() gets set to something below 0 it goes to the end of the timeline. Is this supposed to happen?
-
Hello. Thanks for the priceless GSAP. However, not sure why stagger isn't honoured with this code: function getButtonsInAnimation(callback) { var i, spots, spot, tween = new TimelineLite({paused: true, onComplete: callback}); for(i in spots = shuffle(hotspots)) { spot = spots[i]; tween.add(TweenLite.fromTo(spot, 0.3, {scale:0, alpha:0, left:290, top:168}, {scale:1, alpha:1, left:parseInt(spot.css('left')), top:parseInt(spot.css('top')), ease:Expo.easeOut} ), undefined, 'start', 0.05); } return tween; } As you can see, I'm adding new TweenLite object with TimelineLite.add() method. But it executes added tweens in sequence, ignoring the stagger value. Also tried to pass stagger value to the TimelineLite constructor. Same result. As of position property of TimelineLite.add() method, I also tried values, without any luck: '+=0', 0, false. Is there something I misunderstand?
-
Hi, there— I'm hoping someone can help suss out what I'm doing wrong. I have a page that has 2 blocks of content with a couple of <li> elements to toggle between the two, like tabs. I'm using TimelineLite to show the first block, and—when toggling to the other block—TweenMax to hide the first block's elements and TimelineLite to transition in the second block's. What happens is page loads, first block appears. Toggle to 2nd block. 1st block is hidden, 2nd block appears. When I toggle back, 2nd block is hidden, 1st block appears BUT proceeds to disappear; it doesn't stay visible. The parent, #section0 is set visibility: hidden in the css and I'm using TimelineLite and TweenMax to do the hiding/revealing of the children only. For simplicity sake, I'll show only TimelineLite's first element being tweened. var tl0 = new TimelineLite(); tl0.to($('#section0 h2'), 1.2, {autoAlpha: 1, ease:Power2.easeOut}); //then my click handler: $('#subNav').on('click', 'li:not(.selected)', function() { $('#subNav li').removeClass('selected'); $(this).addClass('selected'); var idx = $('#subNav li.selected').index(); switch(idx) { case 0: //hide block 2, then show block 1 TweenMax.to($('#section1 h2'), 0, {autoAlpha: 0, overwrite:'all'}); var tlA = new TimelineLite(); tlA.to($('#section0 h2'), 1.2, {autoAlpha: 1, ease:Power2.easeOut}); //Block 1 then disappears. break; case 1: //hide block 1, then show block 2 TweenMax.to($('#section0 h2'), 0, {autoAlpha: 0, overwrite:'all'}); var tlB = new TimelineLite(); tlB.to($('#section1 h2'), 1.2, {autoAlpha: 1, ease:Power2.easeOut}); break; default: break; } }); Thank you in advance! —Victor
-
Hi guys I'm using TimelineLite to animate an html5 banner and I'm having trouble with one of the lines: here is my code: panel.animate = function () { var _tweenTime = this._tweenTime, _staggerTime = this._staggerTime, _frameTime = this._frameTime, _carTime = 5; this._timeline // frame 1 .to(expTxt0, _tweenTime, { alpha:0, ease:Power2.easeIn }, _frameTime) .to(expTxt1, _tweenTime, { alpha:1, ease:Power2.easeOut }) // frame 2 .to(expTxt1, _tweenTime, { alpha:0, ease:Power2.easeIn }, _frameTime) .staggerTo([ expTxt2, expTxt3, expTxt4, expTxt5, expTxt6, expTxt7, expTxt8 ], _tweenTime, { alpha:1, ease:Power2.easeOut }, _staggerTime) .to(renaultLogo, _tweenTime, { alpha:1, ease:Power2.easeOut }); // car animation this._timeline.add([ new TweenLite(car, _tweenTime * 2, { alpha:1, ease:Power2.easeOut } ), new TweenLite(car, _carTime, { left:373, top:158, scaleX:1, scaleY:1, ease:Power2.easeOut } ), new TweenLite(wheel0, _carTime, { rotation:"720", ease:Power2.easeOut }), new TweenLite(wheel1, _carTime, { rotation:"720", ease:Power2.easeOut }) ], 0); }; the line in question is the first line under the // frame 2 comment: .to(expTxt1, _tweenTime, { alpha:0, ease:Power2.easeIn }, _frameTime) In actionscript I would expect this to fade the expTxt1 <img> back down (after fading it up on the previous line). I've tried setting overwrite:false (not sure if that's a thing) and switching between using opacity and alpha but i can't think of anything else to do to make the code work. Can anyone see if I'm missing something please? Thanks obie
-
Ok, I am pretty new to this flash / actionscript so please help me get on track... I am trying to do the following: FirstSwf -- contains a timelinemax that animates a text from left to right SecondSwf -- contains a X number of photos that fade in and fade out with Y animation duration (number of images is dynamically parsed via XML configuration) ThirdSwf -- contains a timeline that animates a text from bottom to top (sort of like credits screen) Main.swf -- This is where I am stuck. I want to load the three SWF's into a master timeline inside main.swf and than sequentially play them one by one. I am able to load these swf's using LoaderMax but I can't seem to figure out two things: 1. How do I play them in sequence? 2. How do I control the sub timelines (within these external swf's) via the master timeline? Any help would be appreciated! Thanks
-
Hi Forum-goers, I am completely new to this platform and am having a few issues getting my timeline to run all objects at the same time. In my code I am simultaneously running another plugin that counts up numbers, which you can ignore, but I have included in the code any how. What I want to achieve is that all of the bars in the chart animate out at the same time. Any help would be great : ) $(function() { var tl = new TimelineLite({align: "start"}); tl.to( $(".bar1"), 0.5, {css:{width:"200px"}, ease:Strong.easeInOut}); $('.percentage1').countTo({ from: 0, to: 75, speed: 3300, }), tl.to( $(".bar2"), 0.5, {css:{width:"150px"}, ease:Strong.easeInOut}); $('.percentage2').countTo({ from: 0, to: 50, speed: 3300, }), tl.to( $(".bar3"), 0.5, {css:{width:"125px"}, ease:Strong.easeInOut}); $('.percentage3').countTo({ from: 0, to: 35, speed: 3300, }), tl.to( $(".bar4"), 0.5, {css:{width:"100px"}, ease:Strong.easeInOut}); $('.percentage4').countTo({ from: 0, to: 25, speed: 3300, }), tl.to( $(".bar5"), 0.5, {css:{width:"75px"}, ease:Strong.easeInOut}); $('.percentage5').countTo({ from: 0, to: 15, speed: 3300, }), tl.to( $(".bar6"), 0.5, {css:{width:"50px"}, ease:Strong.easeInOut}); $('.percentage6').countTo({ from: 0, to: 2, speed: 3300, }); tl.play() }); If answering this is easier if you see the HTML, I have hosted that here: http://yaocho-digital.com/customerhub/popular-sizes.html
-
I'm trying to create an animation (timelineLite animation) that can be controlled by a scrollbar or scrubber. a perfect example of which, is the demo swfs on the TimelineLite page as well as the TimelineMax page. The scrollbar has to allow the viewer to play the animation forward and scrub the animation in reverse. Thanks in advance!
-
Below is a snippet of part of a timeline I building using TimelineLite. There are parts before and after this sequence but this one part is giving me some trouble: timeline.insertMultiple( [ 'discharge', function () {charge.hide();}, TweenLite.to(wave, 0.25, { ease: Linear.easeNone, raphael: { r: 1, 'fill-opacity': 0, 'stroke-width': 1 } }), ], 0, 'sequence', 0); If I call timeline.play('discharge'), the function is not called - only the tween runs. I have functions in the timeline in other places but they are always after the animation and run as expected. The only way I could get this to work was to move the function to the onStart callback of the animation: timeline.insertMultiple( [ 'discharge', TweenLite.to(wave, 0.25, { ease: Linear.easeNone, raphael: { r: 1, 'fill-opacity': 0, 'stroke-width': 1 }, onStart: function () {charge.hide();} }), ], 0, 'sequence', 0); Is there something I'm missing to make this work. My first thought was that I'm adding two 0 duration items to the timeline and the playback is just starting at the first item with a real duration. I don't mind using the onStart callback but I was trying to see how flat I could keep this so I can see the sequencing of the all the processing in a consistent fashion. If anyone has ideas/alternatives, I'd be interested in your thoughts. I can provide a link to the full source and/or working demo if needed.
-
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
-
TimelineLite - callbacks added at the very end occasionally fire twice?
regan posted a topic in GSAP (Flash)
Hi everyone! I have been using GSAP flawlessly for my personal projects quite a while now. Recently, I found strange behavior of the TimelineLite class. Sometimes, when I add callback at the end of the timeline it occasionally fires twice. I have been trying to solve this for a whole day now and I am starting to believe this must be some sort of a bug in TimelineLite class. I found out, looking at the stack trace, that whenever this redundant calls happens, the callback gets called in the forceChildrenToEnd method, but the same callback has already been called in its regular callback time. Has somebody experienced this? Maybe there is some kind of workaround to make sure my callbacks won't fire twice (disable forceChildrenToEnd?) ? Thanks, Jan -
I'm working on a slide show application in javascript and got all things separated on different files but more or less this is what i'm doing: var tl = new TimelineLite(); tl.insert(TweenLite.to($('.container'), 0.5, {css:{marginLeft:'-=100px'}, ease:Power2.easeOut, delay:0.2})); tl.insert(TweenLite.to($('.container'), 0.5, {css:{autoAlpha:1}, delay:0.7})); Afterwards I reverse the timeline and add a callback to the end of the reversed timeline with call() tl.reverse(); tl.call(someFunction); The animation plays reversed but the someFunction function never gets executed? Am i doing something wrong Thanks in advance
-
flag468x90.zipHi all While trying out the new v12 GSAP with a small 468x90 banner I noticed the background image shifts a few pixels, like a quick snapping movement once it starts to loop via a label in the timelinelite. Why is this happening? The bg image is img_fundo_mc. Thanks for your help. The code: import com.greensock.*; import com.greensock.easing.*; var tl:TimelineLite = new TimelineLite({onComplete:loopBackground}); tl.append( TweenLite.from(img_flag_mc, .5, {x:"-=100", ease:Power4.easeOut}) ); tl.append( TweenLite.from(img_cursos_mc, .5, {y:"-=100", ease:Power4.easeOut}) ); tl.append( TweenLite.from(img_saber_mc, .5, {alpha:0, ease:Power4.easeOut}) ); tl.append( TweenLite.from(img_fundo_mc, 1, {alpha:0, ease:Power4.easeOut}) ); tl.insert( TweenLite.to(img_fundo_mc, 2, {x:-13, y:-16, scaleX:0.75, scaleY:0.75, rotation:-10, ease:Power3.easeInOut}), "loop"); tl.append( TweenLite.to(img_fundo_mc, 2, {x:-69, y:-168, scaleX:0.90, scaleY:0.90, rotation:10, ease:Power3.easeInOut}) ); tl.append( TweenLite.to(img_fundo_mc, 2, {x:0, y:0, scaleX:1.0, scaleY:1.0, rotation:0, ease:Power3.easeInOut}) ); function loopBackground():void { tl.play("loop") }
-
Howdy! Have a problem and was wondering if there was a quick solution... Is there a way to remove all 'onComplete' events? Here is my scenario: - I create and start tweens on movieClips with onComplete events. TweenLite.to(waveMc, 5, {alpha:0, ease:Sine.easeInOut, delay:2, overwrite:false, onComplete:showNextWave} ); function showNextWave() { trace("Still gets called?"); } - Then user initated cancel (halfway through the animation)... need to remove all movieClips - I'm using teh following to remove the movieClip: while (this.numChildren != 0) { this.removeChildAt(0); } It seems that the onComplete event still gets triggered. Is there a way to make sure the tweens and events also get destroyed?
-
Is there a way to have reverse appended to the timeline? I'm trying to make a typewriter effect, so when the letters are typed out, it'll reverse it, and type a new sentence. Kind of like you're backspacing the sentence.
-
Often in a timeline sequence I'd like to simply call a function. The best way I've figured out to do this is using a delayedCall like: myTimelineLite.append(TweenLite.delayedCall(0, myFunction)); but is there a better way? This code works, but seems a little clunky.
