Jump to content

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

Search the Community

Showing results for tags 'easing'.

  • 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. Hello, sorry if the title is not really clear. I'm trying to create a horizontal parallax animation with at least three layers. The end result should also be responsive, so I can't really use fixed numbers. Also, the image for the background is not the same size as the others. Let's say that the background is 8000px and the image on top is only 5000px. I want the scrolling to stop when the right border of the second image reaches the outer margin of the browser window. I kind of did it, but not quite right. In the pen I created, as you can see, after the character layer reaches it
  2. Hi! I'm wondering is it possible to use greensock easing on this plugin http://flesler.blogspot.com/2007/10/jqueryscrollto.html I know gs has scrollto as well, but this plugin can scroll to a specific div. But I'm using gs easing already, so I really don't want to add another easing library, is there a way to call gs easing function? Thanks! here's how to use that plugin $container.scrollTo('#img1', 500, { easing:'swing' });
  3. 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!
  4. So, here is an idea: Let's say I have an element that I want to have animated with different eases for the x and y props. Normally, to do that, I would have to do this: TweenMax.to("#box", 1, { x:200, ease:Power4.easeOut }); TweenMax.to("#box", 1, { y:200, ease:Power4.easeIn }); But, what if I could do it like this instead: TweenMax.to("#box", 1, { x:{ value:200, ease:Power4.easeOut }, y:{ value:200, ease:Power4.easeIn } }); I think that would be a pretty cool thing to have. Can you guys make this happen?
  5. Hey everyone, Warning: self-promotion to follow, but it may help other forum members so here we go. As you already know, easing is an important part of creating a great animation. If you’re at all like me, you like to experiment with a variety of eases and get a feel for how they work in your project. With that in mind, I’ve created a new GreenSock Easing Playground. Yes – we have the Ease Visualizer which is great and I highly recommend it. I wanted to create something a bit different though. My new CodePen offers position, scale and rotation options with 15 ease types in each se
  6. Am using gsap inside createjs/canvas if I have a ball, for example, tweening in diagonally, from top left to bottom right, say, with an easing bounce when it hits the bottom of the canvas, the bounce goes up and down, as I want, but also bounces backwards towards the left, when what I want in this case is for the bounce to go to the right. Is there a simple way to achieve that? Thanks
  7. I am reading Google Material animation guidelines. https://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight Has anyone able to mimic as close as possible to it? Does anyone has a set of easing values I can plug and play? Cheers, Venn.
  8. Hi. I would like to know if there a way with TweenLite to set multiple easing function for a tween which animate multiple properties ex: i wouil like to get an ease 'Quad.easeOut' for a position animation and a linear ease for the opacity TweenLite.to($icon,.8,{x:0,opacity:1,ease:[Quad.easeOut,Linear.easeNone]}); i search in the forum, but don't find the answer. Thanks a lot.
  9. Is there a way to directly use the penner easing functions (and other) included in GSAP? I run my own update loop (on Scroll) and just want to pass my values through the easing functions to make everything a tiny bit more awesome. Example of what I would like to do. passing in p (value of 0 to 1) start value 0, change value 1, and duration 1. Power2.easeInOut(p,0,1,1); right now I define the functions again in my code like this: var easeInSine = function (t, b, c, d) { return -c * Math.cos(t/d * (Math.PI/2)) + c + b; } easeInSine(p,0,1,1); would be great to hook into the greatn
  10. i have a little carousel and its not tweening to the full duration. i have the tween time set to '0.5' when you click on the "<" button the first 2 times it works, the 3rd time theres no animation as though the duration is set to '0' same if you click on ">" first 2 times its good, 3rd not tweening. am i setting something up wrong? thanks
  11. $(document).on("mouseenter", "#numbers", function(){ TweenMax.to(footer_number, 0.5, { css:{fontSize:new_footer_number_fontSize+"px"}, textShadow:"2px 2px 15px rgba(145, 233, 0, 1)", color:"#91ff00", ease:Power4.easeOut }); }); $(document).on("mouseleave", "#numbers", function(){ TweenMax.to(footer_number, 0.5, { css:{fontSize:old_footer_number_fontSize+"px"}, textShadow:"0px 0px 0px rgba(0, 0, 0, 0)", color:"#d6d6d6", ease:Power4.easeOut }); }); am i doing something
  12. pr1ntr

    onUpdate Easing

    Hi, I am trying to custom transform an svg polygon by feeding it the points arrays and have it add the difference on every frame between from to: http://pastie.org/private/owhlbo2kxu1rdiy48gjcaa So I want to be able to use the easing if one is provided (ie., in the call Cubic.easeOut) What is the best way to transform the values based on the ease?
  13. tween = TweenMax.fromTo(class_name, duration, {top: start_y_percent, left: start_x_percent, scaleX: 0, scaleY: 0, xPercent: -50, yPercent: -50}, {top: end_y_percent, left: end_x_percent, xPercent: -50, yPercent: -50, scaleX: 1, scaleY: 1, onReverseComplete:hide, ease: Elastic.easeOut}).progress(current_progress); Box elastic eases in, but on reverse(), I don't want the elastic ease (just the default ease). I've looked at http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/reverse/, but not sure if possible using reverse(). If not, what's the best way to do this? Thanks. UPDATE:
  14. I use different tween function at different points of a script; to clean code a bit, Id like to define things a bit more globally. It might be an obvious question, but I could not find a clue about how to define the easing used in different tweenmax actions as a global variable. Does it have to be accessed or defined specifically ?
  15. 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)
  16. Hi there, I am using the Quart.easeOut easing on all my animations. On some parts of my website, I would like to use the same easing but using CSS. How can I find the bezier function of Quart.easeOut?
  17. Usually what do you consider the MUST have easing functions when size does matter? If you were given a choice of only using 3 which ones would it be?
  18. What would you say is the closest penner equation to this css bezier curve?: http://cubic-bezier.com/#0,1,.5,1 Does anybody knows of a tool/generator to to translate css bezier equations to an equation and/or back?
  19. Hi I'm building an infinite horizontal image slider that slides when the user hovers over a 'next' or 'previous' buttons. The design requires the animation to gradually pause/resume with a subtle easing and not pause immediately. the only solution I found was to use an infinitely repeating tween for the slider, and attach a second tween to the buttons that tweens the 'timeScale' of the original tween with an easing. Is there a simpler native way to do so without creating a second tween? Thanks
  20. Hey guys, I'm playing a bit with GSAP to use for my future website. Gonna drop Snapsvg and only use jQuery along with GSAP. I was wondering how I could ease an animation in reverse differently? So let's say anim.play() will use ease:Elastic.easeInOut and the reverse() would use eg. ease:power1.easeOut. Is this possible? Here is a code-axample which I'm currently playing with; var animateThumbs = function() { var $anchors = $( 'div.col-md-4' ).children( 'a' ), ellipse = $($anchors[0]).find( 'ellipse'), duration = .25, ellipseProps = { from: { cy: ellipse.attr('cy'),
  21. Hi folks, I am jin , please accept my wishes , i have been working on as3 for some time now but was never good with animations, i came across this package and i can say this is nothing short of a miracle to me to be able to get the effects that greensock can provide .... In order to add more value to my projects i am trying to add a camera zoom in and out at certain points in my project , now i can do this by using the below code - TweenLite.to(WorldObj, 0, {scaleX:1.5, scaleY:1.5}); this zoom in remain for 3 seconds and then i do this to get to normal size - TweenLite.to(W
  22. Hey guys, It would be really nice if the Bounce easing had some configuration like the Back easing does. I'd like to be able to configure the bouncyness. Less bouncy objects would maybe only bounce once and not come back up very high Whereas others might be very bouncy and bounce for a long period and quite high relative to the original drop. What do you think?
  23. Hi there, sorry if this question has been asked and answered before. I tried to search, but have not found anything similliar. The idea is to make a transition where i start the transition with one easing and end up with an other easing. i.e. with Power3.easeIn and end with Back.easeOut. I would imagine something like this: TweenLite.to(jQuery('.item'),0.5,{x:100,y:100,ease:"Power3.easeIn, Back.easeOut"}); I tried with space, comma without success. I know i could make two animations for this after each other and making time half etc.. but i was just curious if there is a
  24. Hi All, I have a pretty specific question in which I have an Object moving along a vector that will eventually end up at a destination point and stop moving. The object in question is an asset that has a 'fly' animation sequence, a 'landing' animation sequence and an 'idle' animation sequence. The Object must move along a straight line coming from a random point on the stage at a fixed velocity. The object will begin to ease when it is exactly 30 frames away from the end point in which it will change into the landing sequence(which takes 30 frames). Once the landing sequence is complet
  25. Hi everyone! Let me start by saying GSAP is awesome. I was wondering if anyone had ported the RoughEase library from AS to JS, or something similar to that? I'm working on a project where I need to randomly affect elements over time (smoothly), and I think RoughEase would be amazing for the job. More specifically, I'm trying to replicate some old film effects – grain, shifting picture, flickering bulb, etc. My current solution is to start a tween for a random duration/value, then delay the next tween by a random amount, and have that process loop, effectively creating a sort of randomn