Jump to content

Search the Community

Showing results for tags 'ease'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 33 results

  1. hi everybody, how proceed to mix diferente ease at start and end : i cant find doc? It possible ? Example: Something like thats, assuming the tween compute the half/time in the process ? TweenMax.to(bar, 1, { rotation:-Math.PI/2, ease:[Back.easeIn.config(1.2), Bounce.easeOut], }); or like this ? TweenMax.to(bar, 1, { rotation:-Math.PI/2, ease:{ start:Back.easeIn.config(1.2) , end:Bounce.easeOut }, }); or ... TweenMax.to(bar, 1, { rotation:-Math.PI/2, ease:{ '0':Back.easeIn.config(1.2) , '0.5':Bounce.easeOut }, }); or... TweenMax.to(bar, 1, { rotation:-Math.PI/2, easeIn:Back.config(1.2), easeOut:Bounce, });
  2. Hi guys! Why Tween is not easing? I'm struggling on it! Tnx
  3. I was wondering if there should be a config available for Bounce ease as well like the ones that are available in Elastic as well as Back eases. The use-case for example is to control the number of bounces as well as the amplitude, for lack of a better word i.e. the force with which it bounces back everytime it hits the floor. Example: jsFiddle. Thoughts?
  4. hi it possible to use chaining function ease instead of property ? What a read it that TweenLite.to(obj, 2, {pixi:{pivotX:x, pivotY:y},ease:Power2.easeOut}); but i look for a way to write the easing like this, with chaining ? I took this habit on an old Easing library. TweenLite.to(obj, 2, { pixi:{pivotX:x, pivotY:y} } ).ease(Power2.easeOut); Existe a way to write ease more eyes friendly ? thank Am new from some minute ago , so am studying this library:)
  5. Good Day Fellow GreenSockers, GreenSock has recently released a new video tut on a new ease called ExpoScaleEase for smooth scaling and zooming. https://greensock.com/docs/Easing/ExpoScaleEase This video tut was made by the Mighty @Carl, take it away Carl: If you haven't already done so, please check out and subscribe to the GreenSock Learning YouTube channel for more video tutorials. This way you don't miss out on new features and great learning videos from GreenSock. Happy Tweening
  6. Hi, I am creating a responsive animation where there's an image on the background and some elements of it are animated. For example, I would like to move a cloud 20% of the screen width, but with the code that I have, it's moving it but of a 20% of the cloud width. Does anyone know how to do it of the screen width instead of the cloud width? This is my code: TweenMax.to('#cloud', 5, { x:"20%", ease:Power1.easeInOut, yoyo: true, repeat:-1 });
  7. Simple question with perhaps a complicated answer. Is it possible to animate multiple objects towards a central point in GSAP? Rather than adding positioning tweens to each individual object? For example I have a scene with objects around the canvas, I'd like them to slide onto the canvas towards the middle of the canvas.
  8. Hello, When dealing with complex looping animations I always use a linear ease. I find it rather cumbersome having to add a ease to each propriety. I know you can set it globally, but then my other timelines get messed up... Seems to be asked often, seems like a logical thing to be able to do. Maybe am looking in the wrong place.
  9. Hi, I'd like to know how to import the Easing package when using ES6? Or any other for that matter. At the moment I noticed that even though I did not import easing, it's available when importing TweenLite. So, I'd like to understand what I'm importing and when I have to import (a package, or the need to be specific). import { TweenLite } from "gsap"; TweenLite.fromTo(this.refs.logo, 0.8, { opacity: 0, x: 50 }, { opacity: 1, x: 0, ease: Bounce.easeOut })
  10. I've added some code to allow the timelne start slow and end fast. I want to put this on a master timeline with others. If you uncommnet out my Master timeline you will notice the time line tween no longer takes effect TweenLite.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn}); I 'm clearly doing something wrong as this is not adding to the master timeline as I would like. any help would be much appreciated Ryan
  11. Is there a simple way with TweenLite, to disable all ease? Or rather does TweenLite have a built i default ease, such as Linear or other? - that I can disable. Thanks ".S"
  12. The codepen is a simple version of a timescale tween either speeding up or slowing down. It uses directonalRotation. I'd love to be able to detect the first and last repeat and add easing specifically to those 2 tweens. I thought about creating 2 separate tweens to be the first and last and then sandwich a repeating one inbetween those but wondered if there was a way to automate that. For the ball rotation, it would be cool to be able to apply a Back.easeIn to the first one and a Back.easeOut to the last one.
  13. Hi there, What I want to do is have a tween that moves 250px right, has a Power3.easeIn and a Back.easeOut. I can animate the Power3.easeIn fine but how to do get the Back.easeOut. at the end of this movement?? Power3.easeIn line of code: TweenMax.to( $( '.mybox' ), 2, { right: 250, ease:Power3.easeIn}, 2); Im sure its not too hard but I cant seem to work it out. Thanks in advance.
  14. Hello! I'm currently using TimelineMax() to create a timeline for a custom Easing function. The custom Ease is working as expected, so there are no problems with that. However, I came across a part in the docs where it mentioned the config() method could be used with newer versions of Greensock instead of the standard extraParams method. This is how I'm passing parameters at the moment: new TimelineMax().to(box, springTiming, { delay: 1, x: 400, ease: new Ease(springFrame, [spring]) }) How would I be able to use the config() method to pass it the same way? Also, would it be beneficial in doing so? Thanks in advance.
  15. Let's say we have a tween animation already added to a TimelineMax instance. The Timeline is looping (infinite repeat) but while watching it loop I want the user to have the option to check out some other ease options. Is there a way to dynamically add/replace the ease values to an existing, running tween? Or would I need to completely replace what's there?
  16. Hi! I´m using (ease: Power0.easeNone) in all the tweens and the movement is not linear like it should. It should run exactly the same as when the cube closes. Also if you run it on IE it starts all glitchy. Why the ease: Power0 is not working and why IE have those problems? Hope somebody can help me, thanks!
  17. Can I combine multiple tweens and run them with one ease function? Something like this: var el = $('#some-element'); var tw1 = new TweenMax.to(el, 1, {left: 100}); var tw2 = new TweenMax.to(el, 1, {left: 200}); var tw3 = new TweenMax.to(el, 1, {left: 300}); var tl = new TimelineMax({ease:Power2.easeOut}) .add(tw1) .add(tw2) .add(tw3); I've made sandbox examples for this issue: 1. http://codepen.io/panych/pen/qpjCK 2. http://codepen.io/panych/pen/aLHGy We need to make to move the box from the first example with one common easing function, as it has been shown in the second example, but without removing middle tweens.
  18. Hello all. I have a container as below: .section-fixed{ position:fixed; width:0px; height:0px; top:-280px; right:-280px; overflow:hidden; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; background:transparent; opacity:0; z-index:10; } which there is a few items within it: .item-f{ text-decoration:none; top:calc(50% - 15px); left:calc(50% - 15px); position:absolute; border-radius:50%; width:30px; height:30px; text-align:center; color:black; font-size:25px; cursor:pointer; } <section class="section-fixed"> <div class="main-menu-f"> <div id="HomeButton" class="item-f">A</div> I wrote a code with TweenLite as below: if(//some condition){ TweenLite.to('.item-f:nth-child(1)', 0.6, {x:0.98 * -220.56290407832017,y:0.98 * 30.932307155207802,rotation:360,autoAlpha:1,ease:Back.easeOut.config(1.87)}); else{ TweenLite.to(".item-f:nth-child(1)", 0.6, {x:0,y:0,rotation:-360,autoAlpha:0,ease:Back.easeIn}); } The problem is for when if condition is true, unfortunately ease function doesn't work correctly and the element moves in its way, simply. But when the else condition is true, Back.easeIn done correctly. What's going on? Can everybody help me at this?
  19. Hi All, I have looked through this forum here, but I didn't quite see this discussed. I want to change the easing type between a play() and reverse() animation on a TweenMax. However, it seems to change the ease type only once, and all subsequent attempts to use updateTo seem to do nothing. I did find a really hacky way around the issue by adding tween._ease = tween.vars.ease; after the updateTo. You can see this in the CodePen by uncommenting line 4. That does not seem like the right way to actually do this. This feels like I'm just missing something simple, but I've looked at the docs and Googled around and I don't see where my error is.
  20. How does the Ease Visualizer [Link] draws graph based on the selected ease? What properties are being animated that change the graph's points to mimic the selected ease equation? I tried to make sense of it all by looking into the source code but minified sources melt my brain even after using some online beautifiers (they cannot really beautify variable and method names of course or am I missing something?). I am trying to create something similar, for fun purposes and to quench my curiosity.
  21. I am trying to sync a short audio clip to fire at every 180px as a div scrolls horizontally. If this animation were linear, it would be easy...but I am using Power4.easeOut and I am not sure how to synchronize the audio clip with the rate of deceleration in the tween. Any help on this issue would be much appreciated! Essentially, I want the audio clip to fire every time one of those blue squares passes the green line in the middle (view codepen). $(document).ready(function() { // Animation Variables var target = $('.animation--scroll'); var animTime = 3; var random = Math.random() * 170; var rewardItem = $('.rewardItem-container'); // Audio Variables var scrollSound = new Audio('/img/animations/8bit_coin.wav'); // Animation Functions var tween = function(index) { TweenMax.to(target, animTime, { ease: Power4.easeOut, x: (index * -180) + 90 - random }); }; $('.toggle-animation').click(function() { tween(5); // this is where I want the sound to play, but in a loop at a decele // rated rate. scrollSound.play(); }); });
  22. Hi, I recently discovered GSAP and it looks amazing. I'm currently developing a game, and I want to change my hardcoded animations to use GSAP. I have an Air drop animation. (plane fly from from A to C, and drop parashoot at B Currently its all handled with an animate function thats called every frame with a delta-time. And i have all the control in the world. but its just alot of work and time for simple animation). My problem converting to GSAP: When the parashoot is dropped, it starts with a scale of "1.2" in both x and y. and over 5 seconds the scale animates to "0.4". This is not a problem. But I want some soft "noice" to it, to make the parashoot seem more alive. some random soft variation in X and Y scale. In my hardcoded animation i just used Math.cos / Math.sin and applied it to the elapsed duration. and appied that as a factor to my scales, after the scales had already been lerped between its Start and Target scale. I also want to wiggle the parashoots rotation on its way down. But I guess that could easily be solved with a seperate "yoyo" timeline. Solution? I guess one solution would be to make a CustomEase and use that on the "main" scale tween. But is there a way of achieving this without using CustomEase?
  23. rgfx

    Animating Timescale

    Trying to start my animation slow and then speed up gradually. I read there is way to animate timescale, but am not sure how. Does https://greensock.com/customeasework for JS? If so is there an example of implementation? Thanks.
  24. Taraz

    Default Ease

    Why isn't the default ease set to "ease: Linear.easeNone"? I spent half of a day trying to figure out why my objects were bunching up.
  25. 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