Questions tagged [easing-functions]

...functions attributed to Robert Penner for moving objects smoothly from one on-screen position to another with the illusion of smooth acceleration, deceleration and mass.

Easing is an important topic for anyone who wants to define a point on a computer screen and move an object smoothly to that point in fixed timeframe. Easing functions involve distance and time. Penner style easing functions are called with a value for the current time elapsed (since the start of easing), the current position of the object to be eased, the difference between the destination point and the current position, and the length of time allotted for the completion of the easing. Easing functions are the most commonly encountered and these are functions attributed to Robert Penner for moving objects smoothly from one on-screen position to another with the illusion of smooth acceleration, deceleration and mass. The original Penner equations can be found here:

Penner Easing

Some interesting websites explore easing functions in more depth:

Gizma's Easing Equations

Upshots.org "Understanding Easing"

Tim Groleau's Easing Function Generator

69 questions
0
votes
1 answer

Easing Functions Not Working with svg.js v3 Rotate

Package Info "@svgdotjs/svg.js": "^3.0.16", "svg.easing.js": "svgdotjs/svg.easing.js" The Problem Can someone please clarify how to correctly animate a rotation with an easing function using the svg.js v3 library? The documentation in…
gpsugy
  • 1,199
  • 1
  • 11
  • 25
0
votes
1 answer

How to add customized easing function in this jQuery code segment without getting all jQueryUI in this?

I saw somebody used an algorithm to simulate the easeOutExpo effect with just the linear parameter. The disadvantage of this code below is it needs a calculation: step_value += (target_value - step_value)/25. It looks very weird in the code. How do…
AGamePlayer
  • 7,404
  • 19
  • 62
  • 119
0
votes
2 answers

is there a programming / math term for what the linear() function does in After Effects?

Adobe After Effects (an animation / compositing app) has a scripting language (Expressions) that's based on JavaScript, and it comes with a bunch of After Effects-specific functions built on top of JS. The function linear() is one of these. It…
0
votes
1 answer

Content not displaying until effect over

I have an application whit accordion
Metod Medja
  • 768
  • 6
  • 10
0
votes
1 answer

Imitating @keyframes rule using Javascript only

I'm trying to create a function that uses percentage to get a number. The idea is to have something like this: 0%: 100px 50%: 200px 75%: 210px So when I run my function at a percentage like 25% it blends 0 and 50 together, same for above 50%. It…
0
votes
1 answer

What easing functions are allowed in jquery-scrollify?

What are all the possible options for the "easing" attribute in the scrollify function? I have tried several, but they all break the scrolling functionality except the default "easeOutExpo"
A. Mac
  • 1
  • 1
0
votes
1 answer

Can I use jQuery easing with existing CSS mouseovers that use background-position?

I have a series of image mouseover links that change background-position when hovered. Is it possible to use jquery easing with these links without changing my CSS3? If so does anyone have any examples? here is my code:
Erik
  • 5,701
  • 27
  • 70
  • 119
0
votes
0 answers

Add an easing function to a PointAnimationUsingPath

How could I add an easing function to my PointAnimationUsingPath? It hasn't a EasingFunction property like the DoubleAnimation has. Here's my animation:
Drarig29
  • 1,902
  • 1
  • 19
  • 42
0
votes
1 answer

Easing in Java with Slick2D

I am trying to make an object ease in and out. But when I render this it works well but I always get another object behaving directly opposite to the other. So when the object is heading up, the "ghost" object will be directly opposite heading…
Ryan_DS
  • 750
  • 7
  • 28
0
votes
1 answer

flex 4 remove Rotate easing

I'm trying to animate (rotate) an image in flex4 but it seems that flex is adding easing to my animation by default. How can I over ride this so my rotate doesn't have any easing. Here the line of code I'm using
Adam
  • 2,632
  • 8
  • 34
  • 60
0
votes
1 answer

How to get the time an element that has CSS transition with easeOutSine needs to cover a certain distance?

Ok, this is one for math people, I guess. I have some basic knowledge of ease functions but need some helping hand with this. I have an element that is translated with CSS transition (translateX) using ‘easeOutSine’ function. It covers distance A in…
Garavani
  • 755
  • 1
  • 13
  • 28
0
votes
0 answers

Using robert penners easing to animate dom elements

Im having some trouble understanding how this works. I have read the tutorial on robert penners website where the different parameters are explained: t: time b: start value c: change d: duration I have specified the values but it doesnt seem to…
Asperger
  • 3,064
  • 8
  • 52
  • 100
0
votes
1 answer

Add easing to UIView animateKeyframesWithDuration

Im using UIView animateKeyframesWithDuration and i have 3 animation sections using [UIView addKeyframeWithRelativeStartTime However, on one of the key frames I want to easeIn. How can I add an easing function to this?
bandejapaisa
  • 26,576
  • 13
  • 94
  • 112
0
votes
1 answer

D3 Elastic easing transition of circle radius causes negative radius to be set

I have a very weird problem whilst using the ease("elastic", a, p) function in d3js. I am transitioning the radius of circles and I'm getting a flood of errors in the console, which are significantly slowing down my webpage. The errors state that…
0
votes
1 answer

How to add an easing function to increase a variable value during animation

I am looking for some math genius to help me with this one: I have a quite simple keyframe js animation: var i = 0; var o = 0; // opacity var y_frames =…
Garavani
  • 755
  • 1
  • 13
  • 28