Skip to content

Commit

Permalink
Absolute gif path #114
Browse files Browse the repository at this point in the history
  • Loading branch information
@juliangarnier
juliangarnier committed Mar 26, 2017
1 parent 1eb8689 commit 20b6f4b
Showing 1 changed file with 23 additions and 23 deletions.
46 changes: 23 additions & 23 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# [anime.js](http://anime-js.com) ![](http://img.badgesize.io/juliangarnier/anime/v2.0/anime.min.js.svg?style=flat&color=18FF92)

<img src="documentation/assets/img/readme/animejs-logo.gif" width="100%" />
<img src="http://anime-js.com/documentation/assets/img/readme/animejs-logo.gif" width="100%" />

>*Anime* `(/ˈæn.ə.meɪ/)` is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.
Expand Down Expand Up @@ -94,7 +94,7 @@ The `targets` property defines the elements or JS `Object`s to animate.

### CSS

<img src="documentation/assets/img/readme/prop-css.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/prop-css.gif" width="332" />

Any CSS properties can be animated:

Expand All @@ -111,7 +111,7 @@ anime({

### Individual CSS transforms

<img src="documentation/assets/img/readme/prop-transforms.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/prop-transforms.gif" width="332" />

CSS transforms can be animated individually:

Expand All @@ -128,7 +128,7 @@ anime({

### JavaScript Object properties

<img src="documentation/assets/img/readme/prop-js-obj.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/prop-js-obj.gif" width="332" />

Any `Object` property containing a numerical value can be animated:

Expand All @@ -149,7 +149,7 @@ anime({

### DOM Attributes

<img src="documentation/assets/img/readme/prop-dom-attr.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/prop-dom-attr.gif" width="332" />

Any DOM Attribute containing a numerical values can be animated:

Expand All @@ -169,7 +169,7 @@ anime({

### SVG Attributes

<img src="documentation/assets/img/readme/prop-svg-attr.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/prop-svg-attr.gif" width="332" />

Any SVG Attribute containing a numerical values can be animated:

Expand All @@ -190,7 +190,7 @@ anime({

## Property parameters

<img src="documentation/assets/img/readme/prop-parameters.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/prop-parameters.gif" width="332" />

Defines duration, delay and easing for each property animations.<br>
Can be set globally, or individually to each properties:
Expand Down Expand Up @@ -228,7 +228,7 @@ anime({

## Function based property parameters

<img src="documentation/assets/img/readme/fb-parameters.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/fb-parameters.gif" width="332" />

Get different property parameters for every target of the animation.<br>
The function accepts 3 arguments: `target`, `index`, `targetsLength`.
Expand Down Expand Up @@ -258,7 +258,7 @@ anime({

## Animation parameters

<img src="documentation/assets/img/readme/anim-parameters.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/anim-parameters.gif" width="332" />

Parameters relative to the animation to specify the direction, the number of loops or autoplay.

Expand Down Expand Up @@ -310,7 +310,7 @@ anime({

### From > To values

<img src="documentation/assets/img/readme/value-from-to.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/value-from-to.gif" width="332" />

Force the animation to start at a certain value.

Expand All @@ -329,7 +329,7 @@ anime({

### Function based values

<img src="documentation/assets/img/readme/value-fb.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/value-fb.gif" width="332" />

Same as [function based property parameters](#function-based-property-parameters).<br>
Get different values for every target of the animation.<br>
Expand Down Expand Up @@ -358,7 +358,7 @@ anime({

### Keyframes

<img src="documentation/assets/img/readme/value-keyframes.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/value-keyframes.gif" width="332" />

Keyframes are defined using an `Array` of property Object.<br>
Instance's `duration` is divided by the number of keyframes of each properties if not specified.
Expand Down Expand Up @@ -397,7 +397,7 @@ anime({

### Basic timeline

<img src="documentation/assets/img/readme/timeline.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/timeline.gif" width="332" />

Play animations in sequence by creating a timeline:

Expand Down Expand Up @@ -443,7 +443,7 @@ Access timeline children animations with `myTimeline.children`

#### Relative offset

<img src="documentation/assets/img/readme/timeline-relative.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/timeline-relative.gif" width="332" />

Defines starting time relative to the previous animations duration.

Expand Down Expand Up @@ -475,7 +475,7 @@ myTimeline

#### Absolute offset

<img src="documentation/assets/img/readme/timeline-absolute.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/timeline-absolute.gif" width="332" />

Defines an absolute starting time on the timeline with a number.

Expand Down Expand Up @@ -506,7 +506,7 @@ Play, pause, restart, seek animations or timelines.

### Play / Pause

<img src="documentation/assets/img/readme/playback-play-pause.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/playback-play-pause.gif" width="332" />

```javascript
var playPauseAnim = anime({
Expand All @@ -525,7 +525,7 @@ playPauseAnim.pause(); // Manually pause

### Restart

<img src="documentation/assets/img/readme/playback-restart.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/playback-restart.gif" width="332" />

```javascript
var restartAnim = anime({
Expand All @@ -543,7 +543,7 @@ restartAnim.restart(); // Restart the animation and reset the loop count / curre

### Reverse

<img src="documentation/assets/img/readme/playback-reverse.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/playback-reverse.gif" width="332" />

```javascript
var restartAnim = anime({
Expand All @@ -560,7 +560,7 @@ restartAnim.reverse(); // Change the animation direction

### Seek

<img src="documentation/assets/img/readme/playback-seek.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/playback-seek.gif" width="332" />

Change animations or timelines current time.

Expand All @@ -580,7 +580,7 @@ seekAnim.seek(500); // Set the animation current time to 500ms

## Callbacks

<img src="documentation/assets/img/readme/callbacks-all.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/callbacks-all.gif" width="332" />

Execute a function at the beginning, during or when an animation or timeline is completed.

Expand Down Expand Up @@ -674,7 +674,7 @@ Check if the animation has finished with `myAnimation.completed`, return `true`

### Motion path

<img src="documentation/assets/img/readme/svg-motion-path.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/svg-motion-path.gif" width="332" />

Translate and rotate DOM elements along an SVG path:

Expand All @@ -694,7 +694,7 @@ var motionPath = anime({

### Morphing

<img src="documentation/assets/img/readme/svg-morphing.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/svg-morphing.gif" width="332" />

Animate the transition between two SVG shapes:

Expand All @@ -717,7 +717,7 @@ Shapes need to have the same number of points.

### Line drawing

<img src="documentation/assets/img/readme/svg-line-drawing.gif" width="332" />
<img src="http://anime-js.com/documentation/assets/img/readme/svg-line-drawing.gif" width="332" />

Line drawing animation of an SVG shape:

Expand Down

0 comments on commit 20b6f4b

Please sign in to comment.