Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

easeInSine breaks path animation

See original GitHub issue

Hey, While working on some sample animations using anime I discovered a weird bug. When I use easeInSine as easing, it breaks path animation. If I change it to anything else, everything works correctly.

Here is the codepen that shows this bug

I’m using anime 1.1.2.


I’ve found another equation for easeInSine like below

easeInSine: (t) => {
  return 1 + Math.sin(Math.PI / 2 * t - Math.PI / 2);

If I override anime.easings, animation looks correctly.

const tryToFixEasing = {
  /* @source */
  easeInSine: (t) => {
    return 1 + Math.sin(Math.PI / 2 * t - Math.PI / 2);

anime.easings.easeInSine = tryToFixEasing.easeInSine;

So it seems that there is a problem with easing equation.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

juliangarniercommented, Dec 27, 2016

ASAP 😃 Maybe this week

hinokcommented, Dec 27, 2016

@juliangarnier btw could you unveil when do you plan to release v2 😃?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Easing Functions Cheat Sheet
Make animations more realistic by picking the right easing function.
Read more >
Precise Motion with Motion Paths Advanced PowerPoint Tutorial
Take it further and combine motion paths with grow shrink animations to change your object as it moves. For example, taking a full...
Read more >
Advanced Vector Path Animation with Shape Shifter - YouTube
check my blog http://myhexaville.comIntroduction to Shape Shifter path - animations -easy/
Read more >
Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it...
Read more >
Documentation - Anime.js
Targets · Properties · Property parameters · Animation parameters · Values · Keyframes · Staggering · Timeline ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found