googlearchive / core-animation Goto Github PK

View Code? Open in Web Editor NEW

12.0 34.0 15.0 362 KB

A helper element to use web animations

HTML 100.00%

core-animation's Introduction

core-animation

See the component page for more information.

core-animation's People

Contributors

Stargazers

Watchers

Forkers

mbykovskyy jeffposnick zenorocha alancutter polymerweb manonthemat bhui0003 tonybart1337 rlugojr pkdevboxy pk-codebox-evo digideskio

core-animation's Issues

Animation sequence doesn't work anymore

The following group animation worked in 0.4.2 but doesn't work in 0.5.1. The first animation doesn't play but after duration delay the second animation plays.

<core-animation-group autoplay="true" type="seq">
  <core-animation target="{{$.box}}" duration="1000" easing="ease">
    <core-animation-keyframe>
      <core-animation-prop name="visibility" value="visible"></core-animation-prop>
      <core-animation-prop name="transform" value="scale(0)"></core-animation-prop>
    </core-animation-keyframe>
    <core-animation-keyframe>
      <core-animation-prop name="visibility" value="visible"></core-animation-prop>
      <core-animation-prop name="transform" value="scale(1.5)"></core-animation-prop>
    </core-animation-keyframe>
    <core-animation-keyframe>
      <core-animation-prop name="visibility" value="visible"></core-animation-prop>
      <core-animation-prop name="transform" value="scale(1)"></core-animation-prop>
    </core-animation-keyframe>
  </core-animation>

  <core-animation target="{{$.box}}" duration="500" iterations="Infinity" direction="alternate" easing="ease">
    <core-animation-keyframe>
      <core-animation-prop name="transform" value="translateY(0)"></core-animation-prop>
    </core-animation-keyframe>
    <core-animation-keyframe>
      <core-animation-prop name="transform" value="translateY(-20px)"></core-animation-prop>
    </core-animation-keyframe>
  </core-animation>
</core-animation-group>

Child animations don't throw finish events

Let's say I have an animation built out of smaller animations:

<core-animation-group type="par" on-core-animation-finish="{{done}}">
  <core-animation-group type="seq" on-core-animation-finish="{{partial}}">
    ... animations
  <core-animation-group>
  ... animations
<core-animation-group>

The done callback gets executed, but the partial callback for the intermediary (inner) animation doesn't. Is it by design ?

error when using `offset`

Not sure if this is intended behavior, but I was wondering if offset is currently supported.

If I take the example from https://www.polymer-project.org/docs/elements/core-elements.html#core-animation and add an offset to the first keyframe, I get the following error message:

Uncaught NotSupportedError: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.web-animations-next-lite.min.js:15 b.newUnderlyingPlayerForAnimationweb-animations-next-lite.min.js:15

(tested in Chrome 40)

Freeze web-animations-js version?

Hello,
I'm worrying that this component depends of the master branch
of web-animations-js library. Can you please specify some fixed version
in dependencies? At least in release branches (tags) of 'core-animation'.

Second keyframe changes how the first one animates

The following example can reproduce the problem.

<style>
    #box {
        position: absolute;
        left: 0;
        width: 300px;
        height: 300px;
    }
</style>

<core-animation id="animation" duration="500">
  <core-animation-keyframe>
    <core-animation-prop name="transform" value="translateX(-100%)"></core-animation-prop>
  </core-animation-keyframe>
  <core-animation-keyframe>
    <core-animation-prop name="background-color" value="blue"></core-animation-prop>
  </core-animation-keyframe>
</core-animation>

We have a box on the left-hand side and the animation which is expected to hide it by translating it 300px left. However, the observed result is the box gets hidden and then it slides onto the screen from the left. Removing the second keyframe yields the correct behaviour.

web-animations-js has broken 0.4.2

web-animations/web-animations-js#1

can someone fix the version to something that works, and perhaps release a 0.4.3?

or just tell me what commit works and I'll fix it in my bower.json file?

Documentation error on core-animation

From @dgrasberger on October 29, 2014 13:30

documentation for the "fill" property correctly lists the possible values in the heading line, but incorrectly lists "forward" ( no "s" instead of "forwards") in the write-up. "forward" does not work.

https://www.polymer-project.org/docs/elements/core-elements.html#core-animation

Copied from original issue: Polymer/polymer#828

/web-animations-next-lite.min.js.map 404 error after vulcanise in safari

Safari Failed to load resource: the server responded with a status of 404 (Not Found) /web-animations-next-lite.min.js.map

Broken import, vulcanize fails

Paper-dropdown-transition and core-animation imports the web-animations.html file, which in turn imports the 'web-animations-next/web-animations.html', which no longer exists.

Distribution of a <core-animation> into a Polymer element with <content> doesn't allow to call play()

I don't know if this is a common behaviour in Polymer or it's a bug, so I posted the same question on SO. I think it's important to clarify that.

https://stackoverflow.com/questions/28563355/distribution-of-a-core-animation-into-a-polymer-element-with-content-doesnt

autoplay=true causes call stack overflow

Logic in the play function is wrong. play calls apply and then apply calls play if autoplay is true causing infinite recursion.

API addition: animation.attrKeyframes for element attributes

It's a shame to have to write all that code [1] to make a custom animation just to animate scrollTop.
How about having an array of hashes similar animation.keyframes but instead css attributes, it would have element attributes like scrollTop, and it would yield a customEffect function:

var animation = new CoreAnimation();
animation.duration = 500;
animation.target = document.getElementById('el');
animation.attrKeyframes = [
  {scrollTop: animation.target.scrollTop},
  {scrollTop: 500}
];
animation.play();

