You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A tiny React.js wrapper component that lets you trigger "animated lines" in your SVGs. Use it to add visual interest to icons, diagrams, loading spinners, or just any fun stuff!
10
+
A React.js wrapper component that lets you trigger an "animated lines" effect within your SVGs by applying CSS animations*. Use it to add visual interest to icons, diagrams, loading spinners, or just any fun stuff!
11
11
12
12
13
13
### How it works
14
-
The component wraps your SVG and injects CSS required to animate the `stroke-dashoffset` property on every `path` element within. Since it utilizes CSS, it does not rely on any tweening libs. For a description of the technique, see [this article](https://css-tricks.com/svg-line-animation-works/).
14
+
The component wraps your SVG and animates the `stroke-dashoffset` property on every `path` element within. To accomplish this, it injects a `style` tag with a generated string of CSS. For a description of the technique, see [this article](https://css-tricks.com/svg-line-animation-works).
15
15
16
-
> Sadly, this technique does not work in IE. I'm thinking of adding a JS-powered version soon...
16
+
17
+
### IE/Edge
18
+
While CSS animation comes "free", it doesn't work for SVGs on IE/Edge browsers. As of `0.6.0`, the component falls back to using JavaScript when IE/Edge is detected. The JS implementation relies on [tween.js](https://www.npmjs.com/package/tween.js) and doesn't interpret all prop permutations. It's "experimental" and doesn't seem very performant, so tread lightly!
17
19
18
20
19
21
### Installation
@@ -33,11 +35,10 @@ In your JSX, wrap it around any valid SVG...
> When you move up to React v15.0+, it appears that it no longer requires SVG attributes to be camel-cased in JSX. So, rather than `strokeWidth` or `strokeLinecap`, you should be good with the standard `stroke-width`, `stroke-linecap`, etc.
41
42
42
43
43
44
### Props
@@ -53,7 +54,7 @@ Your animation "trigger key":
53
54
*`false` render the SVG instantly (default)
54
55
*`true || string` trigger the animation immediately
55
56
*`number` trigger the animation after an initial delay of *number* (ms)
56
-
*`"hide"` draw the SVG as invisible (rendered with `opacity: 0.01`)
57
+
*`"hide"` draw the SVG as invisible (rendered with `opacity: 0`)
57
58
58
59
If you need to re-trigger the animation, simply pass in a new `string` or `number` (different from the last value). You can generate it, e.g. `String( Date.now() )`. Have a look at the [DemoPage](https://github.com/moarwick/react-mt-svg-lines/blob/master/src/components/DemoPage.js) code.
59
60
@@ -63,18 +64,20 @@ Callback function, executes when animation concludes.
63
64
##### `duration: number`
64
65
Desired duration of one full cycle of the entire animation, across all paths (ms). Default is `1000`.
65
66
66
-
##### `stagger: number (0-100)`
67
-
Delay between the start times of each path (when multiple paths are present within the SVG). Default is `0`. (The math there is simple, so if you have many staggered paths, you may need to tweak your `duration`.)
67
+
##### `jsOnly: bool`
68
+
Apply `tween.js` to drive animations using JavaScript regardless of browser. Default is `false` (kick in on IE/Edge only, via browser sniffing).
Apply a *fade-in* transition to each path. If a path has a `fill` color, the entire element will fade in while the line is drawn. Default is `false`. *Not supported in JS mode.*
71
72
72
73
##### `playback: string`
73
-
Any additional valid CSS [`animation`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) shorthand props, specifically `iteration-count || direction || fill-mode || play-state`. Default is `"forwards"` (play once and stop), but feel free to experiment. For example, the spinner example is set to `"2 alternate-reverse both"`.
74
+
Any additional valid CSS [`animation`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) shorthand props, specifically `iteration-count || direction || fill-mode || play-state`. Default is `"forwards"` (play once and stop), but feel free to experiment. For example, the spinner example is set to `"2 alternate-reverse both"`.*Partially supported in JS mode, respects defaults, `iteration-count`, and `alternate` direction.*
74
75
75
-
##### `fade: bool`
76
-
Apply a *fade-in* transition to each path. If a path has a `fill` color, the entire element will fade in while the line is drawn. Default is `false`.
76
+
##### `stagger: number (0-100)`
77
+
Delay between the start times of each path (when multiple paths are present within the SVG). Default is `0`. *Not supported in JS mode.*
77
78
79
+
##### `timing: string`
80
+
Desired CSS "timing function" type: `"ease" || "ease-in" || "ease-out" || "ease-in-out" || "linear" || "step-start" || "step-end"`. Default is `"ease"`. *Mostly supported in JS mode, with Tween.js equivalent presets.*
78
81
79
82
> All other `props` are passed through to the wrapper `span`
80
83
@@ -87,3 +90,11 @@ What if you don't want the animation applied to *ALL* paths inside your SVG? Add
87
90
* The technique only applies to SVG `path` elements with a `stroke` defined. Other SVG primitives, e.g. circles, rectangles, polylines, will render instantly.
88
91
* The path elements should sit at the same nesting level within the SVG structure (otherwise, the generated CSS rules will not target correctly). Also, staggered timing is applied to the elements in the order they appear in the SVG. You can edit your SVGs manually, or try [svgo](https://github.com/svg/svgo).
89
92
* Remember to specify the `viewBox` on your SVGs, so they can be scaled to any size. By default, the SVG content will expand to fill its container, but you can give it a `width` attribute (either in finite units, or percentage).
93
+
* IE/Edge: Doesn't seem to work on thick lines, round `stroke-linecap` appears regardless of offset, and other irregularities..
0 commit comments