A library to make animating svgs on scroll easier.
npm install scroll-svg
!GitHub issues
!GitHub stars
!GitHub license
!GitHub last commit
!GitHub contributors
Scroll SVG is a library that allows you to effortlessly animate/draw SVG paths on scroll. It is lightweight and easy to use. It provides a simple API that allows you to easily control the animation of the SVG path. It can be used with any number of SVG paths on a page. It is also compatible with Typescript.
Setup is as simple as adding an id to the path element of the svg and passing the element to the scrollSvg function. The rest of the docs will show you how to use the library, including the options parameter.
Check out the interactive demo or the example code.
Full Docs at Github
---
---
- Setup
- HTML
- Install
- Package manager
- CDN
- ESM
- ES5
- Animate the SVG
- Options
- Using the options
- Invert
- Draw Origin
- Offset
- Speed
- Undraw
First add an id to the path of the svg you wish to draw on scroll
``html`
There are two options for installing and using scroll-svg, a package manager or a CDN.
Use the package manager of your choice to download.
`
npm i scroll-svg
-
pnpm add scroll-svg
-
yarn add scroll-svg
To include scroll-svg via a CDN there are 2 options, ES modules/ES6 or a global variable for ES5.
#### ESM
Set the script tag to the type of module
`html`
Then import the package from UNPKG
`javascript`
import scrollSvg from 'https://unpkg.com/scroll-svg@0.0.0'
// Specify Version ^^^^^
For version 1.4.1 and earlier include /dist/index.mjs after the version number to specify the module version (The module version is default for version 1.4.2 and later). For more details visit unpkg.com.
#### ES5
To include scroll-svg as a global variable, add a script tag with a link to the package. Be sure to specify the version and include /dist/index.js after the version number to receive the ES5 version instead ESM version.
`html`
integrity="sha384-MoRMdbhaxrzw4H/Ah/im0x6B+lyNcSP0EAVvnsIRFxY9BSv3rthsmOeLZMlkVv42"
crossorigin="anonymous">
To generate an integrity hash, use srihash.org.
Then destructure the global variable $_scrollSvg to access the scroll-svg functions.
`javascript`
const { default: scrollSvg, scrollSvgNullable } = $_scrollSvg
// ^^^Optional^^^
The ES5 CDN option is only available for version 1.4.3 and later.
To draw the svg path, import scrollSvg and pass the svg path element to scrollSvg.
`javascript
import scrollSvg from 'scroll-svg'
const svgPath = document.querySelector('#scroll-line')
const svg = scrollSvg(svgPath)
`
---
---
These are the default options.
`javascript`
const options = {
invert: false,
draw_origin: 'center',
offset: 0,
speed: 1,
undraw: false,
}
Pass the options as the second argument to scrollSvg.
`javascript`
const svg = scrollSvg(svgPath, options)
It is not required to use all of the options. You can pass just the options you need and leave the others out like in the example below.
`javascript`
const svg = scrollSvg(svgPath, { invert: true, draw_origin: 'center' })
The invert option inverts which direction the svg draws from. Sometimes an svg draws backwards by default and the invert option is required to correct it.true
Valid Values: or false
Default Value:
---
The draw_origin option controls at which point on the screen the svg gets drawn, with 0 being the top of the screen and 1 being the bottom. By default it draws from the center of the screen or at 0.5. The option takes the values top which is 0.25, center which is 0.5, bottom which is 0.75, or any decimal between 0 and 1.top
Valid Values: , center, bottom, or any decimal from 0 to 1
Default Value:
---
The offset option allow you to offset the svg drawing from the draw_origin by a set amount of pixels. This is useful if you want to draw the svg before it reaches the draw_origin or after it passes it. It takes any number as a value. If the value is negative, the svg will be drawn the offset amount of pixels behind the draw_origin and if the value is positive, the svg will be ahead the draw_origin by the offset amount. So if you want to draw the svg 100 pixels before the draw_origin, you would use -100 as the value.number
Valid Values: any , positive or negative0
Default Value:
---
The speed option allows you to control the speed at which the svg is drawn. It takes any number above zero as a value. The higher the number, the faster the svg will be drawn. The default value is 1 which is the normal speed. If you want to draw the svg half as fast, you would use 0.5 as the value. It is useful if you want to draw multiple SVGs at different speeds or if you want to draw the svg slower or faster than normal.number
Valid Values: any above 01
Default Value:
---
The undraw option allows you to control whether the svg will be drawn or undrawn on scroll. If the value is true, the svg will be undrawn on scroll. If the value is false, the svg will be drawn on scroll. The default value is false which means the svg will be drawn on scroll. It is useful if you want to draw the svg on scroll but undraw it when the user scrolls back up. (Use the .changeOptions() for that)true
Valid Values: or false
Default Value:
---
Full Documention can be found on the Github page.