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

Categories

  • FAQ

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

  • CodePen Challenges

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. UPDATE: The question below is still valid — but in the end I'm going to be playing parts of an already established timeline (as detailed in another post) so I believe that simply stopping the main timeline and playing my other one and continuing the main one is the best option, unless there's a way to insert a section of a timeline into another timeline I have a game that runs by playing one grand timeline from start to finish. The variations in game play occur by simply updating some individual tweens if the players hits a target, etc — the main timeline keeps running. I've just been informed that sometimes though something else should happen — a very complex series of things perfectly suited for another timeline. What would be the best way to do this? 1) Pause the main timeline and set up and play my subsidiary timeline? -- OR -- 2) Create my subsidiary timeline and simply insert it into the main one at the current time? "2" seems more elegant to me as I don't have to start/stop the maintimeline and also listen for when the second timeline ends, but I'm not sure how it would work. Could I just (pseudo code) mainTimeline.insert(newTimeline,mainTimeline.currentTime)?
  2. 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.
  3. 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
  4. I know that when you nest timelines within timelines, you need to have the child-timelines be 'playable', that is not have paused == true. I'm creating complex timeline(maxe)s within separate functions and then adding them to the main timeline. This seems to work, but I feel uneasy — I don't know how the child timelines 'know' to remain paused until they are added to the main timeline. I believe I read here on the forums that a timeline will wait until the next enter-frame to start -- but how do I really know when that is? Thus, in pseudo code, I have something like this _mainTimeline = new TimelineMax({paused:true}); createChildTimelineOne();// not paused createChildTimelineTwo();// not paused _mainTimeline.append(_childTimelineOne); _mainTimeline.append(_childTimelineTwo); /// ... and so on.../// _mainTImeline.play(); Why//how do I know this will always work?
  5. Hi, i am curently working on a project witch should be bulletproof for 8h + of operation time. therefore i am looking for a safe method to check for and kill / clear / delete unused TimeLineMax and TweenMax. The Project ist Constantly adding and removing childs to the stage an deeply nestet movieclips and adding TLMaxs and or Tweens to it. Question: Are TLMAXs and TweenMaxs destroying itself and removing itself COMPLETELY if the MC it was Attached to, gets removed from stage OR do i have to do this manually. In case they're NOT destroying themselfs: what can i do? i bet theres a nice and easy way to handle every greensock thing on stage ever put into existence, Thanks in advance, David
  6. Hi, i'm developing a framework based on greensock, but i have a problem, there are a lot of animations with sounds embeded in frames. i want to use: tl.append(TweenMax.to(myMc, 50, {frame:myMc.totalFrames}));It works great, but the sound embeded doesn't sound Is there a property what i can use to fix it? or automatically sounds in frames are silenced? Thanks
  7. Hi, i wounder how to fade all elements in a timeline. I can't introduce a new extra container - which would be easy to fad - cause of several zIndexes used for the elements. Can someone give me a hint? Jan
  8. I need to animate a bunch of sprites (well, they're animals) within a rectangular (but not square) boundary. I'd like to move them around in a random, non-jittery fashion -- perhaps random bezier curves. I'm also keen to move the ones at the top back in the z-space, and those at the bottom nearer (I suppose I can simply do a loop through each time and map y coord to z coord). I found some nice Greensock code (posted at the bottom) that will move animals in a circular area, but I need to be able to move within an arbitrary rectangular area (again, of arbitrary ratio, not necessarily square). Is there any other similar code here that would work for that, or is there any easy way to modify this code to make it work (boundary checking? Sin's and cos's are not my forte tonight). Any help much appreciated! var xCenter:Number = 275; var yCenter:Number = 200; var poolRadius:Number = 200; function tweenFish():void { var angle:Number = Math.random() * Math.PI * 2; //random angle in radians var radius:Number = Math.random() * poolRadius; TweenLite.to(fish, 2, {x:Math.cos(angle) * radius + xCenter, y:Math.sin(angle) * radius + yCenter, ease:Quad.easeInOut, onComplete:tweenFish}); } tweenFish();
  9. THIS THING IS DRIVING ME MAD .. PLEASE HELP ! var w = 25; var timeline = new TimelineMax(); var mc1 = new TweenMax(); var mc2 = new TweenMax(); timeline.add( [ mc1.to($('#selector'), 10, {backgroundColor:'red'}), mc2.to($('#selector'), 2.5,{width: w+"%", onComplete: function(){ timeline.pause() }}) ],0,0); // so currently the animation pauses at 2.5 secs instead of 10 // how do i alter mc2's tween now that it has finished, with it staying in the same timeline // I tried this .. (it doesnt work) timeline.append( mc2.updateTo($('#selector'), 5, { width: "50%", onComplete: function(){ timeline.pause()} }, false) );
  10. var tm = new TimelineMax(); var bgTween = new TweenMax(); var barWidthTween = new TweenMax(); var groupCount = 4; var clickCount = 0; var animationTime = 5; // seconds var targetSelector = '#statusBar'; var splitTime = animationTime / groupCount; //1.25 second jQuery('#target').click(function(){ clickCount++; // this will basically eval to 25%, 50%, 75% & 100% var animWidth = ((100/groupCount)*clickCount); switch( clickCount ){ case 1: tm.add([ bgTween.to(jQuery(targetSelector),animationTime ,{backgroundColor:'#454545', onComplete: resetCSS}), barWidthTween.to(jQuery(targetSelector),splitTime ,{width:animWidth+"%", onComplete: pauseAnimation}) ],0,0); break; default: // presumes first click/case has already been met (this is the part thats not working) tm.append( barWidthTween.to(jQuery(targetSelector), splitTime,{width:animWidth+"%", onComplete: pauseAnimation}) ); break; } }); Note: var "barWidthTween" has a callback after the 1.25 second execution to pause the whole timeline before the var "bgTween" has finished. [ it should still have another 3.75 sec's left ] "WHAT IM TRYING TO ACHIEVE" A colour bar that changes colour over a 5 second period, while that same bar increases in size on every click. "hense the need for the pause every 1.25 seconds" I need to be able to reverse this motion also which is why im not using multiple TimelineMax instances. I hope I've made my problem clear and if not, i'll try and add some clarity.
  11. I am using TimelineMax for a project and I was wondering is there was a way to possibly update the CSS attribute of a Tween by calling it's label? For example my tween would look like: var tl = new TimelineMax({paused:true}); tl.to(element, time, {css:{top: -50px}}, "my-label"); I would like to possibly call this tween by it's label and update the CSS property to a new value. I tried something like this, but I had no success. tl.removeLabel("my-label"); tl.insert(TweenLite.to(element, time, {css:{top:-100px}}), "my-label"); Any help would be appreciated.
  12. Hi. I'm a Flash guy that's been dabbling in HTML5/Javascript stuff off and on for about a year now. Here's what I'm trying to accomplish: Eight circles of different colors animating in to form a ring (using a bezier curve) with the bottom circles overlapping the top ones (seen in circles.png) Once animated in to position, clicking on one of the circles will animate them until the clicked circle is at the bottom. The layers/zIndex will distribute correctly to match the original layout. I'm using TweenMax right now to animate the intro and it works pretty well. However, I'm using setTimeout to stop the animations so they stop when they get to the "correct" position to form the ring. This is a little finicky, as they will stop in slightly different positions each time. This leads to my first question: is there a better way stop the animations so the circles stop evenly along the ring? The other part of this is how I'm going about it. Eventually I'll want the animations to go back and forth simultaneously when you click a circle and i'm wondering: will this be done easily using functions of TweenMax like reverse or will TimelineMax be better for this situation? One last question... Here is some of my code: TweenMax.to( circleArr[0], .5, { css:{ zIndex:0, bezier:{ curviness:1.5, values:[ {left:100, top:100}, {left:75, top:75}, {left:100, top:50} ] } }, ease:Linear.easeInOut } ); I use the bezier line a few times and I'm wondering if I can simplify it by doing something like: var bez1 = BezierPlugin.bezierThrough([{left:100, top:100}, {left:75, top:75}, {left:100, top:50}], 1.5); TweenMax.to( circleArr[0], .5, { css:{ zIndex:0, bezier:bez1 }, ease:Linear.easeInOut } ); I'm submitting a zip file with my work so far. Let me know if you have any suggestions or questions about what I'm trying to do. Thanks! Test.zip
  13. I was wondering about the best way to handle a jQuery resize event when a user resizes the browser window. I am using TimelineMax and currently I am pausing the timeline, moving it to the very start of the timeline and then removing the timeline object, initializing a new one and rebuilding the timeline each time the browser resize event is fired. I was thinking there might be a better way to do this. I found this answer on StackOverflow here. Having said that, this solution works, but it moves the timeline to the start every time. If I try and resize the window and pause the timeline at the current time of the label it gets thrown off? If I simply try and remove the timeline and rebuild it with a new object, it gets thrown off also? I had seen something about a liquid stage? Is this available on the JS version, or maybe there is something I am overlooking? Here's my resize code: $window.on('resize', function(){ var time = 0; if(globalLabel != "") time = controller.tl.getLabelTime(globalLabel); //time would be used to pause the timeline but it does not work clearTimeout(id); controller.tl.pause(0,true); controller.tl.remove(); //on the Update view call, I am creating a new timeline object //and rebuilding the timeline id = setTimeout(controller.UpdateView, 150); }); I appreciate any help.
  14. hi Greensock A few questions reagrding killAll() 1) Where did the last parameter go? In Flash : killAll(complete:Boolean = false, tweens:Boolean = true, delayedCalls:Boolean = true):void vs. Docs : killAll(complete:Boolean = false, tweens:Boolean = true, delayedCalls:Boolean = true, timelines:Boolean = true):void 2) TimelineMaxs onComplete fires after TweenMax.killAll();??? package { import flash.display.Sprite; import com.greensock.TweenMax; import com.greensock.TimelineMax; import com.greensock.plugins.*; import com.greensock.easing.*; import com.greensock.events.TweenEvent; TweenPlugin.activate([ScalePlugin]); import flash.display.MovieClip; public class Main extends Sprite { public function Main() { // constructor code super(); Create(); } private function Create() { var arr:Array = new Array(); var Time:Number=2; for (var i:int=0; i<10; i++) { var m:MovieClip = new mc(); this.addChild(m); m.x = 40+(25*i); m.y=50; arr.push(m); } // solo tween var TM:MovieClip = new mc(); this.addChild; TM.x=40; TM.y=100; TweenMax.to(TM,6,{scale:2, ease:Linear.easeNone, onStartListener:ScaleTM, onComplete:CompleteTM }); // timeline var TL:TimelineMax = new TimelineMax({ onComplete:CompleteTL }); TL.insertMultiple(TweenMax.allTo(arr, Time, {scale:2, ease:Linear.easeNone, onStartListener:ScaleTL }, Time-0.5), 0); // delayed kill TweenMax.delayedCall(4,Kill); } private function ScaleTM(e:TweenEvent): void { trace('onStartListener: ScaleTM'); } private function CompleteTM() { trace('CompleteTM'); } private function ScaleTL(e:TweenEvent): void { trace('onStartListener: ScaleTL'); } private function CompleteTL() { trace('CompleteTL'); } private function Kill() { trace('Kill'); TweenMax.killAll( } } } trace is:onStartListener: ScaleTM onStartListener: ScaleTL onStartListener: ScaleTL onStartListener: ScaleTL Kill CompleteTL After killAll: As U can see TimelineMax onComplete fires but TweenMax onComplete dosn't
  15. Hi, I am having trouble getting onUpdate event to fire in a TimelineMax that I have nested inside of another TimelineMax. Basically i have a "master" timeline, and a bunch of different "section" timelines. The master timeline has its own onUpdate , but I would like the onUpdate for each of the different sections to call a different function. for example... var master = new TimelineMax( {paused:true, onUpdate:masterUpdate}); var sec1 = new TimelineMax({paused:true, onUpdate:sec1Update}); var sec2 = new TimelineMax({paused:true, onUpdate:sec2Update}); master.add([sec1, sec2], "+=2", "stagger"); master.play(); The problem I am having is that sec1Update, and sec2Update are not getting called when their respective timelines are being played. Any help would be greatly appreciated. Thanks Greg
  16. Hi. I declare var cacTimeline; as global variable. I then use it like this in function1 for example : function1 () { cacTimeline = new TimelineMax(); cacTimeline.to($linePath,0.5,{height:300}); ...... } I then want to reverse it in function2 and have a onReverseComplete or some callback at the end. But for the sake of my app , I have to append this callback in function2 , not in the object declaration. function2 () { cacTimeline.addCallback(callback_function_name,0); cacTimeline.reverse(); } Fires the callback_function_name twice. One at the start of the tween , one at the end of the sequence. function2 () { cacTimeline.addCallback(callback_function_name,cacTimeline.totalDuration()); cacTimeline.reverse(); } callback_function_name never fires. Can anyone help me. I'm new to this , maybe there is a better solution for this.
  17. Big thank you to everyone that makes this forum such a huge asset. I'm having an issue with a Kiosk I'm working on. Basically i've built it with each "slide" on its own flash timeline frame. For each flash timeline frame I have a GS timelineMax to make everything awesome. My issue is that when jumping to the next flash frame I get a momentary "flash" or blink of the content that is set to animate .from. it quickly goes away but is really unsightly. here's an excerpt. any help would be greatly appreciated. var timeline1:TimelineLite = new TimelineMax({ onComplete:goToTwo}); timeline1.append( TweenMax.from(FR1.MFPS, 2, {autoAlpha:0, rotationX:90, transformOrigin:"left top", ease:Elastic.easeOut, delay: 1})); timeline1.append( TweenMax.from(FR1.p1, .5, {autoAlpha:0, rotationY:90, transformOrigin:"left top", ease:Quint.easeIn, delay: .5})); timeline1.append( TweenMax.from(FR1.Ba, 2, {autoAlpha:0, rotationX:90, transformOrigin:"left top", ease:Elastic.easeOut, delay: -.05})); timeline1.append( TweenMax.from(FR1.p2, .5, {autoAlpha:0, rotationY:90, transformOrigin:"left top", ease:Quint.easeIn, delay: .5})); timeline1.append( TweenMax.from(FR1.ser, 2, {autoAlpha:0, rotationX:90, transformOrigin:"left top", ease:Elastic.easeOut, delay: -.05})); timeline1.append( TweenMax.from(FR1.equals, 1,{scrollRect:{x:0, y:0, width:0, height:140}, ease:Expo.easeInOut, delay: 0 })); function goToTwo(){ this.gotoAndStop(2); } stop();
  18. I have a scrolling set of thumbnails that is fed from a backend — thus a varying amount of images. These are masked by a div with overflow:hidden. The thumbnails scroll left and right depending on where mouse is over them (left or right) and also with two external arrows: mouseOver over the arrows scrolls the thumbnails left and right. I set up the entire thing as a TimelineMax. Very nice -- play from 0 to 1 depending or reverse it, if I want to go the other way. The issue I'm running into is making this work on an iPad. The client doesn't want me to invest the time into setting it up for full touch responsiveness, which I recommend — so my only thought is to scroll based on the arrows. — MouseDown doesn't work — just asks if I want to download the arrow images — So I'm thinking: click — but given that I've got it all set up as a TImelineMax, how do I do this? I could of course just do a simple TweenMax a given number of pixels, but again, would like to tween, say, from TimelineMax progress 0 to, oh, 0.1 or something — I reckon I can calculate the appropriate amount given the total width of the images and the masking div — Anyway to move a TimelineMax in pieces like this? Would I do a TweenMax of the TimelineMax's progress() ?? Thanks for any help — and yes, I know I should do the touch interface, but the client needs to give the go ahead…
  19. Hi, I am writing pretty simple game that utilizes MVC pattern. Model is calculating data stored in Array and dispatches events to View that tries to reproduce and visualize it. I wanted to implement View in the way that TimelineMax is handling the tweens by queing it up and play it at the certain point of time. Here is the mainLoop from Model public function mainLoop():void { applyBonus(bonuses); fall(); applyBonus(bonuses); dispatchEvent(new Event(BoardModel.PLAY)); } the function applyBonus or fall just dispatches appropriate events to View. The listeners to this methods just create Tweens and are adding them to the TimelineMax using the append method. The problem is that each on this tweens has a its onComplete method. I want to make sure that not only twees are executed in correct order but also onComplete. Currently I have: applyBonus tween fall tween applyBonus onComplete fall onComplete I wish to have: applyBonus tween applyBonus onComplete fall tween fall onComplete etc. How can I achieve something like this?
  20. Hi, this is my first post as I just started to play with Greensock and so far it has been really useful Im just having a hard time trying to figure out a couple of things. Iets say I add an element to my timeline var tl = new TimelineMax(); tl.to($("#element"), 8, {css:{left : 100}, onUpdate:detectSomethingChanged}); This element is positioned through CSS in a default location then it starts to move. Now whats happening is that my callback function detects if the mouse is on top of my element, if so, it fades it away : tl.to($("#element"), 2, {css:{opacity : 0}, overwrite:"all"}); and as soon the fading stops I want the animation to start all over again from 0 when I do restart but this only restarts the fading effect not the entire clip since I used overwrite:"all". How should I do this exactly?
  21. Hello, I'm trying to animate a rectangle created with KineticJS, however I keep getting "Uncaught TypeError: Cannot read property 'setX' of undefined" the code is the following: var scrub = new Kinetic.Rect({ x: 0, y: 0, width: 4, height: 120, fill: '#ff3019', draggable: true, id:'scrub', name:'scrub', dragBoundFunc: function(pos) { return { x: pos.x, y: this.getAbsolutePosition().y } } }); TimelineMax({paused:true}); tl.insert(TweenMax.to(scrub,5,{css:{setX:500},onComplete:function(){ console.log('to 500'); }})); tl.insert(TweenMax.to(scrub,5,{css:{setX:800},onComplete:function(){ console.log('to 800'); }})); tl.play(); Do you guys have any idea why is this throwing an error? Thanks in advance!
  22. Hi, Let me congratulate GreenSock for the hard work and success. My question is, how to do next and previous in TimelineMax. ? I am able to play,pause,reverse and resume but how to go to the next/previous frame of the animation? any help will be highly appreciated.
  23. I have an infintie scrolling stack (actually its only 4 items looping) - and it's made up of a bunch of tweens, designed to seamless loop from progress 0-1, 0-1,0-1 and so on. So if I use tl = new TimelineMax({repeat:20}); It will play seamless. Eventually I want to swipe the stack and it just rolls continuesly until it has lost momentum... (think mobile browser scrolling - where you flick your thumb and it scrolls ahead smoothly) So I paused the timeline and test with a tweening. For instance I want to move the stack 8 positions (that is moving twice through the stack of 4 items) - and since I timed each stack move with a second it would be: TweenLite.to(tl, 1, {progress:8}); Naturally it wont tween progress beyond 1. Naively I briefly thought: TweenLite.to(tl, 1, {progress:8 % 1, ease:Expo.easeOut}); would work. But of course not - it isnt moving throught the stack twice So my question is is there a way of looping progress? I am thinking of doing the "progress modulu way" in an onUpdate. But I feel it isn't right tweening a vairable and using it in onUpdate - and won't it hurt performance? or I could use tl = new TimelineMax({repeat:20000}); and just tween the totalProgress or totalTime (if possible?) But is there a better and more propper way? TIA!
  24. Adding autorotate to my bezier curve stops it from working in Safari (5.1.7) It just pins around in one spot and doesn't follow the curve. Removing the auto rotate parameter fixes it. Anyone any ideas?! Can't find anyone with this problem and not sure what to do about it, I really need it to auto rotate with the curve. Works in all other browsers! var anim = new TimelineMax(); anim.append(TweenMax.to($('#anim'), 2, {css:{bezier: {values: [{left:'3578px', top:'2417px'},{left:'3431px', top:'2362px'},{left:'3190px', top:'2252px'}], autoRotate: true}}, ease: Linear.easeNone}));
  25. I'm experiencing a problem only on ios, Safari and Dolphin. When the page first loads, the TimelineMax animation will not play. If I tap somewhere on the screen (not on a button) or reload page, everything plays. I cannot seem to figure this out and I have tired rearranging the order of the way the page loads and to no avail, nothing works unless I reload the page or tap on the screen in a random spot. I checked the console.log and no issues. I could really use a bit of help on this one. URL: Works on: DESKTOP: Safari, Chrome, FF and Opera Broken on: iOS: Safari and Dolphin
×