Jump to content

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

Search the Community

Showing results for tags 'ease'.

  • 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. mlovett

    Ease on Play

    Hello all! So I have button that plays a timeline when it's mousedown and then stops when mouse up, but I want it to ease into the play every time the button held down, so it doesn't feel so linear. I haven't really used TweenLite very much, and I have the TweenMax script in my document. So far my code looks like this: var omni = sym.getSymbol("omnibed_side"); var pos = omni.getPosition(); if (pos < '3000') { omni.play(); } else { omni.stop(); } I was thinking it'd go inside the "if" statement. Any help would be greatly appreciated! -mlovett
  2. Hi, For the purpose of distilling this problem to its principal components, let's say I have 2 object that are side by side, say at y=100 pixels. I want both of those to fall down the screen, but to different destination y locations. I want them both to accelerate (easeIn), at the same speed, even though their distance to tween is different. Also I want to cap their final velocity, so they never fall faster than pixels/sec. Here is an illustration: (initial position) Sprite1 Sprite2 (fromX = 0, fromY = 0) (fromX = 100, fromY = 0) (toX = 0, toY = 200) (toX = 100, toY = 400) (falling --> Sprite 1 and Sprite 2 have the EXACT same Y location as falling, since they are using the same custom easing IN function to control their acceleration and final velocity) (falling) .. .. .. Sprite1 has stopped here) Sprite1 (x=0, y=200) Sprite2 (is at the exact same Y locations because they are following the same easing IN function, regardless of total distance to travel (Sprite2 continues to fall until it reaches it target location of y=400) Sprite2 (x = 100, y = 400) Thanks, --Kestal
  3. hi, I am new to greensock js but it just seems to be awesome. I just got started tonight as I had to find a way to smoothen a javascript animation in one of our other projects. GreenSock animation it seems does not cause other animations to stutter/stop/jerk. But I quickly need this small help I have to move (100px?) an html element from point a to point b, and then fade it out. I have to keep repeating this sequence. A normal move should suffice but if I can add some easing or something then it will be great. Let me explain the scenario: I have an arrow that actually represents a moving vehicle. I just need to animate this arrow (make it appear as if it is moving from point a to point b, and then fade it out. Then repeat the sequence again. I just coded something like var logo = document.getElementById("id_1_2_c"); TweenMax.to(logo, 1, {left:"100px", repeat:-1}); But I need it to move right, and fade out once it reaches the end. Then it will have to appear and start moving from left to right again, and then fade. This sequence should go on infinitely. If I can add any easing to make it look nicer, that will be awesome Thanks a ton, If anyone can suggest how I can achieve this, it will be wonderful. Harish
  4. I'm trying to ease an element that is being translated to the left by a percentage amount. Easing doesn't seem nearly as effective as when I'm translating by a pixel amount. Any ideas on what I should do?
  5. I have movie clips rotating in a circle. When they near the end of their rotation, they slow down. I would like the rotation to be at a constant speed the whole time. This is my code: var circle:CirclePath2D = new CirclePath2D(275, 200, 45.15); function rotateCircle():void{ TweenLite.to(Circle3, 4, {circlePath2D:{path:circle, startAngle:90, endAngle:90, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}}); TweenLite.to(Circle2, 4, {circlePath2D:{path:circle, startAngle:18, endAngle:18, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}}); TweenLite.to(Circle4, 4, {circlePath2D:{path:circle, startAngle:306, endAngle:306, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}}); TweenLite.to(Circle1, 4, {circlePath2D:{path:circle, startAngle:162, endAngle:162, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}}); TweenLite.to(Circle5, 4, {circlePath2D:{path:circle, startAngle:234, endAngle:234, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}}); }
  6. Hi, I am trying to make an animation where a wheel eases in to rotate quickly then stops really slowly for 10 seconds. So I would like it to run slowly for about the last 3 seconds. I am struggling to get this really slow ease out and was hoping someone would have some advice? I have looked at every ease class available, I have tried making my own custom ease, but it seems I just cannot physically achieve the ease out I want. I have also tried using the ThrowProps plugin but again the easing was not good enough. All I want is an ease out that causes the rotation to move really slowly for the last third of my animation. I generally use the TweenLite.to() method to start my animation. Thanks!
  7. What is the most reliable and efficient way to detect if EasePack JS file was already loaded elsewhere on the page and is available (in an effort to prevent loading it again)? [EDIT: also, detecting if the various plugins were loaded too would be helpful]
  8. 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
  9. HI, I am currently creating a little Flash IDE animation exporter which exports a timeline animation using JSFL. Part of what i am exporting is the custom ease curve that you get in the IDE. Here is an example of what it spits out: [{ x:0.00000, y:0.00000 },{ x:0.33333, y:0.00000 },{ x:0.66667, y:0.33333 },{ x:1.00000, y:1.00000 }] What i am trying to do it convert this curve into a CustomEase. This is what i am currently doing: 1. First put all the x values into an array and another for the y. ( points.x and points.y ) while( i < points.length ) { bezierPoints.x.push( points[i].x ); bezierPoints.y.push( points[i].y ); i ++; } 2. Use BezierPlugin.parseBeziers( points, true ) var parsedBezierPoints:Object = BezierPlugin.parseBeziers( bezierPoints, true ); 3. Pull out the y values from parsedBezierPoints and put them into an object of s, cp, and e var yPoints:Array = parsedBezierPoints:Object.y var data:Array = [] var i:int = 0; while ( i < $points.length ) { data[i] = { s:yPoints[i][0], cp:yPoints[i][1], e:yPoints[i][2] }; i++ } example trace: [{"e":0,"s":0,"cp":-0.08325},{"e":0.333,"s":0,"cp":0},{"e":1,"s":0.333,"cp":0}] 4. Create the custom ease using the new data CustomEase.create( "DIGEase", data ); For some reason i keep getting a gitter and not a smooth ease on the animation. Can anyone see if im doing something wrong or point me in a right direction. Thanks in advance.