Search the Community
Showing results for tags 'easing'.
Found 63 results
-
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
-
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
-
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.
-
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!
-
Perhaps I'm implementing this wrong, but I'm having issue getting easing animations, such as Bounce, to actually...bounce! Instead, it just slides open. I'm probably implementing it wrong, so if anyone can help, that'd be greatly appreciated $(topArea).animate( { top: "-40px" }, 250, "bounceInOut" );
-
What is the most reliable and efficient way to detect if EasePack JS file was already loaded elsewhere on the page and is available (in an effort to prevent loading it again)? [EDIT: also, detecting if the various plugins were loaded too would be helpful]
-
Hi all, In previous versions of GSAP you have the OutIn easing equations, such as BounceOutIn. In GSAP v12 however, I can't find these. Even in the main class Bounce, I have only spotted 3 variants of the ease : out, in, and inOut. Where's the OutIn versions of each ease? Do you have to use InOut as OutIn by reversing it in some way? Am I missing something here? Thanks
-
Hi all, I recently stumbled upon MoveThis, another tweening engine. If you scroll down to the Gears demo, you'll see demos of Arch and Reverse, probably 2 tween easing equations. (I can't figure if they are just different names for existing Penner equations, although they are signed by "Todd Williams" aka taterboy) Would adding these eases into TweenLite be of any use? Unless they are already added. Also, MoveThis has a nice "easingStrength" parameter that apparently controls the amount of ease applied. Does TL have anything like that? Would it be a useful addition? Thanks
-
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
-
I have a 30sec Linear.easeNone tween happening but I want only the last 2 seconds to Sine.easeOut. Is this possible?
-
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' });
-
HI, I am currently creating a little Flash IDE animation exporter which exports a timeline animation using JSFL. Part of what i am exporting is the custom ease curve that you get in the IDE. Here is an example of what it spits out: [{ x:0.00000, y:0.00000 },{ x:0.33333, y:0.00000 },{ x:0.66667, y:0.33333 },{ x:1.00000, y:1.00000 }] What i am trying to do it convert this curve into a CustomEase. This is what i am currently doing: 1. First put all the x values into an array and another for the y. ( points.x and points.y ) while( i < points.length ) { bezierPoints.x.push( points[i].x ); bezierPoints.y.push( points[i].y ); i ++; } 2. Use BezierPlugin.parseBeziers( points, true ) var parsedBezierPoints:Object = BezierPlugin.parseBeziers( bezierPoints, true ); 3. Pull out the y values from parsedBezierPoints and put them into an object of s, cp, and e var yPoints:Array = parsedBezierPoints:Object.y var data:Array = [] var i:int = 0; while ( i < $points.length ) { data[i] = { s:yPoints[i][0], cp:yPoints[i][1], e:yPoints[i][2] }; i++ } example trace: [{"e":0,"s":0,"cp":-0.08325},{"e":0.333,"s":0,"cp":0},{"e":1,"s":0.333,"cp":0}] 4. Create the custom ease using the new data CustomEase.create( "DIGEase", data ); For some reason i keep getting a gitter and not a smooth ease on the animation. Can anyone see if im doing something wrong or point me in a right direction. Thanks in advance.
-
Hello. I'm looking for some direction in finding code that will pivot text in 3D with easing and blur/fade text with an alpha setting. I've attached an SWF file that gives the idea for what I'm looking for. Any help would be appreciated! Thanks. Tim Test.zip
