bendc / animateplus Goto Github PK

You can add a step callback function like $ does, A function to be called for each animated property of each animated element.

Animate Plus lets you animate HTML and SVG elements with any property that takes numeric values, including hexadecimal colors.

I assume this library can't be used to animate paths like the following?

        <path id="path" d="M0 0 L 300 0 L 300 300.4 L 0 300 Z" fill="#ccc"></path>

Unlike TweenLite or Anime.js?
https://jsfiddle.net/alvarotrigo/6yev2wc0/18/

$('button').click(function() {
    
    TweenLite.to('#path', 1, {
        attr:{d: 'M0 100 L 300 0 L 300 300.4 L 0 300 Z'}
    });
    
    TweenLite.to('#path', 1, {
        attr:{d: 'M50 50 L 300 0 L 300 300.4 L 0 300 Z'}
    }).delay(0.3);

   
});

The example at http://animateplus.com/examples/getting-started/ is not working properly on chrome. It's working fine on safari mobile and on firefox desktop.

The animation on chrome scales the first box, but the last two don't animate the entrance, they just appear after the delay out of nowhere. Then the translate animation does work properly.

I noticed that all of your animation examples are 2d and there isn't any tilt or flip or anything that looks like 3d. I really the simplicity of your syntax but am wondering if this is also suited for mixing 3d and 2d animations together?

Hi, @bendc! I ran into a quirk using this (otherwise awesome) library, I'm not sure how to troubleshoot further and figured it might be time to create an issue for it.

I have an SVG illustration of my face (my avatar, actually), and I'm animating its d attribute so that one of the eyes morphs from an open eye to a closed eye.

I can get the animation working using SMIL in Chrome, Firefox and Safari just fine. When I try to do the same animation using animateplus, it works great, but Chrome and Safari report console errors when the animation completes.

Error in Chrome:

animate.min.js:17
Error: Invalid value for <path> attribute d="M103.5,82.4c0,2-3.8,3.9-7.6,3.7c-4.6-0.2-6.4-2-6.4-4.1c0-1.6,1.62.3,72.3C100.3,84.3,103.5,81.3,103.5,82.4z"

Error in Safari:

animate.min.js:17
Error: Problem parsing d="M103.5,82.4c0,2-3.8,3.9-7.6,3.7c-4.6-0.2-6.4-2-6.4-4.1c0-1.6,1.62.3,72.3C100.3,84.3,103.5,81.3,103.5,82.4z"

You can reproduce the problem in this pen I've created: http://codepen.io/tylersticka/pen/b2f6b448692ed74d9d6565ea49ff6849

My first instinct was that my coordinates must not match up... maybe there are odd numbers or something. But I created the second by duplicating the first shape and moving its points around, and a visual inspection of the d attribute seems to support that the points are equal.

So otherwise, I'm stumped! In order of likelihood, I imagine the problem might be...

1. I did something stupid that you'll identify.
2. Blink and Webkit are doing something stupid.
3. There's a legitimate issue with the library.

Thanks in advance for your help! 😬

I am trying to use this in a simple static HTML website. I've imported the raw animateplus.js, however, in chrome it is showing me a JS error "Unexpected token export". What is the best way to resolve this?

I wasn't able to get animations working on iOS in mobile safari.

This example fails with the the following error message for me:
http://animateplus.com/examples/stress-test/

[Error] SyntaxError: Unexpected token '...'. Expected a property name.
	promiseReactionJob

Hi. These are some smooth animations.

I just discovered a bug.

If you load a page in the background (You can try it on any of the examples by going to a different tab and reloading the animation tab), an error is thrown because a property isn't set.

Checking for the existence of paused.all before calling all.forEach fixes it.

Thanks!

Hi @bendc,

I noticed a few quirks when previewing your "blur" example.

In Safari (version 11.1), the shape is completely blurred until it fully stops. I mean, blur seems to be applied on both axes while the motion happens on the x axis only. And it's very noticeable. The attached capture shows how it looks when it goes back to the left (snapshot taken just before it pauses).

In Chrome (version 66.0), it is not smooth at all until the shape had gone back and forth 3-4 times.

Maybe these issues are tight to the lack of performance of my mid-2012 MacBook Air (and I can't test on my 5K iMac for now).

None of the examples are currently working. There doesn't appear to be any content inside of the <body>

Seems to be a bug at first:

animate({
  el: 'div',
  translateX: ['100%', 0]
})

or

animate({
  el: 'div',
  translateX: '100%',
  direction: 'reverse'
})

I expect an animation from 100% to 0, but got from 100px to 0. See: http://jsbin.com/fitezotivo/edit?js,output

It seems to occur when animating percentages from/to px (as no unit is converted to px). Using translateX: ['100%', '0%'] fix the first case, but we're still facing the issue when using direction: reverse

Hey Benjamin,
first of all thx for this great + to my tool-lib. ;-)
As with all of my chosen libs I really appreciate the small footprint and ease of use.
I really would stick with it.

To my problem:
For my webdev I'm working with preact-cli which is currently not supporting async/await, unfortunately see #17 there.
As I understand, this is because the overhead of runtime-transform is too high.

As I dive in animateplus.js I see exactly
1 x async
1 x await

Do you think it is possible to replace these with promise-then (not for your release, just for my preact-problem). Or hopefully you can just give me a hint on how to accomplish it.
I'm really new to async/await-promises, so I didn't get it working until now by myself.

