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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. 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' });
  2. 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!
  3. 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?
  4. 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 section. It’s all one big SVG with 45 animations and fully ready to zoom with the viewBox controls. I’ve added a variety of icon choices and color schemes as well. Hopefully you get some use out of it or at least a reminder of how some of the eases look. Special thanks to @greensock, @sarah_edo (Sarah Drasner), @vlh (Val Head) and @snorklTV (Carl Schooff) for the tweets/retweets this morning. It helped push my pen to the top of CodePen for a while which was pretty cool.
  5. 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
  6. 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.
  7. 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.
  8. 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 greatness of Greensock instead of defining them again. I'm using the latest js and tweenmax.
  9. 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
  10. $(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 wrong?
  11. 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?
  12. 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: I killed the tween and created a TweenMax.to to reverse the animation (but with some different properties).
  13. 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 ?
  14. 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
  15. 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?
  16. 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?
  17. 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?
  18. 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
  19. 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'), rx: ellipse.attr('rx'), ry: ellipse.attr('ry') }, to: { cy: -500, rx: 625, ry: 725 } }; //Let's set on every a-element a timeline as method $anchors.each( function(index, elem) { var ellipse = $(elem).find( 'ellipse' ), animateSvgBG= new TimelineMax({repeat: 0, paused: true }); animateSvgBG.fromTo(ellipse, duration, //from { attr: { cy: ellipseProps.from.cy, rx: ellipseProps.from.rx, ry: ellipseProps.from.ry }}, //to { attr: { cy: ellipseProps.to.cy, rx: ellipseProps.to.rx, ry: ellipseProps.to.ry }} ); //animateSvgBG.to(ellipse, 1, { attr: { cy: ellipseProps.from.cy, rx: ellipseProps.from.rx, ry: ellipseProps.from.ry }}, "fadeOut"); //labelsArray = animateSvgBG.getLabelsArray(); //console.info(labelsArray); elem.animate = animateSvgBG; }) $anchors.on({ mouseenter: function(event) { // from "fadeIn" to "fadeOut" //TweenMax.fromTo(animateSvgBG, duration, {time:labelsArray[0].time}, {time:labelsArray[1].time}); //console.info( "animateSvgBg: " + animateSvgBG, " labelsArray[0].time: " + labelsArray[0].time, " labelsArray[1].time: " + labelsArray[1].time ); this.animate.play(); }, mouseleave: function(event) { // nfrom "fadeOut" to "fadeIn" //TweenMax.fromTo(animateSvgBG, duration, {time:labelsArray[1].time, ease:Ease.easeOut}, {time:labelsArray[0].time}); this.animate.reverse(); } }) }
  20. 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(WorldObj, 0, {scaleX:1, scaleY:1}); But the zoom in and out happens rather abrubptly like in a fraction of a second , i want it to be a bit slow , i came across a thread that suggests this - TweenLite.delayedCall(2, slowDown); function slowDown() { TweenLite.to(WorldObj, 1, {x:0,y:0,scaleX:1.5, scaleY:1.5}); } i tried it, but it does not seem to do the work , can any one please guide me as to where i am going wrong and what i can do to make it work ..... Once again thanks in advance and hope to be able to contribute after some time .... Regards
  21. 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?
  22. 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 shortcut like shown above ? Thanks for your time and answer, Krisztian
  23. 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 complete the easing should be rounding down to 0 in which the object has completed its journey and now switches to the 'idle' sequence indefinitely. I have provided a screenshot below demonstrating my issue. Any help will be much appreciated as the math and when to play the landing sequence is giving me the most problems. I am trying to have the process of flying -> landing -> idling be very smooth and natural. The swf is running at 30 fps btw.
  24. 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 randomness to the flicker. I suppose it works, but it doesn't look great yet and doesn't feel as elegant as the RoughEease soltuion. Thanks in advance!
  25. Are there plans for the CustomEase functionality in the JS version? Been working on something today that it would have been a 'nice to have' on. In another post, I'd mentioned looking for the 'dynamicProps' functionality as well. I realize this is still in beta (a fantastic beta, BTW, ), so I realize you're still working on it. Consider this a vote of "yes, please" for these features. Cheers, John