Search the Community
Showing results for tags 'easing'.
Found 63 results
-
I think it could be a great feature to allow fine ease function which could be less optimized but will enable some transition that are actually hard to perform. Well, i'll give an example : Quite often i feel the need of a transition with a short and strong acceleration followed by a long and smooth deceleration. Power[0,1,2,3,4] currently only let me choose similar acceleration and deceleration (PowerN.easeInOut). Why not embed a function that permit custom InOut ratio ? (cf codepen) This function could be something as following : function FineEase(i, p) { // i: inflection // p: power // x: value return function(x) { return x < 0 ? 0 : x > 1 ? 1 : x < i ? 1 / Math.pow(i, p - 1) * Math.pow(x, p) : 1 - 1 / Math.pow(1 - i, p - 1) * Math.pow(1 - x, p); }; } Gimme your feedbacks !
-
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!
-
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?
-
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.
-
Hi guys, Just a quick query... Using the easing tool at: http://greensock.com/ease-visualizer If you switch to SteppedEase, with it on the graph (as it's clearer), is there any way to force it to take its first 'step' immediately? With config(2) set, it goes along the following axis: x,y,x,y,x Is there a simple way to switch it so that it goes: y,x,y,x I realise that's a slightly shorter transition, and I have worked out that I can use delays in the timeline to achieve the result I'm looking for, I'm just wondering if such an inherent ability exists within GSAP as standard? Thanks a bunch!
-
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.
-
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
-
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.
-
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.
-
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
-
$(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?
-
I created a new ease that I find myself using a heck of a lot. You could think of it kind of like a backwards Back ease but with some additional smoothing towards the opposite end of the ease. I call it Anticipate. Its great for cartoonish-like motion where there is a build-up followed by a follow through. Picture a baseball player winding up for a pitch and then letting the ball go and it slowly comes to a stop in space. The ball would momentarily go backwards and then fly fast for a while until it came slowly to a stop. This type of animation is a lot more organic than your typical Back.easeOut. If you'd like to try it out... I modified a version of TweenMax to include this ease: TweenMax With Anticipate Ease Or just fork the CodePen demo.
-
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?
-
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).
-
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 ?
-
The ease-y way to find the perfect ease Easing allows us to add personality and intrigue to our animations. It's the magic behind animation, and a mastery of easing is essential for any skilled animator. Use this tool to play around and understand how various eases "feel". Some eases have special configuration options that open up a world of possibilities. If you need more specifics, head over to the docs. Notice that you can click the underlined words in the code sample at the bottom to make changes. Quick Video Tour of the Ease Visualizer Take your animations to the next level with CustomEase CustomEase frees you from the limitations of canned easing options; create literally any easing curve imaginable by simply drawing it in the Ease Visualizer or by copying/pasting an SVG path. Zero limitations. Use as many control points as you want. CustomEase is NOT in the public downloads. To get access, create a FREE GreenSock account. Once you're logged in, download the zip file from your account dashboard (or anywhere else on the site that has a download button). Club GreenSock members even get access to a private NPM repo to make installation easier in Node environments.- 4 comments
-
- 6
-
-
- features
- steppedease
- (and 13 more)
-
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 -
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?
-
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? -
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?
-
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
-
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(); } }) }
-
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
-
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?
-
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