I totally understand if you say: 'not my biz', but I hope you can give me a push in the right direction.
Or you say 'forget it Dude, no way to get this working'.

++++ for animate+
thx again

Hi, this is a perfect library for creating HTML5 hand-coded banners without using any software (GWD, Adobe Animate). Output is perfect small (lot of ad servers have limits up to 50kB for an HTML5 banner) and does all the animations needed in banners.

Do you plan IE8 and IE9 support ?

How can we easily achieve it when no support is planned, please ?

How can I delay animation after finish (inside the loop), before the animation start again?

Thanks,
Rizqi

Hi there!

Is translate3d not support? If not, would be a nice addition.

Firefox: 58.0b4 (64-bit)

I tried all of the examples to no avail.

Hi Benjamin,

Would it be possible to push animateplus to the Bower package manager on top of your NPM one?
Great plugin by the way!

Cheers,

Youri

Hi,

first thank you first this jewel, really a saviour!

Could you consider returning a Promise from animate call?

Would solve #6 and allow use of future async / await out of the box.

Hi,

Wondering if it would be possible to clarify the current browser support in the README? E.g. adding a "Browser Support" section at the end.

Cool project btw, thanks for sharing!

Hi there!

I'm very excited to try this out, but I've been trying to import the library in my react project and I cannot get it working unfortunately.

I keep getting the error TypeError: Cannot call a class as a function.

I'm importing as : import animate from 'lib/animateplus'

Any help would be much appreciated!

Best

Hi there, just wanted to give animateplus a try, but I keep getting this error when importing it into my app.js:

.../node_modules/animateplus/animateplus.js:217
    ...rest
    ^
ParseError: Unexpected token

When using the spread operator directly in my main app.js, it works fine (using Babel)

Can pseudo elements be selected ? I am planning to animate bacground image.I have something like this

.container:before {
    background-image: url("xyz.png");
}

How can i select .container:before ?

Thanks !

Hi, I just went thought all the examples and none of them seen to work....

would you please consider adding tags for each version so that we can add your lib on https://cdnjs.com/ with git auto-update.
thank you very much!
cdnjs/cdnjs#5670

It would be nice to have ios- like spring easing. tnx!

Sometimes I want f.ex opacity animation to last a bit longer than a translate animation.
Would it be possible to use the third parameter for duration?

F.ex:
opacity: [0,1,600]

How do you compile animate.min.js? It looks like it is compiling some ES6 stuff like const, but not Map, which is causing some sad browsers to be sad.

How would this work in comparison with Greensock or Animejs? I'm considering this one and Animejs (which is slightly bigger) for use in various projects.

can you and width and height in supportedCSSprops

After runing
animate({ el: 'article', translateY: ['100%', '0%'], scale: [0,1] })
my div gets blured completely

Hello, master, how do I use pseudo-elements with animateplus ?
For example, using a pseudo-element to achieve sweeping animation effects

I want to call the JS method after the animation is finished. It seems that this operation is not supported now, only simple operation can be performed.
Can you answer it? Thank you.

"Animate Plus is a CSS and SVG animation library for modern browsers."

While this technically is true, this description is misinforming in term of animation mechanism - I was surprised when I found out that animateplus use neither css transitions nor css keyframe animations.

Maybe: "Animate Plus is a HTML5 and SVG Javascript-powered animation library for modern browsers." or something similar.

Hi @bendc, thank you for creating this library! Your examples were super inspiring, and I was wondering if there was a way to look at the code to help understand how the library works?

Hello,

I have an issue when a try to execute a method in the complete callback (on Chrome). It seems the callback is called before the animation is over. Here is an example: https://jsfiddle.net/tvh7qc37/7/. If you open the console, you will see that the code is stopped by the debugger before the animation is over.

thank you for your help !

This lib is awesome but I'm struggling to do animated sequence without ending up with a nested callbacks hell. Any best practice for this, or even better, a runSequence-like method?

I am using this library with vue-cli and got a problem running on IE/Edge. To fix that, I had to transpile with Babel and import the transpilled version instead of the package version.
Basically, what I've done was that:

babel transform-object-rest-spread node_modules/animateplus/animateplus.js --out-file animate.js

and on import part:

import animate from "./animate.js"

I'm using animate translate x to move an element 100 to the right. Then after that I do the same thing but -100 in an attempt to return it to the original position.

But the final position of the card is off because the original css padding is not acknowledged.

Code:

function drawCard() {
  animate({
    el: "#card",
    translateX: 100,
    opacity: 0,
    duration: 500,
    complete: animateCard
  }); 
}

function animateCard() {
  animate({
    el: "#card",
    translateX: -100,
    opacity: 1,
    duration: 500 
  }); 
}

As mentioned in this article, it can be useful to remove the will-change property once an animation ends for performance purposes.

Hi,

After install animateplus from npm, this module doesn't support common.js module.export.
Is it possible to include common.js supports? Thanks.

Hi, I can see that on the Stripe site the animation styles get removed from the style tag when the animation is finished. Is there an option for this?

It would be useful if the build process were checked in and documented for people that would like to modify, and contribute to this library.

I've noticed that before animation starts (fadeInUp-example) element is visible for less than a 1 sec then animation starts, i'ts really annoying because it ruins the effect. I've tried many things but nothing seems to work, any ideas how to fix this? THIS IS HAPPENING ONLY ON MOBILE DEVICES