Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'timelinelite'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. VJ90102

    debugging advice

    [see "Why can't code be in <head>?" thread as the problem has been pinned down to putting the timeline in the <head> and .play() in the <body>] Been using jQuery animation and am new to GSAP. I created a TimelineLite animation on a standalone page. The page includes all the scripts and style resources used by my live website so I could check for conflicts. It ran fine -- animation was mostly opacity changes. I put the script into my test site. [uPDATE: On the test site I use a JS closure to encapsulate the TimelineLIte animation -- this seems to be the problem]. I see the text and image resources but nothing is animated until it hits the onComplete on the last line. That calls a TweenLite.to() outside the TimeLineLite to fade everything out. I stepped through the GSAP code (min version) on the test site and it seems to be running through all the steps in the animation. For instance, in TimelineLite.min.js the value of "this._totalDuration" is the total length of all the durations and delays added up. In the TweenLite.min.js code the value "e.id" takes on the values of each of my selectors as it loops around. Yet the screen shows nothing happening. I'm using this resources. <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> Any tips on debugging a problem like this [closure]? Is there a line in TweenLite.min.js I can set a breakpoint on and see what is really going on?
  2. I am currently working on a project that makes use of the TimelineLIte to sequence some animations together. While testing, I discovered that only in IE9 (havent tested in 10) that the timelines do not complete their transitions for 3 elements. If you haver over the elements, then you see them finish. Visit the URL below (please respect the fact that this is a dev link) and click on any number from 1-8 (on the bottom of the page).... in IE9, the Winner banner the percentage cells do not fully reach full opacity. I could really use some assistance working through this problem. Thank you in advance. Reference URL: http://capone-dev.toolofnadrive.com/#/matchups
  3. I am trying to make it so that I can change the ease type on the contained tweens of a timeline without remaking the timeline to do so. Is this possible?
  4. As I understand it, a Timeline is set up so that it uses the values of variables at the time the timeline is created. Thus, if n=100 tl.to(mc,1,{x:n}); will move mc to x = 100. What happens if I do var n:int = 100; tl.addCallback(function() {n = 200}); tl.to(mc,1,{x:n}); More importantly, what if I want the timeline to use values that are determined at the time the timeline plays? (Yes, I could do a test of above, but I'm trying to understand this once and for all, conceptually — I'm setting up complex timelines with many moving parts and subcalls, and trying to understand what is called/evaluated now and what is called/evaluated later). Thanks for any insight(s)!
  5. 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.
  6. 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
  7. 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
  8. 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?
  9. 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?
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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!
  15. 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.
  16. 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
  17. 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
  18. 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
  19. 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") }
  20. 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?
  21. 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.
  22. 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.