Jump to content

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

Search the Community

Showing results for tags 'timelinemax'.

  • 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. I am having some basic trouble getting a div within a div to alpha tween on and off. Basically I'm trying to randomly change the text inside the div (it will be using a pictorial font so the image will change). The text changes, thus the timelineMax is working, but there is no tweening on and off -- no alpha tweening. I'll include the relevant js and css below -- if the full zip is needed, can do, but I'm sure it's something really simple I'm missing. I also noticed that storing the div in a 'global' variable -- grabbing it at the start with jquery -- wasn't working for whatever reason, and that's why I'm grabbing it each function. Thanks for pointing the errors of my ways. JS startRotateDiv(); function startRotateDiv() { var rotateDiv = $('#home_div div.content_image'); var tl = new TimelineMax({repeat:-1}); tl.add(setText); tl.to(rotateDiv,.5,{autoAlpha:1}); tl.to(rotateDiv,.5,{autoAlpha:0},"+=2"); tl.play(); } function makeid(len) { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for( var i=0; i < len; i++ ) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; } function setText() { var rotateDiv = $('#home_div div.content_image'); var txt = makeid(1); rotateDiv.html('<div class="notice">'+ txt + '</div>'); } CSS .notice { font-size: 80px; font-family: 'noticenotice2'; color: red; background: url('http://media.npr.org/assets/news/2010/04/11/panda-f8a7c9331bbac776e52b26feeccc53de959f46d1-s6-c30.jpg'); }
  2. I'd like to pause my timeline at a particular point. How do I do this? This is the code I have so far. http://hastebin.com/soqelufado.pl The code repeats, but I'd like to pause it before it repeats. I figure that I should do this my providing a parameter to the final tween, which currently looks like this: . to( $(els).eq(2), 2, { left: 0, delay : 3 } ) So, how do I make this tween pause after it runs? Also, if I'm right, and there is documentation for this. where is it? Thanks.
  3. I've been struggling with my first challenge: making a seamlessly cycling slideshow with timelinemax. So far, no matter what I do, after the animation cycles for the first time, I get an empty pane until the first animation in the chain completes. I've tried a number of ways to prevent this, but to no avail. This is what I have so far: My viewpane is 960px wide. It is initially occupied by the first slide, while the other slides are outside the right edge of the pane. All slides have a starting z-index of 100. var tl = new TimelineMax({repeat : -1}) ; tl.to( slides[1] , 2, { left : 0, // after first animation, secretly move // first slide into new starting position // and make sure it slides over the previous slide onComplete : function (){ target = slides.eq(0) ; target.css("left", "960px") ; target.css("z-index", "2000") ; } } ) .to( slides[2] , 2, { left : 0 } ) .to( slides[0], 2, { left : 0, onComplete : function() { console.debug( "completed last anim" ); // give the first slide it's oringal z-index, slides.eq(0).css("z-index", "100") ; } } ) ;
  4. I'm in the process of creating a functions to create a slideshow. my variable 'slides' is a jquery object, containing dom elements that will be my slides. I pass 'slides[1] to my timeline function. I'd like to use the onComplete callback to increment the value of currentSlide, and then repeat the animation. However, I discovered that I couldnt' access the variable currentSlide from the callback. Doing a little poking around, I found that I couldn't access any objects from the callback. Is this expected behaviour? Or am I doing something wrong? My code: var slides = window.myApp.slides ; // returns a jQurey object currentSlide = window.myApp.slides[1] ; var tl = new TimelineMax() ; tl.to( currentSlide, 2, { left : 0, onComplete : completeHandler } ) ; } // this function does work. An animation occours function completeHandler (){ console.debug( "next slide: " . slides[2] ); // returns undefined. }
  5. I've been playing time with tweenmax. I pretty soon realized that I couldn't get the effect that I wanted without using timelinemax. I'm loading tweenmax into my browser. But I cant do anything with it. when I start do anything with tl.to(...) chrome's console give me the error "uncaught exception: cannot call method 'to' of undefined. Console references me to the line where I use 'tl,to(). The sample code I'm working with can be seen at hastebin.com/midacafegu.vbs
  6. Hello All, I am using a repeater to display items from a database. What I would like to do is: 1.slide in first item 2.add transformation for second item 3. add a different transformation to the third item After three items have been displayed I want to fade out first three and display next three items. and I want to repeat this process in a loop.. Here is my code: I am stuck in between. I am very new to the web development and GreenSock. Any help will be greatly appreciated! CSSPlugin.defaultTransformPerspective = 600; var t1 = new TimelineMax(); $('.tick').each(function (index, item) { //console.log(index, item); if (index == 0) { t1.to(item, .5, { x: 100, ease: Elastic.easeOut }, "+=0.5"); } else if(index == 1){ t1.to(item, 2, { throwProps: { x: 200 } }); } else { t1.from(item, 0.8, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut }) } }); t1.play(); Thanks & Regards, Bunnie
  7. Hello, Im trying to find away to infinitely scale an image. The only way i can think of is using a recursive function. I tried to use 'repeat: -1, but it just restarts the tween from the beginning value of the css property. start(); function start(){ TweenMax.to($(img), 4, { css:{ scale:'+=0.5' }, ease: Power0.easeInOut, onComplete: function(){ start(); } }); } I was wondering if there is a better way using TweenMax or TimelineMax to infinitely scale an image? Either using (transform) scale or width and height (css or dom). Basically I want to keep animating the value up, infinitely. By incrementing up, infinitely. Any help will be highly appreciated! Thank You!
  8. This code works fine on the first loop, and not on the second: var tl = new TimelineMax({repeat:-1}) tl.fromTo(tx4,1,{skewX:-40, x:b.width},{skewX:0, x:0, ease:Linear.easeNone},'-=0.5') .to(tx4,0.5,{transformOrigin:'center bottom', skewX:70, scaleY:1.5, ease:Power2.easeOut},'-=0.1') .to(tx4,0.5,{skewX:-45, scaleY:1.25, ease:Power2.easeOut},'-=0.1') .to(tx4,0.5,{skewX:0, scaleY:1, ease:Back.easeOut},'-=0.1') How can I fix this? <rant> No matter how many times I run into this problem, it never seems to sink in. Looping timelines are so unintuitive in gsap that I could pull my hair out. It's soooo easy to do whatever you want with a timeline, but the moment you try to repeat it, it becomes soooo frustrating. It shouldn't even be called "repeat", because that would lead you to believe it's going to do the same thing it did the first loop. And I already know I'm going to get several responses explaining why this is so great and expected, smh</rant>
  9. I have two timelines.. tl1, tl2 for demonstration purposes. tl1 starts when the dom is ready. tl2 starts via button click. There is another button that reverses everything to where tl1 starts. The problem I have is that if the button that starts tl2 is clicked before tl1 is finished, then someone clicks the button that reverses the timelines to the start of tl1, then tl1 is reversed to the point where the interruption happened. How can I tell the button that reverses everything back to tl1 to go all the way back to zero?
  10. First, I want to be clear that I know that GS is highly optimized, and that in no way do I mean to imply there's any problem with the GS speed. I've never had one. I've been working on a large sectional project for 3 months where games are being run along with videos inside an external player. One of those games -- using rudimentary Flash 3D, etc and using a touchscreen for touch detection -- runs slower than the client wants. The issue is, of course, with the videos and the external player, and with the multitude of external videos being played. That having been said, is there anything I can do to turbo-charge GS — the game relies on many TweenMax's, TimelineMax's, etc -- to get some small performance boost? I was thinking of something along the lines of fine-tuning onUpdates, or something, perhaps make them check less often — grasping at straws here. We believe the fault is in the videos/player, again, but I thought I'd investigate all angles…
  11. I have timelines in my site which have animations added to them in sequence. The first time i play a particular timeline it plays fine, any time after that it skips whatever is in the first .add() or it just skips the first label .. I am not even sure how to describe this. One example is that I have an abstract that defines a sitesection (SectionViewBase). on the transitionin function it creates a timeline ads the global transition for each section and then there is a transitionInComplete function that is overwrote by the childclass that subclasses SectionViewBase. the override will return a new timline or tweenlite instance that is the transitionin of the specific section content. ANyways, the first time I do this its fine, however the second time it skips that initial .add() call and just plays whatever it gets from transitionInComplete(). Each time this tranistionIn function runs, however, it recreates the timeline. Any suggestions? Thanks.
  12. Hello, I'm using the TimelineMax ans it works great. But I have a problem with something. I want to use a delayedCall function. In this function, I have other tweenMax. Something like this : var tl:TimelineMax = new TimelineMax(); tl.insert(TweenMax.to(camion, 8,{x:700, ease:Linear.easeNone})); tl.insert(TweenMax.to(nuage, 20,{x:"-100", ease:Linear.easeNone})); tl.insert(TweenMax.delayedCall(3,enleverTexte)); // function enleverTexte() { TweenMax.to(txt1, 0.7,{y:"-40", alpha:0, ease:Quint.easeIn}); TweenMax.to(txt2, 0.7,{y:"-40", alpha:0, ease:Quint.easeIn, delay:0.2}); } Now, I want to start my animation with a gap starting. Like this : tl.currentTime = 5; Normaly, I should not see the movieClip txt1 ans txt2 when my animation start (because I launch the animation at 5 seconds, and inside my timeline I hide the mc txt1 and txt2 at 3 seconds). But it doesn't works... When the animation start, even if I start at 15 seconds, I see the mc txt1 and txt2 and the function enleverTexte() is executed... How can I do this kind of manipulation ? Thank you.
  13. I have a function set up to play a loaded MP3 by name string: protected function playSoundByName($name:String):void { // trace("play sound by name ", $name, LoaderMax); _currentSound = LoaderMax.getContent($name); // trace("current sound is ",_currentSound); if (_currentSoundChannel) _currentSoundChannel.stop(); // trace("the sound is ", _currentSound,_currentSound.length,_currentSound.url); _currentSoundChannel = _currentSound.play(0); _currentSound.addEventListener(Event.SOUND_COMPLETE,soundComplete,false,0,true); } Which works fine when I call it directly, but not when I call it from a callback in a TimelineMax (see below -- the first call works fine, the one from inside the TLM does not). I'm sure I'm missing the obvious, but it's a big problem…Thanks… var introSoundsTL:TimelineMax = new TimelineMax({ease:Linear.easeNone}); playSoundByName("jsTexasSurf"); // works! introSoundsTL.addCallback(playSoundByName,0,["jsTexasSurf"]); // the sound from LoaderMax.getContent() in called function is null! (The loaded xml is in this form: <?xml version="1.0"?> <content> <timelimit limit="45" /> <MP3Loader url="music/jetski/321go.mp3" name="js321Go" autoPlay="false" load="true" /> <MP3Loader url="music/jetski/pg3-300beachs.mp3" name="js300beaches" autoPlay="false" load="true" /> <MP3Loader url="music/jetski/pg5-texassurf.mp3" name="jsTexasSurf" autoPlay="false" load="true" /> </content> )
  14. I have a situation where I want to have a number of objects tweening from different starting points towards a common goal. They are moving in the same direction, and should move at the same pace. I also want to get rid of the object when it reaches its goal, and add a new one (or the same one) at the back of the queue. Picture a line of people moving forward in a queue: they shuffle forward slowly, all at the same speed. We start the queue with a line already formed, that is, we 'open the scene' with the line in place. Is there a way to do this with TimelineMax? I had thought of something like this _mainTimeline.to(_people,TIME,{z:"+=1000"},"+=1"); But they won't all end up at the same end point. If I substitute a fixed end point (i.e. z:1000) then they won't move at the same pace, since they distance they must cover is different. I also need to figure out a way to keep adding and removing from the queue. I suppose the answer might be to maintain an array of TweenMax's, or simply to do old-school ENTER_FRAME +='s, but I very much like the robustness of TimelineMax
  15. I've solved this, but I have no idea how, and I'm trying to understand what happened. I have TImelineMax's set up in a class. One of them is this, super-simple -- I use it to have a person 'escaping' or not escaping -- if they are escaping, they move off screen, if you click, the timeline is reversed and they come back. Instantiations of this class are being moved in z-space forwards, in a timelinemax which contains repeat = -1 tweenmaxes (as per Carl's great help) -- when the person disappears off screen in the distance I reset this timeline to get them not escaping anymore. I was using gotoAndStop(0) but now am using seek(0), pause() -- the reset can happen while the timeline is moving forwards, or reverse. _escapeString = Math.random() > .5 ? "+=" + ESCAPE_DISTANCE : "-=" + ESCAPE_DISTANCE; _escapeTimeline = new TimelineMax({paused:true,onStart:tlStart,onComplete:tlComplete,onReverseComplete:tlReverseComplete,ease:Linear.easeNone}); _escapeTimeline.add(new TweenMax(this,ESCAPE_TIME,{x:_escapeString,ease:Linear.easeNone})); As I said, I solved it, somehow -- but as I don't like unknown unknowns, my question is: apart from kills(), is there anything else that would make the duration() of a timeline == 0, and the progress() == NaN ? That's what was happening. But the timeline itself existed, i.e. != null.
  16. This may have nothing to do with GSAP as I have both a jquery library and a pathfinding ai library, but I'm not getting any errors, and the coords spit out by my ai seem fine. After the third click on the screen the entire window (chrome) has to be closed and reloaded. Any ideas? I really want to have my basic movement down so I can actually get to building my game http://jsfiddle.net/ccarterc1984/BfpF2/
  17. http://jsfiddle.net/ccarterc1984/5t9EU/2/ First timeline seems to work great. It animates each box individually forward and backward. Upon completion of the reverse animation, I call a function which runs the second timeline. However the second timeline does not animate, it simply sets the properties instantly.
  18. 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)!
  19. This is another no-brainer that's puzzling me. If someone could show me the error of my ways I'd be grateful. In this code tl.to(startButton,0.25,{autoAlpha:1}, "+=1"); tl.addCallback(waitForStartButtonPush,"+=0.01"); tl.to(startButton,0.25,{autoAlpha:0}, "+=.01"); where "tl" is a timelinemax appended to the main timeline and 'startButton' is a movieclip on stage, followed by private function waitForStartButtonPush():void { _mainTimeline.pause(); startButton.addEventListener(MouseEvent.CLICK,startButtonClick,false,0,true);} the issue I was having is that the startButton was only tweening partway to autoAlpha== 1. I solved this by putting the autoAlpha tween inside waitForStartButtonPush(), before I paused the main timeline, but I was unclear why it wasn't working the first way — why is the call to mainTImeline.pause getting called partway through the tween? It may be something in the way I've ordered my timelines, but I wanted to know if there's a reason I'm missing in the way I'm timing things.
  20. I've been making good use of TimelineMax's convenience methods: timeline.to(....), etc. As I understand it, these are syntatic sugar for timeline.add(Tweenlite.to(...)), etc Is there a way to change it so that the convenience methods would instead use TweenMax? Ran into an issue where I was trying to use 'yoyo' but wasn't working…and it's because TweenLite doesn't offer 'yoyo', I believe. I offer it as a suggestion for future releases, if it's not currently implemented.
  21. Just downloaded the latest 'bonus' AS3 files and am getting strange TimelineMax errors, in particular it doesn't seem to grok 'to' and 'from" -- the funny thing is I haven't touched the code generating the error recently -- It just started when I grabbed the new libraries -- it's happening with TImelineMax .to() and .from() 1061: Call to a possibly undefined method from through a reference with static type com.greensock:TimelineMax. -- and stopped when I put the old libraries back
  22. Do TimelineMax convenience methods only create TweenLite Classes, or can they create TweenMax Classes? I want to create TweenMax Objects, not TweenLite Objects. If I want to do this, will I have to use TimelineMax.add(TweenMax.convenienceMethod())?
  23. Today is the day of many Timeline questions — thanks for your help and patience. I'm interested to the extent of which multiple nested timelines are "baked in the cake", that is how much you can change not-yet-played timelines on the fly. Can you update the child timelines and tweens before the parent is played and while it is playing? Also I was experimenting with the ability to play timelines independent of their parents. Apparently it doesn't work. That is, if you have a timeline added to another timeline, you can't seem to play() the child timeline prematurely. Is this true? I then tried removing it from the parent timeline in a callback, but that seemed to make no difference. Only if I created an entirely new child timeline in the callback could I play it immediately. I assume this is all as it should be, but could someone explain why? This, for instance, failed var main:TimelineMax = new TimelineMax({paused:true}); var one:TimelineMax = new TimelineMax; var two:TimelineMax = new TimelineMax; one.to(aSquare,3,{onUpdate:function(){trace('in one')},x:"+=300"}); one.to(aSquare,4,{onUpdate:function(){trace('in one 2')},y:"+=300"}); two.to(aCircle,2,{onUpdate:function(){trace('in two')},y:"-=200"}); main.addCallback(dochange,1); main.append(one,0); main.append(two,3); main.play(); function dochange():void { trace("removing two"); trace(two.timeline); // has a parent main.remove(two); trace(two.timeline); // has no parent two.play(); // won't play nonetheless until already set place in parent. }
  24. From the TimelineMax FAQ I understand that Timelines can only appear in one parent Timeline at a time. I'm just curious what the reason for this is. In my current project It has the unfortunate consequence that any Timeline that uses a "shared" child Timeline will have to be cleared and remade every time it's played. Which is not a huge deal, I'm just curious more than anything. Thanks!
  25. Is there any reason one can't TweenMax.updateTo() a TweenMax nested inside a TimelineMax? I'm sure it's me, but it's driving me crazy. I do this (I have an object being tweened from z:500 to z:0 or something like that, but not on x), thus (simplified): _obstacleTimeline.add(TweenMax.to(obstacle,OBSTACLE_SPACING-1,{z:obstacle.finalZ})); and later $tween.updateTo({x:stage.stageWidth,autoAlpha:0,ease:Quint.easeIn},false); and the object that's being tweened does what it's supposed to and then goes _back_ a way in z-space and comes forward again from the left. I'm not restarting the tween (updateTo(...,true)). Again, I'm sure it's me, but have been checking this for 1/2 hour and see no errors on my part…