Jump to content

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
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. 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.
  2. 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
  3. 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
  4. 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.
  5. 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();
  6. 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…
  7. 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?
  8. Hi, I have a basic timeline that tweens the opacity of list items in various ways. When certain things happen on screen I need to clear the timeline completely and also reset the elements back to their original starting values. 1st attempt: Just using restart() on the timeline expecting it to clear the existing inline "style" attribute. The timeline restarts nicely but it starts with the current inline values of the elements (eg: style="opacity: 0.89434") which ruins the animations because all the timings go off. 2nd attempt: Using invalidate() on the TimelineMax object to clear the existing values. This appears to have no effect, the inline styles are still in place after making the call. Calling restart() after an invalidate still has the same effect as attempt 1. 3rd attempt: Using clear() on the TimelineMax object and just re-adding all the TweenMax object to the timelines each time I want to play it. Clearing does indeed clear the tweens from the timeline, but does not reset the inline values so any subsequent tween will just start from the values it left off on. Because the inline styles pretty much have the highest specificity I can't override easily by applying any CSS, I'll have to resort to stripping inline styles (manually or with jQuery) when getting rid of the tweens unless there is something built in to restore the elements back to when there was no tweening applied to them? All the various 'kill' methods also don't get rid of the inline styles but at least it appears to reset when applying it again. Please help, there's gotta be something simple to solve this problem. Regards, Werner
  9. 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?
  10. 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!
  11. 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.
  12. 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}));
  13. 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
  14. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Update: don't miss our guest post on css-tricks.com, Myth Busting: CSS Animations vs. JavaScript which provides some additional data, visual examples, and a speed test focused on this topic. jQuery is the 700-pound gorilla that has been driving lots of animation on the web for years, but let's see how it fares when it steps into the ring with the feisty GSAP (GreenSock Animation Platform) which gained its fame in the Flash world and is now flexing its greased-up muscles in JavaScript. Before we put the gloves on, we need to make it clear that we've got the utmost respect for jQuery, its authors, and its community of users (to which we belong). It's a fantastic tool that we highly recommend for non-animation tasks. This tongue-in-cheek "cage match" is solely focused on animation. Performance Performance is paramount, especially on mobile devices with sluggish processors. Silky smooth animation is the hallmark of any animation platform worth its weight. This round wasn't even close. GSAP was up to 20 TIMES faster than jQuery under heavy stress. See a speed comparison for yourself or make your own. Performance winner: GSAP Controls With jQuery, you can stop an animation but that's about it. Some 3rd party plugins add resume capability, but jQuery takes a pounding in this round. GSAP's object oriented architecture allows you to pause, resume, reverse, restart, or jump to any spot in any tween. Even adjust timeScale on the fly for slow motion or fastforward effects. Place tweens in a timeline with precise scheduling (including overlaps or gaps) and then control the whole thing just like it's a single tween. All of the easing and effects remain perfectly intact as you reverse, pause, adjust timeScale, etc. And you can even kill individual portions of a tween anytime (like if a tween is controlling both "top" and "left" properties, you can kill "left" while "top" continues). Put labels in a timeline to mark important spots and seek() to them anytime. Imagine trying to build the example below using jQuery. It would be virtually impossible. With GSAP, it's easy. In fact, all of the animation is done with 2 lines of code. Drag the slider, click the buttons below, and see how easy it is to control the sequenced animation. See the Pen Impossible with jQuery: controls (used in jquery cagematch) by GreenSock (@GreenSock) on CodePen. Controls winner: GSAP Tweenable Properties jQuery.animate() works with basic numeric properties, but that's about it. If you want to do more, you'll need to rely on lots of 3rd party plugins which may have spotty support or unresolved bugs. GSAP's CSSPlugin handles almost anything you throw at it while protecting you from various browser bugs and prefix requirements. GSAP jQuery  = supported    = supported with 3rd party plugins    = partially supported with 3rd party plugins Basic numeric css properties like left, top, opacity, fontSize, etc. Supported Supported Colors like backgroundColor, borderColor, etc. Supported Supported with 3rd party plugins backgroundPosition Supported Supported with 3rd party plugins boxShadow Supported Supported with 3rd party plugins clip Supported Supported with 3rd party plugins textShadow (including multiple text shadows) Supported Partially supported with 3rd party plugins 2D transforms like rotation, scaleX, scaleY, x, y, skewX, and skewY, including 2D transformOrigin and directional rotation functionality Supported Partially supported with 3rd party plugins 3D transforms like rotationY rotationX, z, and perspective, including 3D transformOrigin and directional rotation functionality Supported Partially supported wiht 3rd party plugins borderRadius (without the need to define each corner and use browser prefixes) Supported Partially supported with 3rd party plugins className allows you to define a className (or use "+=" or "-=" to add/remove a class) and have the engine figure out which properties are different and animate the differences using whatever ease and duration you want. Supported Partially supported with 3rd party plugins Tweenable properties winner: GSAP Workflow When you're creating fun and interesting animations, workflow is critical. You need to be able to quickly build sequences, stagger start times, overlap tweens, experiment with eases, leverage various callbacks and labels, and create concise code. You need to be able to modularize your code by creating functions that each spit back an animation object (tween or timeline) which can be inserted into another timeline at a precise time. You need a flexible, powerful system that lets you experiment without wasting hours wrestling with a limited tool set. jQuery has some nice simple convenience methods like show(), hide(), fadeIn(), and fadeOut(), but GSAP bloodies its nose in this round: GSAP jQuery  = supported    = unsupported Easily create sequences (even with overlapping animations) that can be controlled as a whole Supported Unupported Flexible object-oriented architecture that allows animations to be nested inside other animations as deeply as you want Supported Unupported Animate things into place (backwards) with convenience methods like from() and staggerFrom() Supported Unupported Accommodate virtually any ease including Bounce, Elastic, SlowMo, RoughEase, SteppedEase, etc. Supported Unupported Create a staggered animation effect for an array of objects using one method call (like staggerTo(), staggerFrom(), or staggerFromTo()) Supported Unupported Easily repeat and/or yoyo a tween a specific number of times (or indefinitely) without resorting to callbacks or redundant code Supported Unupported Callbacks for when a tween or timeline starts, updates, completes, repeats, and finishes reversing, plus optionally pass any number of parameters to those callbacks Supported Unupported Place labels at specific times in a sequence so that you can seek() to them and/or insert animations there. Supported Unupported Animate any numeric property of any JavaScript object, not just DOM elements Supported Unupported Call a function whenever the entire platform finishes updating on each frame (like for a game loop) Supported Unupported Workflow winner: GSAP Compatibility Browser inconsistencies and bugs are the bane of our existence as developers. Whether it's the way Internet Explorer 8 implements opacity or Safari's transformOrigin bug that wreaks havok on 3D transforms or the fact that browser prefixes are required to enable many of the more modern browser features, you want your animations to "just work" without having to learn all the annoying hacks. jQuery does a great job of delivering cross-browser consistency overall, but when it comes to animation it falls a bit short mainly because it doesn't even attempt to handle the more modern CSS properties. No JavaScript framework can work miracles and suddenly make IE8 do fluid 3D transforms, for example, but GSAP implements a bunch of workarounds under the hood to solve problems wherever possible. It can do 2D transforms like rotation, scaleX, scaleY, x, y, skewX, and skewY all the way back to IE6 including transformOrigin and directional rotation functionality! Plus it works around scores of other browser issues so that you can focus on the important stuff. Compatibility winner: GSAP Popularity jQuery has been around for a long time and has gained incredible popularity because it does many things well. It's like the Swiss Army knife of JavaScript. There probably isn't a single JavaScript tool that's more popular than jQuery, and GSAP is no exception. As the new kid on the block, GSAP is gonna have to prove itself in the JavaScript community just like it did in the Flash community before it's crowned the undisputed champion. Popularity winner: jQuery Conflict management What happens if there's already a tween running that's controlling a particular object's property and a competing tween begins? jQuery does nothing to manage the conflict - the original tween keeps running. For example, let's say you're animating an element's "top" to 100px and that tween still has 2 seconds left before it's done, and another tween starts running that animates the same element's "top" to 0px over the course of 1 second. It would tween to 0px and then immediately jump to almost 100px and finish that [first] tween. Yuck. GSAP automatically senses these conflicts and handles them behind the scenes. In this case, it would kill the "top" portion of the first tween as soon as the second tween begins. Plus there are several other overwrite modes you can choose from if that's not the behavior you want. Conflict management winner: GSAP Support Both jQuery and GSAP have thriving support forums, but since right now jQuery has a massive user base, you're very likely to find someone with an answer to your question. Even though the GreenSock forums rarely have a question that remains unanswered for more than 24 hours, jQuery's pervasiveness gives it an edge here. On the other hand, GreenSock's forums are manned by paid staff (including the author of the platform), so you're quite likely to get solid answers there. Add to that the fact that GreenSock has a track record of being much more agile in terms of squashing bugs and releasing updates than jQuery, so we'll call this round a tie. Support winner: tie Expandability jQuery and GSAP both offer a plugin architecture, but since jQuery has been out much longer and gained so much popularity, there are numerous plugins available. Some are good, some are not, but there is a thriving community of plugin developers out there. Even though technically they're both equally expandable, the sheer number of plugins currently available for jQuery give it the advantage in this round. Expandability winner: jQuery Learning resources Again, jQuery's popularity trumps anything GSAP could throw at it right now. There are lots of tutorials, videos, and articles about jQuery whereas GSAP is new to the game. GreenSock is being aggressive about putting together solid resources (like the Jump Start tour) and the community is crankin' out some great articles and videos too, but jQuery scores the win in this round. Learning resources winner: jQuery Price & license Both jQuery and GSAP are completely free for almost every type of usage and both allow you to edit the raw source code to fix bugs (if that's something you need to do). If you plan to use GSAP in a product/app/site/game for which a fee is collected from multiple customers, you need the commercial license that comes with "Business Green" Club GreenSock memberships (one-off commercial projects don't need the special license). It's actually a more business-friendly license in many ways than a typical open source license that offers no warranties or backing of any kind or imposes code sharing or credit requirements. GreenSock's licensing model provides a small funding mechanism that benefits the entire user base because it empowers continued innovation and support, keeping it free for the vast majority of users. See the licensing page for details. jQuery employs an MIT license and is free for virtually all uses. As much as we all like "free" software, there's always a cost somewhere. jQuery has a few large corporate sponsors that have helped keep it viable. Both jQuery and GreenSock have long track records of delivering updates, bug fixes, and new features (GreenSock is newer to JavaScript, but served the Flash community since around 2006). Both count some of the largest companies in the world among their user base. Although there are some clear benefits of GreenSocks' license over jQuery's, we'll give this round to jQuery because it is technically "free" in more scenarios than GSAP. Price & license winner: jQuery File size jQuery weighs in at about 32kb gzipped and minified whereas GSAP's TweenLite and CSSPlugin are about half that combined. So in half the size, you're getting significantly more animation capabilities and speed. GSAP is built in a modular fashion that allows you to use just the parts that you need. Of course jQuery serves many other purposes beyond animation, but in this cage match we're focused on animation. Even if you add up TweenLite, TimelineLite, TimelineMax, TweenMax, EasePack, CSSPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin, and RoundPropsPlugin, it's still almost 20% less than jQuery. File size winner: GSAP Flexibility Let's face it: any tweening engine can handle the basics of animating one value to another, but it's really the details and advanced features that make a robust platform shine. GSAP crushes jQuery when it comes to delivering a refined, professional-grade tool set that's truly flexible. All these conveniences are baked into GSAP (no 3rd party plugins required): Tween any numeric property of any object. Optionally round values to the nearest integer to make sure they're always landing on whole pixels/values. Animate along Bezier curves, even rotating along with the path or plotting a smoothly curved Bezier through a set of points you provide (including 3D!). GSAP's Bezier system is super flexible in that it's not just for x/y/z coordinates - it can handle ANY set of properties. Plus it will automatically adjust the movement so that it's correctly proportioned the entire way, avoiding a common problem that plagues Bezier animation systems. You can define Bezier data as Cubic or Quadratic or raw anchor points. Animate any color property of any JavaScript object (not just DOM elements). Define colors in any of the common formats like #F00 or #FF0000 or rgb(255,0,0) or rgba(255,0,0,1) or hsl(30, 50%, 80%) or hsla(30, 50%, 80%, 0.5) or "red". Set a custom fps (frames per second) for the entire engine. The default is 60fps. All tweens are perfectly synchronized (unlike many other tweening engines). Use the modern requestAnimationFrame API to drive refreshes or a standard setTimeout (default is requestAnimationFrame with a fallback to setTimeout) Tons of easing options including proprietary SlowMo, RoughEase and SteppedEase along with all the industry standards Animate css style sheet rules themselves with CSSRulePlugin Animate the rotation of an object in a specific direction (clockwise, counter-clockwise, or whichever is shortest) by appending "_cw", "_ccw", and "_short" to the value. You can tween getter/setter methods, not just properties. For example, myObject.getProp() and myObject.setProp() can be tweened like TweenLite.to(myObject, 1, {setProp:10}); and it will automatically recognize that it's a method and call getProp() to get the current value when the tween starts. Same for jQuery-style getters/setters that use a shared method like myObject.prop(). You can even tween another tween or timeline! For example, TweenLite.to(otherTween, 1, {timeScale:0.5}) would animate otherTween.timeScale to 0.5 over the course of 1 second. You can even scrub the virtual playhead of one tween/timeine with another tween by animating its "time". Use plugins like ThrowPropsPlugin for momentum-based motion, and RaphaelPlugin, EaselPlugin, and KineticPlugin for those [canvas or svg] libraries (Raphael, EaselJS, and KineticJS). Plus there are physics-based plugins like Phyics2DPlugin and PhysicsPropsPlugin as well as a fun ScrambleTextPlugin for Club GreenSock members. Flexibility winner: GSAP Conclusion jQuery eeked out a few decent rounds, but ultimately GSAP left it lying on the mat in a pool of its own blood. Of course we're slightly biased, but check out the facts for yourself. Kick the tires. Audition GSAP on your next project. See how it feels. If you only need simple fades or very basic animation, jQuery is probably just fine. In fact, its fadeIn() and fadeOut() methods are quite convenient. However, what happens when your client wants to do something more expressive? Or what if they start complaining that animation isn't smooth on mobile devices? Why not build on a solid foundation to begin with so that you don't find yourself having to rewrite all your animation code? If you want professional-grade scripted animation, look no further. To get started fast, check out our Jump Start tour. Update: there's now a jquery.gsap.js plugin that allows you to continue using jQuery.animate() but have GSAP drive the animations under the hood, thus delivering much better speed plus a bunch of new properties that you can tween (like colors, 2D and 3D transforms, boxShadow, textShadow, borderRadius, clip, etc.). Read more about the plugin here. Recommended reading: Main GSAP JS page jQuery.animate() with GSAP: get the jquery.gsap.js plugin! Why GSAP? A practical guide for developers Jump Start: GSAP JS CSS3 transitions vs GSAP: cage match Speed comparison 3D Transforms & More CSS3 Goodies Arrive in GSAP JS
  15. Hi everyone, I'm new on this forum, first thanks to Greensock for the awesome library. But... I have a serious problem with the timelineMax. What i want to do: - declare 2 or more timelineMax's with tweens on the same target - calls multiple times in a short time the gotoAndStop method on a (random) timeline. - the latest gotoAndStop must overwrite every other tweens or timelines. The problem is that mostly the latest timelineMax.gotoAndStop is not set. You can see a simple example of my problem in my attachment. Just publish the fla with and without the comments on line 22 to 32. The result should by the same... but it isn't. Can someone help me with that? (I'm sorry for my bad English) Thank you, Pieter example.zip
  16. 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!
  17. I'm having an issue with sequencing some animations. I would ultimately like the duration of the timeline to be equal to 2 seconds but only have the following objects animate at specific points in the first second. Goals: 1. Duration of TimelineMax = 2 seconds 2. Specifically time the elements to start and finish there animations within the first second. 3. Loop timeline So far I have the loop working and all animation running. the problem is that the duration is not 2 seconds long. I could really use some help straightening this out. Thank you in advance. tl1.insertMultiple( [ TweenLite.fromTo( byId("bac0"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:0,rotation:-360, top:159, left:649}} ), TweenLite.fromTo( byId("pill0"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:1,rotation:-360, top:159, left:649}} ), TweenLite.fromTo( byId("bac2"),.2, {css:{autoAlpha:1,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:0,rotation:360, top:410, left:500}} ), TweenLite.fromTo( byId("pill2"),.2, {css:{autoAlpha:0,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:1,rotation:360, top:410, left:500}} ), TweenLite.fromTo( byId("bac4"),.2, {css:{autoAlpha:1,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:0,rotation:-720, top:600, left:300}} ), TweenLite.fromTo( byId("pill4"),.2, {css:{autoAlpha:0,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:1,rotation:-720, top:600, left:300}} ), TweenLite.fromTo( byId("bac6"),.2, {css:{autoAlpha:1,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:0,rotation:330, top:222, left:100}} ), TweenLite.fromTo( byId("pill6"),.2, {css:{autoAlpha:0,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:1,rotation:330, top:222, left:100}} ), TweenLite.fromTo( byId("bac8"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:0,rotation:360, top:90, left:240}} ), TweenLite.fromTo( byId("pill8"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:1,rotation:360, top:90, left:240}} ), TweenLite.fromTo( byId("bac10"),.2, {css:{autoAlpha:1,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:0,rotation:-225, top:270, left:440}} ), TweenLite.fromTo( byId("pill10"),.2, {css:{autoAlpha:0,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:1,rotation:-225, top:270, left:440}} ) ],0, "normal",.1 );
  18. 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
  19. Hey guys... This is my first post to this forum... I am working on a project and i want to have a tweening effect similar to the 'Custom Presets : fly-in pause fly-out' option in Flash IDE. Its just that i want to create it with action script and want to control it properly through code. For the rest of the tweening in my project i am using 'Greensock's TweenMax'. So if someone can help me creating the same effect in this engine it would be helpful. Thanks.
  20. Hii I'm loading in a swf animation with a couple of frame scripts embedded on the loaded swf timeline. I managed to load in the swf, place it into a TweenMax instance, and placed that TweenMax instance into a TimelineMax instance so I can control the playback. The only issue I'm having is that the swf animation frame scripts are not firing off. This is an example of how I'm setting up the above: // This occurs after the swf is loaded var intro = LoaderMax.getLoader("transition_intro").rawContent; var introTransition:TweenMax = new TweenMax(_intro, _intro.totalFrames, { useFrames: true, frame: _intro.totalFrames, ease: Linear.easeNone } ); var timeline:TimelineMax = new TimelineMax( { useFrames:true, paused:true } ); timeline.append(introTransition); timeline.play(); Is there a way to have the loaded swf run a frame script on the defined frame (like mc.gotoAndPlay(0) or am I setting up this wrong? Cheers
  21. Could someone lend me some knowledge?!! Is it possible to take this addLabel string: overviewtl.addLabel("Sequence 01", overviewtl.duration); and have it update a dynamic text box on the stage. It's for client editing purposes, so they can have a reference to the sequence name within a long timelineMax build. My knowledge of AS3 really lets me down sometimes, but I usually manage from Carl's tutorials and the forums here to get what I need to work. This case, I'm stumped! I've already built in the progress bar and slider + play pause functions which all work a treat - this final bit would be the icing on the cake! Thanks in advance, Merrick
  22. I'm having a ton of trouble trying to use TimelineMax for JS. I cannot get it to work at all. I must be missing something (if not a few things). I am trying to use the appendMultiple and insertMultiple methods, but nothing seems to be happening. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tweening</title> <link type="text/css" href="exts_css/objects2Move.css" rel="stylesheet" /> <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/easing/EasePack.min.js"></script> <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/TweenLite.min.js"></script> <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/TimelineMax.min.js"></script> <script> var r = document.getElementById("tiny"); function hello() { TweenLite.to(r, 1, {css:{top:"200px", left:"450px", backgroundColor:"#FF0000"}, ease:Power2.easeOut}); } var tl = new TimelineMax(); tl.append(TweenLite.to(r, 1, {css:{top:"200px", left:"450px", backgroundColor:"#FF0000"}, ease:Power2.easeOut})); function animateAll(){ tl.play(); } </script> </head> <body> <div id="tiny"> help </div> <a href="#" onclick="animateAll()" style="left:220px; position:absolute;">Press me</a> </body> </html>
  23. I got a TimelineMax which repeats non stop (repeat = -1) UNTIL a certain event happens. When that happens, what I want is the animation to STOP REPEATING. Unfortunately, setting repeat to 0 also resets the "playhead" to 0 instead of waiting for the current animation to finish. I don't know if there is another method to do this. Also note that I'm using the OLD animation platform (2012-06-30 / TimelineMax 1.698). To accomplish my task, I had to make "_cyclesComplete" in TimelineMax publicly accessible (via property). Then: tl.repeat = tl.cyclesComplete; So the suggestion is to take care of this issue so that it is no longer an issue ::- D.
  24. 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!
  25. Hi there! I find there's something I'm not quite grasping using TimelineMax and fromTo, been trying all sorts of different variations, but shouldn't this work? Or am I missing something critical here? timeline = new TimelineMax(); timeline.append(TweenMax.fromTo(element, 1, {css: {left: "100", top: "100"}}, {css:{left:"130", top: "130"}} )); Appreciate all the help I can get, thanks!