Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/slitrobo/framer-path
Create custom svg shapes and animate each point individually in Framer JS.
https://github.com/slitrobo/framer-path
Last synced: 2 months ago
JSON representation
Create custom svg shapes and animate each point individually in Framer JS.
- Host: GitHub
- URL: https://github.com/slitrobo/framer-path
- Owner: slitrobo
- Created: 2016-05-06T17:02:21.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-05-06T17:57:42.000Z (over 8 years ago)
- Last Synced: 2024-08-03T00:10:14.499Z (6 months ago)
- Language: CoffeeScript
- Homepage:
- Size: 6.84 KB
- Stars: 147
- Watchers: 13
- Forks: 17
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-framer - Framer Path - Create custom SVG shapes and animate each point individually. (Modules)
README
Create custom svg shapes and animate each point individually in Framer JS.
Can be useful for:
- Creating arrays of points with quick math expressions
- Animated graphs & statistics
- Simple animated icons
- Fluid shapes
How to install:
1. Download the 'Path.coffee' file to your project /modules/ folder
2. Copy this line of code to the framer studio:
```
{Path} = require "Path"
```
## New layer
```
p = new Path
strokeWidth: 1
pointVisible: true
handleVisible: true
pointSize: 6
handleSize: 2
fill: "#e8e9ff"
pointColor: "blue"
handleColor: "blue"
strokeColor: "blue"
```
*Path* class is an extended layer class, so you can use most of the layer properties, as well as events with it.
```
p = new Path
width: 300
height: 300
backgroundColor: "red"
p.center()
```
## New points
Currently, this module supports only straight, quadratic and cubic bezier points.
```
p.path.point x: 30, y: 30
p.path.point x: 130, y: 30
```
Quadratic bezier is a curve with only one handle:
```
p.path.point x: 30, y: 30
p.path.quadratic
x: 60, y: 60
qx: 120, qy: 60
```
Cubic bezier has two handles:
```
p.path.point x: 30, y: 30
p.path.cubic
x: 30, y: 60
cx1: 120, cy1: 30
cx2: 120, cy2: 60
```
If you want to use straight points after bezier, you need to use special closing point:
```
p.path.point x: 30, y: 30
p.path.quadratic
x: 60, y: 60
qx: 120, qy: 60
p.path.close x: 180, y: 60
```
## Animation
To animate a value, add states to the point you want to animate and then run the animation with *path.animate()* function.
```
p.path.point x: 30, y: 30
p.path.point
x: 130, y: 30
states:
x: 160, y: 60
p.path.animate()
```
You can add unlimited amount of states by using array instead of integer. The array lengths of x and y should always be equal.
```
p.path.point x: 30, y: 30
p.path.point
x: 130, y: 30
states:
x: [160, 180, 200]
y: [60, 80, 100]
p.path.animate()
```
There are two different modes of animating the points, *’animation’* and *’states’*. The default value is set as *’states’*.
As position of the point is based on position of the point layer (even when it’s not visible), *’animation’* mode allows you to play different tricks such as updating the value of point on the go:
```
rdm = -> return Utils.randomNumber(30, 80)
p.path.point x: 30, y: 30
p.path.point
x: 130, y: 30
states:
x: -> rdm()
y: -> rdm()
Utils.interval 0.75, -> p.path.animate("animation")
```
Note that *’animation’* mode won’t work with states arrays.
You can add animation options in a traditional way:
```
p.path.animationOptions =
time: 0.75
curve: “spring"
```
## Be aware that
- Any kind of path should always start with simple point.
- *path.animationOptions* should be assigned before you create any points
- The path module alters the *layer.html* value, that’s how animation happens, so if you want to change *layer.html*, it’s better create new parent layer
## Examples
**Animated graph**
http://share.framerjs.com/w27sxwwsn1rw/
**Blend shapes**
http://share.framerjs.com/j6977iinxa65/
**Drawing tool**
http://share.framerjs.com/2kfa8aoiw2jo/