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
  • 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. As far as I see the scrollTrigger pin feature, it acts like `position: sticky` in feel. Scrolled elements move with the same speed as the scrollbar. When an element gets pinned/sticky, it hits a wall and goes from a 100 to 0 in an instant. That doesn't feel very good. Unfortunately I don't have a codepen to illustrate what I want, because.. well, I wouldn't need to ask then, would I? But back in 2017 I've made an animation that comes very close to what I want to do now: https://dumbo.design/airberlin (the laptop mockup as chapter intro) The difference to wha
  2. I have a gsap timeline, which I trigger on hover and play it reversed on mouseleave. However I need to change the easing when I play the timeline reversed. Is there a way I can do this without duplicating the whole timeline again? Here is a stripped down example, full example is in the codepen. const ease = 'power2.out' const tl = gsap.timeline({ paused: true }) // tweens here... card.addEventListener('mouseenter', (e) => { tl.play() }) card.addEventListener('mouseleave', (e) => { // need to somehow change the easing to '
  3. toye

    unresponsive ease

    I tried to animate my hamburger menu but the first bar isn't responding to the ease, what am I doing wrong? Please help
  4. One thing I'm failing to understand is why, when I write eases, .out is different to .easeOut. E.g. if I change the ease below from .out to .easeOut, it yields a different ease. Can someone point me to where I can learn more in Docs? gsap.to('.someElement', 0.6, { yPercent: 60, ease: 'Power3.out' }
  5. I hope this is a fairly simply question I'm moving an item like this gsap.fromTo("#graphMaskHandle", 60, {x:-155}, {x:0}); It seems to start moving more quickly then slow down as it goes on. Is there some kind of easing on as default for gsap? If so, how do I turn it off and get linear motion? If not, any ideas what's going on? (I'm forbidden from sharing my code on CodePen, unfortunately) I'm using it to reveal a graph over a 60 second period, so the graph needs to be revealed to match up with "seconds" on the x axis. I'm a newbie to gre
  6. GreenSock

    Ease Visualizer

    The ease-y way to find the perfect ease A solid mastery of easing is what separates the top-notch animators from the hacks. Use this tool to play around and understand how various eases "feel". Notice that you can click the underlined words in the code sample at the bottom to make changes. Some eases have special configuration options that open up a world of possibilities. If you need more specifics, head over to the docs. Quick Video Tour of the Ease Visualizer A special thanks to Jamie Barlow who built almost the entire thing. He's one of our all-stars in the forums, lendin
  7. 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 })
  8. Hi everyone, I was about to implement something like this in my current project, but I guess the GSAP codebase already have it, is it accessible for something else than DOM manipulation? Best.
  9. 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...
  10. Hi guys! Why Tween is not easing? I'm struggling on it! Tnx
  11. 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?
  12. 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:)
  13. 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
  14. 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 });
  15. 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.
  16. 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.
  17. 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
  18. 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"
  19. 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.
  20. 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.
  21. 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 b
  22. 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?
  23. 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!
  24. 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
  25. 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="HomeButt