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
4
votes
2 answers

Using JQuery to get VH1's "Pop Up Video" effect?

I am hoping someone can help me recreate the "VH1 Pop Up video" effect, where the entire bubble scales, and has the Easing effect at the end. I have a list with some display:none DIVs hidden in each item of a list. I was hoping that when user…
verbatim
  • 219
  • 2
  • 7
4
votes
1 answer

SDL2 Smooth texture(sprite) animation between points in time function

currently im trying to develop smooth animation effect via hardware accelerated technique (DirectX or OpenGL), my current goal is very simple, i would like to move texture from point A to point B in given duration, this is classic way to animate…
Jakub
  • 45
  • 1
  • 5
4
votes
1 answer

Simple easing on bootstrap scrollspy

This is pretty simple question I think for those who knows javascript/jquery good. I am pretty new to all this and couldn't make it. I found code that is calculating the offset of navbar that looks like this: var offset = 50; $('.navbar li…
Plavookac
  • 410
  • 9
  • 24
4
votes
1 answer

Number increment animation duration slow as numbers increase

I have a count up code here: HTML:
700
1000
JavaScript: function animateValue(id, start, end, duration) { var start= 0 ; var end = parseInt(document.getElementById(id).textContent, 10); var…
4
votes
1 answer

Sprite kit easing/pause issue

I'm trying to implement a pause function to my game. So far I've got it to work by setting my sprites speed to "0". But the sprites on which I've applied easing behave strange when pause button (speed = 0) is pressed; Their translation - Both…
ezprado
  • 53
  • 4
4
votes
3 answers

How to increase javascript loop delay with easing

I need to count up from 1 to 60 but i want to count up with an easing, so for example it would go from 1 to 30 with a 100ms delay, after that i need to increase the delay so the counting will gradually slow down when it reaches 60. This is what i…
passatgt
  • 4,234
  • 4
  • 40
  • 54
4
votes
2 answers

Slide Up Linear Easing First Step Does Nothing

I'm developing an accordion plugin, and it's mostly done except for one bug where for the first few steps of the slideUp/slideDown, the accordion is 1px taller than it's meant to be, causing a visual bug. I've narrowed it down to the fact that the…
Gareth Parker
  • 5,012
  • 2
  • 18
  • 42
4
votes
3 answers

Jquery - Animate Background position with easing

I am trying to animate a background on mousemove with some easing using jquery animate. But cant figure out how to stop the queuing of the animation and have the animation "follow" the mouse around HTML: Animate Background
eleven11
  • 362
  • 2
  • 3
  • 12
4
votes
1 answer

Jquery FlexSlider continuous movement (turn off easing to appear like scrolling ticker)

I have just moved from JQuery Cycle to the FlexSlider plugin and really struggling to get the following parts working: I have multiple images inside list items that join up to appear as one large. I would like to turn off the easing so it…
Desmond
  • 1,656
  • 3
  • 22
  • 34
3
votes
2 answers

How to make animation easing (ease-in and ease-out) duration-independent?

I'm using jQuery with Easing plugin and i would like to achieve constant easing times for for animations of any duration: Short animation (X milliseconds) |<<<<|-------------------|>>>>| 10ms 10ms Long animation (2X…
Ernests Karlsons
  • 2,220
  • 5
  • 25
  • 37
3
votes
1 answer

Slide div horizontally with easing

I am looking to achieve a hide/show div where on mouse enter the div is shown but in a sliding left to right manner with easing. Also i need the page to focus on the new div that just slided out / made visible. Here is my script. Any ideas on what i…
Eno Bassey
  • 57
  • 1
  • 3
  • 11
3
votes
1 answer

Animated canvas arc with easing

I'm drawing a non-traditional ring-clock in canvas. The time is represented by a second ring, second hand, minute ring, and hour ring. I am using webkit/mozRequestAnimationFrame to draw at the appropriate time. I would like to modify the second ring…
TheCrypticAce
  • 173
  • 1
  • 7
3
votes
2 answers

Long CSS animation easing (background-position)

I'm trying to animate a background image position smoothly with CSS over a longer period, let's say 60 seconds: #movingbackground { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image:…
user127091
  • 2,071
  • 2
  • 9
  • 16
3
votes
3 answers

Animated css change (jQuery)

I was trying apply jQuery easing plugin to .css and .animate, but not working, i dont know why, because normally it works. Code example: $('#img').hover(function() { $(this).animate({"border-radius":"5px"}, 0, "easeOutBounce"); }, function() { …
Oliver
  • 341
  • 2
  • 4
  • 21
3
votes
1 answer

RequireJS : Problem including jquery easing pack after optimization

I want to include the jquery easing pack into my application. Before requireJS files have been 'optimized' it works fine. Now I am using the optimized version when ever I call an animation that uses easing I get this…
wilsonpage
  • 17,341
  • 23
  • 103
  • 147
1 2
3
25 26