Jump to content

Search the Community

Showing results for tags 'easing'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 53 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, I'm trying to animate the drag for the swiper with tweenmax. Now the dragging option is to quick and jerky. Dees anyone know how to animate the drag option with tweenmax to have an easing accelerate effect? Here is an example with a slider who has the drag options with nice easing options: http://www.benmingo.com/ Thank you!
  3. I'm trying to test out a scroll hijacking method I saw on http://www.adidas.com/us/climazone. On that page, they have a fixed position container with everything in it absolutely positioned and on page scroll they translate3d the elements up -Y scroll position which I can do but they key ingredient they add is easing to that scroll tracking. So as you scroll the elements follow "recreating the scroll effect" but upon release slowly ease into their final place which is the end Y scroll position. I've found this StackOverflow question, https://stackoverflow.com/questions/25056769/how-to-add-easing-to-parallax-movement, where it talks about javascript easing mixed with parallax, however, I can't seem to figure out how to apply it to what I'm doing or what I want my end result to be. I also found this JSFiddle where it adds easing based on mouse movement that I thought might be helpful to use pieces from for easing, http://jsfiddle.net/74mnpgs7/4/. I've added a link to my current CodePen example with my starting point, any help achieving/deconstructing what Adidas Climazone is doing to add easing to their scrollY transforms would be eternally grateful! Another demo I did on JSFiddle is here: https://jsfiddle.net/416ne38h/5/ Bonus if I can use GSAP for this!
  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. In a project I'm doing, I need to match easing feel of elements animated using CSS cubic-Bezier timing function (example:cubic-bezier(0.1, 0.9, 0.2, 1) using tweenmax. Is this supported in GSAP ? I'm trying to avoid writing my own cubic-Bezier plugin if possible Thanks! Orry
  6. One of the things that keeps bugging me about GSAP is the fact that I don't know what each 'Tween <Lite, Max ... etc >' is capable of out of the box. When do I have to add whatever random plugin to be able to do certain stuff. Now, I was fiddling around with the easings of a TweenLite ... but no matter what I put it nothing really seemed to change. Then I though, »Well, maybe I can't even do that without some plugin?«. Could I for instance just slam: ``` ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 1, points: 20, taper: "none", randomize: true, clamp: false }), y: -500 } ``` to the ease property of a TweenLite? If not, how would I know? Is there any place somewhere on this site – the docs maybe – where I can get a complete overview of what each 'package' it capable of out of the box, without any plugins? If not, then I'd suggest that feature to have.
  7. Hi. We have a digital signage content editor with many widgets, and 2 of the widgets use gsap with jquery plugin, and we added another jquery plugin for a new widget (http://wowslider.com/), and a few of the features in that library didn't work, I was debugging for a long time when I found that it conflicts with the gsap jQuery plugin, more precisely the easings defined on the jQuery object, for example jQuery.easing.easeInOutExpo, because the easings share the same name in both libraries, but they work differently, the variable has different function references in the two libraries. Currently the gsap definition is in place, which causes some wowslider features to not work. I tested removing gsap, and then those features worked. I already contacted their support, but they couldn't give a solution, and I want to avoid modifying the code of these libraries. All I would like to ask for is some tips to avoid this issue. Is there a no-conflict option in gsap plugin? Can I separate two jQuery instances for the two libraries? Thanks in advance! Roland
  8. mikel

    Oooops ...

    Hi, To be honest, I just wanted to try different easings and a countdown. But with a little story it was really funny ... Kind regards Mikel By the way: GSDevTools is very helpful. I noticed, however, that in reverse, the centering of the object (pathDataToBezier) is not interpreted expected. Is that due to my coding?
  9. SteppedEase is convenient for animating in a linear fashion between frames in a spritesheet, but what if I want an easing between each step? Is this possible? Let's say I want a monster to die and go through 10 frames of animation, but I don't want it to go through the frames in linear jumps. What if I'd like a Quad.easeOut through the steps for a more dramatic effect? Is that possible?
  10. 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 !
  11. Can someone assist me on change this current animation: TweenLite.fromTo(spot_holder[kNumIterator], 2, {left:pointAX, top:pointAY}, {left:pointBX, top:pointBY, immediateRender:false}); to this: TweenLite.fromTo(spot_holder[kNumIterator], { ease: Bounce.easeOut, y: -500 }); or what do I change to make the animation HAVE a bounce effect, zoom effect or any other effect
  12. Hi there! Is it possible to apply only specific interval of ease function to my tween. Something like: TweenMax.to( startPos, 2, endPos ); endPos.ease = Power2.easeInOut.interval(0.25, 0.9); I don't want skip first 0.25 and last 0.1 progress of my tween.
  13. 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!
  14. Sometimes I thought it would be nice to blend easings from one type to another while time goes by. And then it would be cool to have as much control over how the blending is done as possible. So I created a showcase, not yet a real easing plugin. I don't know how useful it might be to GSAP users, but there are some applications like: Going from linear to an elastic ending or from rough ease to clean ease. This might be especially interesting for long tweens maybe. The syntax is: mixTween(eases,ratios,blendTweens) // example: mixTween( [Linear.easeNone,Elastic.easeOut], [0.2,0.4], [Power2.easeInOut] ); The first array, eases, can be an array of at least 2, but as many eases you like. The second array, ratios will define the time-points of the eases. In the above example, the tween will stay linear until 20% of the tween. Then it starts blending to Elastic.EaseOut until 40% of the tween and stays EaseOut until the end. This parameter can be ommitted. If ommitted, evenly spaced values are calculated. The third array defines HOW the blending should be made. Just linear blending (default if ommited) won't always look best. So you can use any easing function to define how fast one ease blends into the other. In the example above, the easing is smoothly transitioned by a Power2.easeInOut, so there won't be any "sharp" change when the blending begins. You might get a good example of what this does by looking at the codepen I left here I could imagine this to be implemented in a similar way to CustomEase. like BlendedEase(...)
  15. I was wanting to create a multi-word, repeating 'swinging-sign' animation similar to Jamie Jefferson's here: https://codepen.io/jamiejefferson/pen/zjsCl The way he has that set up (and I'm sure he had to do it that way at the time) called an onStart function that created the swinging effect. That sort of wreaked havoc on the idea of being able to "replay" the timeline. So I pulled up the awesome ease-visualizer and created a custom ease that basically did the same thing. Made for a really simple way to recreate Jamie's awesome effect. I've seen a few folks on stackoverflow and elsewhere wanting to do this so thought I'd post this here for anyone struggling with it. Here's the custom ease: ease: CustomEase.create("custom", "M0,0 C0.128,0.572 0.052,1.374 0.15,1.374 0.28,1.374 0.226,0.528 0.358,0.528 0.466,0.528 0.442,1.164 0.552,1.164 0.694,1.164 0.62,0.764 0.736,0.764 0.788,0.764 0.798,1.044 0.856,1.044 0.88,1.044 0.924,0.948 0.94,0.948 0.961,0.948 0.993,1 1,1")
  16. I'm playing around with the new eases, Custom Bounce and Custom Wiggle. Im comparing two identical tweens, except for the easing tl.to(blue, 1, {top:400, ease:"myWiggle"},"start"); with this the item would move down 600px from the top and "stay there"- just a normal tween tl.to(green, 1, {top:400, ease:Power2.easeIn},"start"); this wiggle tween works fine- but the item ends up back in its original position, I am confused by this behavior. I added a third tween using from and that ends up on top as it should, tl.from(red, 1, {top:400, ease:Power2.easeIn},"start"); why does this easing function change the ending position property? I'm not used to that, and not sure how to plan for it. Thanks, Chris
  17. Hi, is there a way to change the easing method of a tween in a timeline when reversing the timeline? My example.: var tlDrops = new TimelineMax({paused:true, delay:2, reversed:true}); tlDrops.from("#geschenkedrops", 0.2, {bottom:0, right:15, ease:Back.easeOut}, "starting") .to("#geschenk", 0.5, {autoAlpha:0}, "-0.1") .to("#merci-button", 0.5, {autoAlpha:1}, "-0.1") .from("#hauptgeschenk", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:180, ease:Elastic.easeOut}, "geschenke") .from("#geschenk2", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:160, ease:Elastic.easeOut}, "geschenke") .from("#geschenk3", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:140, ease:Elastic.easeOut}, "geschenke") .from("#close-button", 0.2, {bottom:25, right:25, ease:Sine.easeOut}) .to("#geschenkedrops", 0, {autoAlpha:1}, "closing"); Now I would like to change all Elastic.easeOut easing methods into a different method (e.g. sine.easeIn) on timeline reverse. Is that possible, or do I need to create an extra timeline for the reverse function? Thanks so much, Rob
  18. 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.
  19. Hey everyone! I have come across a small issue and was wondering if someone could help me sort it out. To quickly give some background: I'm building a simple app which randomly picks a person by spinning a wheel of names. The wheel spins a few times before eventually resting on the target. I've found that with longer animations and more complex easing equations the end of the animation jumps a proportion of the distance / rotation. I've recorded a couple of examples below: Easing: Power0.easeNone Easing: Expo.easeOut As you can see, at the end of the animation there is a tiny little jump. For the sake of the gif I've actually shortened the tween duration and reduced the amount of rotation. If I increase it the jump is even more pronounced. Take a look at the CodePen example as well which illustrates the issue. While setting up that example I also noticed that there is a jump at the beginning of the tween. Does anyone have any ideas of how to sort this? Thanks, Will
  20. Hello, I went throught the doc and couldn't find anything. Is it possible to set an easing function to a timeline and have it like inherited from all the Tweens in the timeline?
  21. 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 its end, the background still goes on for a little while. Is there a way to avoid this? Or a better approach to the whole thing?
  22. 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' });
  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. 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?
  25. 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.