[1] http://stackoverflow.com/a/26852482/283608

Relies on deprecated AnimationTiming.playbackRate

As per the WebAnimation spec/polyfill release notes, the AnimationTiming.playbackRate call is being deprecated. Currently core-animation's use of web-animation throws a console warning of this deprecation.

Exercised at least in paper-dropdown - see http://jsbin.com/zuqoqidixo/1/edit?html,console,output

Add a description in the GitHub repository

`transition-timing-function` property throws error on Safari & Firefox.

The error I got:

[Error] [object Object]
    dispatchOriginalEvent (webcomponents.js, line 957)
    dispatchEvent ([native code], line 0)
    dispatchEvent (webcomponents.js, line 1345)
    up (polymer.js, line 1987)
    gestureTrigger (polymer.js, line 813)
    (anonymous function) ([native code], line 0)
    (anonymous function) (web-animations-next-lite.min.js, line 15)
    forEach ([native code], line 0)
    c (web-animations-next-lite.min.js, line 15)

My animation definition:

<core-animation id="flip-in-x" target="{{ target }}" duration="{{ duration }}" easing="{{ easing }}" delay="{{ delay }}" endDelay="{{ endDelay }}" fill="{{ fill }}" iterations="{{ iterations }}" direction="{{ direction }}">
  <core-animation-keyframe offset="0">
    <core-animation-prop name="opacity" value="0"></core-animation-prop>
    <core-animation-prop name="transform" value="perspective(400px) rotate3d(1, 0, 0, 90deg)"></core-animation-prop>
    <core-animation-prop name="transition-timing-function" value="ease-in"></core-animation-prop>
  </core-animation-keyframe>
  <core-animation-keyframe offset="0.4">
    <core-animation-prop name="transform" value="perspective(400px) rotate3d(1, 0, 0, -20deg)"></core-animation-prop>
    <core-animation-prop name="transition-timing-function" value="ease-in"></core-animation-prop>
  </core-animation-keyframe>
  <core-animation-keyframe offset="0.6">
    <core-animation-prop name="opacity" value="1"></core-animation-prop>
    <core-animation-prop name="transform" value="perspective(400px) rotate3d(1, 0, 0, 10deg)"></core-animation-prop>
  </core-animation-keyframe>
  <core-animation-keyframe offset="0.8">
    <core-animation-prop name="transform" value="perspective(400px) rotate3d(1, 0, 0, -5deg)"></core-animation-prop>
  </core-animation-keyframe>
  <core-animation-keyframe offset="1">
    <core-animation-prop name="opacity" value="1"></core-animation-prop>
    <core-animation-prop name="transform" value="perspective(400px)"></core-animation-prop>
  </core-animation-keyframe>
</core-animation>

Thanks!

Vulcanize fails with file not found error

Vulcanization fails because web-animations-js/web-animations-next-lite.min.js file not found. In web-animations.html this web-animations-next/web-animations.html was changed to web-animations-js/web-animations-next-lite.min.js but bower.json installs it into web-animations-next.

Depends on version of web-animations-js with problematic .gitignore file

core-animation depends on "web-animations/web-animations-js#1.0.1". This release of web-animations-js includes a .gitignore file that ignores the .js files needed for animations to work. It appears that the .gitignore file has been removed in more recent versions. Here's a link to the 1.0.1 release version of that file.

https://github.com/web-animations/web-animations-js/blob/48a192d978202bbd18b4d45804dad54cc48915e7/.gitignore

Group Sequence Not Working in Chrome

I have a very simple parallel animation group nested in a sequential animation group. This configuration works fine in Firefox. But when I test it in Chrome, it does not work correctly. Instead, the inner parallel group runs at the same time as the first animation, then runs a second time in parallel with the second animation. I've commented the sequence here:

<core-animation-group id="transition" type="seq">
  <!-- Runs in parallel with group at end -->
  <core-animation duration="500" fill="both" target="{{ $.loginForm }}">
    <core-animation-keyframe>
      <core-animation-prop name="opacity" value="1"></core-animation-prop>
    </core-animation-keyframe>
    <core-animation-keyframe>
      <core-animation-prop name="opacity" value="0"></core-animation-prop>
    </core-animation-keyframe>
  </core-animation>

  <!-- Doesn't seem to run at all -->
  <core-animation duration="500" fill="both" target="{{ $.profile }}">
    <core-animation-keyframe>
      <core-animation-prop name="opacity" value="0"></core-animation-prop>
    </core-animation-keyframe>
    <core-animation-keyframe>
      <core-animation-prop name="opacity" value="1"></core-animation-prop>
    </core-animation-keyframe>
  </core-animation>

  <!-- Runs in parallel with first animation, and then reverts and runs again a second time -->
  <core-animation-group type="par">

    <core-animation id="occupyTop" duration="500" fill="none" target="{{ $.overlay }}" easing="ease"></core-animation>

    <core-animation duration="500" fill="none" target="{{ $.overlayShadow }}" easing="ease">
      <core-animation-keyframe>
        <core-animation-prop name="marginTop" value="20"></core-animation-prop>
        <core-animation-prop name="marginLeft" value="20"></core-animation-prop>
        <core-animation-prop name="marginRight" value="20"></core-animation-prop>
      </core-animation-keyframe>
      <core-animation-keyframe>
        <core-animation-prop name="marginTop" value="0"></core-animation-prop>
        <core-animation-prop name="marginLeft" value="0"></core-animation-prop>
        <core-animation-prop name="marginRight" value="0"></core-animation-prop>
      </core-animation-keyframe>
    </core-animation>

  </core-animation-group>
</core-animation-group>