Questions tagged [easing]

a set of algorithms for graceful motion over time with acceleration and deceleration.

These were developed by, discovered by, or popularized by and released by Robert Penner under the BSD license and implemented in a very wide variety of languages and frameworks including CSS3 Transitions, jQuery, WPF and Silverlight.

383 questions
2
votes
1 answer

scrollTo with easing and a callback function

Here is my code thus far: $('.my_button').click(function() { $.scrollTo( '#my_anchor', 1200, {easing:'easeInOutExpo'}, function() { // function not working here }); }); The callback function worked…
Mythical Fish
  • 293
  • 2
  • 7
  • 20
2
votes
0 answers

jquery - adding easing to a scrollbar plugin

I'm using this scrollbar plugin: http://www.baijs.nl/tinyscrollbar/js/jquery.tinyscrollbar.js and I want to add easing to it. I've isolated what I think is the function that calculates the movement, which is: function drag(oEvent){ …
mheavers
  • 29,530
  • 58
  • 194
  • 315
2
votes
2 answers

How to convert lerp to cubic easing in?

I need to convert the following code from using lerp to using cubic easing in, but I don't know what to do with the returned float value from the cubic easing in function, because I'm using Vector3 instead of floats. Can someone please give me a…
Weeboo
  • 41
  • 5
2
votes
1 answer

Common animation / physics equation repository

For some time, I've been on the lookout for some type of centralized, online repository of commonly used animation / physics equations. Its easy enough to load up some physics framework like Box2d and call it a day, but I'm looking for a source that…
Bosworth99
  • 4,206
  • 5
  • 37
  • 52
2
votes
2 answers

Delay Javascript effect by 500 ms

I want to delay slideOutItem by 500 millisecond. Canno't get that working. if(current === idx) { slideOutItem($menuItems.eq(current), false, 250, 'easeOutQuint', true); current = -1; }
Aleksi
  • 115
  • 1
  • 15
2
votes
1 answer

Pygame game help: Easing/Acceleration

Hi can someone help me with my pygame game, it's my first game and im really bad at this. Essentially im trying to make one of those sumo games where 2 players are on an icey ring (circle stage) and they have to push each other off to score points,…
chanphakeo
  • 23
  • 2
2
votes
2 answers

What are the default CSS easing curves?

In css, we can use easing for transitions, eg: transition: all .5s ease-in-out There are built-in CSS easings, such as ease, ease-in, ease-out, and ease-in-out. We can also define a custom easing using a cubic bezier, eg: transition: all .5s…
random_user_name
  • 25,694
  • 7
  • 76
  • 115
2
votes
2 answers

parametrize the bounceOut ease effect in D3

In the image below, the black line describes the bounceOut function, as shown in the D3-ease documentation. Is there any way to make the bounces smaller, as in the red line?
tic
  • 4,009
  • 15
  • 45
  • 86
2
votes
1 answer

Transitioning a bar chart with negative values for the width

I am creating a horizontal bar chart using d3. And I am using an animation to "grow" the chart at startup. Here is the code. // Create the svg element d3.select("#chart-area") .append("svg") .attr("height", 800) .attr("width", 800); …
Greeso
  • 7,544
  • 9
  • 51
  • 77
2
votes
2 answers

easing in svg animate doesn't work

I tried to add keySplines, values, keyTimes attributes to animate element to simulate easing animation. Easing effect doesn't work. jsfiddle HTML
Matt
  • 8,195
  • 31
  • 115
  • 225
2
votes
1 answer

How can you check if a user is logged into the site on one tab but not on another tab from the same browser?

GitHub recently implemented a feature whereby if you're viewing a page as a guest in one tab then log into the site from another tab, in the tab where you are still a guest, it will display the following message: This works the same when the tabs…
Darshan Kassen
  • 645
  • 7
  • 19
2
votes
1 answer

SKEase action, how to use Float changing Action Setter Block?

In the following use case, I'm trying to animate the lineWidth of an SKShapeNode. SKEase is part of the wonderful SpriteKitEasing github repo from Craig Grummitt. One of its facilities is a Float changing ease action that appears to change the value…
Confused
  • 6,048
  • 6
  • 34
  • 75
2
votes
1 answer

Linear easing slows down

1st question: Can't figure out why .animate linear slows down when it comes to its destination point. What am I missing ? Weird thing is that going from middle pic upward it always works perfectly (only in that one case). 2nd question: Is there a…
2
votes
1 answer

calculate bezier curve for linear zoom

When looping a zoom animation a linear timing will not feel linear but rather slow at the start and fast at the end. How would you go about calculating the correct curve? If you need more info ask in the comments. In this pen I use a hand drawn…
user950658
2
votes
2 answers

Create Custom Easing using Javascript

I am trying to create a custom easing function and I am experiencing a few difficulties. In other words, the maths is confusing me... I would like my function to increment the width of a some elements within my page, and the increment value needs to…
Ben Carey
  • 16,540
  • 19
  • 87
  • 169