JSDoc Added

.changeset/mighty-planes-call.md

@@ -0,0 +1,5 @@
+---
+"scroll-svg": patch
+---
+
+JSDoc Added

.npmignore

@@ -4,5 +4,5 @@ src
 pnpm-lock.yaml
 tsconfig.json
 vite.config.ts
-examples
+example
 docs

README.md

@@ -46,9 +46,9 @@ yarn add scroll-svg
 To draw the svg path, import `scrollSVG` and pass the svg path element to `scrollSVG`.
 
 ```javascript
-import scrollSVG from "scroll-svg"
+import scrollSVG from 'scroll-svg'
 
-const svgPath = document.querySelector("#scroll-line")
+const svgPath = document.querySelector('#scroll-line')
 const svg = scrollSVG(svgPath)
 ```
 
@@ -57,21 +57,21 @@ const svg = scrollSVG(svgPath)
 To use with Typescript, change it from the implicit `Element|null` to `SVGPathElement` type before passing it to `scrollSVG`.
 
 ```typescript
-const svgPath = document.querySelector("#scroll-line") as SVGPathElement
+const svgPath = document.querySelector('#scroll-line') as SVGPathElement
 //                                                     ^^^^^^^^^^^^^^^^^
 ```
 
 ### Stop the animation
 
-To stop the svg path, use the .stopAnimating() method on the svg object.
+To stop the svg path animation, use the .stopAnimating() method on the svg object.
 
 ```javascript
 svg.stopAnimating()
 ```
 
 ### Reactivate the animation
 
-To continue the svg path, use the .animate() method on the svg object.
+To continue the svg path animation after it was stopped, use the .animate() method on the svg object.
 
 ```javascript
 svg.animate()
@@ -88,7 +88,7 @@ These are the default options.
 ```javascript
 const options = {
   invert: false,
-  draw_origin: "center",
+  draw_origin: 'center',
   offset: 0,
   speed: 1,
   undraw: false,
@@ -106,7 +106,7 @@ const svg = scrollSVG(svg, 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(svg, { invert: true, draw_origin: "center" })
+const svg = scrollSVG(svg, { invert: true, draw_origin: 'center' })
 ```
 
 ## Changing options after initialization
@@ -167,7 +167,7 @@ Default Value: `1`
 
 ### Undraw
 
-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.
+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)
 <br/>
 <br/>
 Valid Values: `true` or `false`
@@ -244,7 +244,7 @@ To use ScrollSvg with React, you can use the `useEffect` hook to start animating
 
 ```javascript
 useEffect(() => {
-  const svgPath = document.querySelector("#scroll-line")
+  const svgPath = document.querySelector('#scroll-line')
   const svg = scrollSVG(svgPath)
 
   return () => svg.remove()

example/example.css

@@ -103,3 +103,7 @@ section:nth-of-type(2n) {
   width: auto;
   height: 100%;
 }
+
+#scroll-line-2 {
+  transition: all 0s ease;
+}

example/example.ts

@@ -1,11 +1,11 @@
-import scrollSvg from "../src/index"
+import scrollSvg from '../src/index'
 
-const svgPath1 = document.querySelector("#scroll-line-1") as SVGPathElement
-const svgPath2 = document.querySelector("#scroll-line-2") as SVGPathElement
-const svgPath3 = document.querySelector("#scroll-line-3") as SVGPathElement
-const svgPath4 = document.querySelector("#scroll-line-4") as SVGPathElement
+const svgPath1 = document.querySelector('#scroll-line-1') as SVGPathElement
+const svgPath2 = document.querySelector('#scroll-line-2') as SVGPathElement
+const svgPath3 = document.querySelector('#scroll-line-3') as SVGPathElement
+const svgPath4 = document.querySelector('#scroll-line-4') as SVGPathElement
 
 const svg1 = scrollSvg(svgPath1, { invert: true })
-const svg2 = scrollSvg(svgPath2, { draw_origin: "bottom" })
+const svg2 = scrollSvg(svgPath2, { draw_origin: 'bottom' })
 const svg3 = scrollSvg(svgPath3, { offset: 100 })
 const svg4 = scrollSvg(svgPath4, { undraw: true })

package.json

@@ -24,7 +24,9 @@
   "keywords": [
     "scroll",
     "svg",
-    "animations"
+    "animations",
+    "animate svg",
+    "scroll animation"
   ],
   "author": "Daniel Pulber",
   "license": "MIT",

src/index.ts

@@ -1,15 +1,20 @@
-import { scrollSvgClass, scrollSvgClassEmpty } from "./scrollSvgClass"
-import { Options, OptionalOptions } from "./types"
-import { validateOptions, validSvgPath } from "./utils/inputValidation"
+import { scrollSvgClass, scrollSvgClassEmpty } from './scrollSvgClass'
+import { Options, OptionalOptions } from './types'
+import { validateOptions, validSvgPath } from './utils/inputValidation'
 
 export const defaultOptions: Options = {
   invert: false,
-  draw_origin: "center",
+  draw_origin: 'center',
   offset: 0,
   speed: 1,
   undraw: false,
 }
 
+/**
+ *
+ * @param {SVGPathElement} svgPath The SVG Path which you wish to animate on scroll
+ * @param {OptionalOptions} userOptions Options to customize how and when the SVG is drawn
+ */
 export default function scrollSvg(svgPath: SVGPathElement, userOptions: OptionalOptions = defaultOptions) {
   // validate svgPath
   // if invalid returns true, the function returns an empty replica class of scrollSvgClass

src/scrollSvgClass.ts

@@ -1,11 +1,11 @@
-import { defaultOptions } from "./index"
-import { OptionalOptions, Options } from "./types"
-import calcPercentToDraw from "./utils/calcPercentToDraw"
-import calcAndDrawScrollLine from "./utils/calcAndDrawScrollLine"
-import { validateOptions } from "./utils/inputValidation"
-import setupSvgPath from "./utils/minor/setupSvgPath"
+import { defaultOptions } from './index'
+import { OptionalOptions, Options, ScrollSvgClass } from './types'
+import calcPercentToDraw from './utils/calcPercentToDraw'
+import calcAndDrawScrollLine from './utils/calcAndDrawScrollLine'
+import { validateOptions } from './utils/inputValidation'
+import setupSvgPath from './utils/minor/setupSvgPath'
 
-export class scrollSvgClass {
+export class scrollSvgClass implements ScrollSvgClass {
   svgPath: SVGPathElement
   options: Options
   animationFrame: number = 0
@@ -25,8 +25,8 @@ export class scrollSvgClass {
     calcAndDrawScrollLine(svgPath, options)
 
     this.observer = new IntersectionObserver(
-      (items) => {
-        items.map((item) => {
+      items => {
+        items.map(item => {
           if (item.isIntersecting) {
             this.isObservable = true
             animationFrame(this)
@@ -36,7 +36,7 @@ export class scrollSvgClass {
         })
       },
       {
-        rootMargin: "50px 0px",
+        rootMargin: '50px 0px',
       }
     )
 
@@ -79,7 +79,7 @@ export class scrollSvgClass {
     this.svgPath.style.strokeDashoffset = `${this.svgPath.getTotalLength()}`
   }
   fill() {
-    this.svgPath.style.strokeDashoffset = "0"
+    this.svgPath.style.strokeDashoffset = '0'
   }
   remove() {
     this.stopAnimating()
@@ -105,8 +105,20 @@ const animationFrame = (scrollSvgObj: scrollSvgClass) => {
 }
 
 // an empty replica class of scrollSvgClass to return when the input is invalid
-export class scrollSvgClassEmpty {
-  constructor() {}
+export class scrollSvgClassEmpty implements ScrollSvgClass {
+  svgPath: SVGPathElement
+  options: Options = defaultOptions
+  animationFrame: number = 0
+  prevBoundingRectTop: number = 0
+  isActive: boolean = true
+  isObservable: boolean = true
+  observer: IntersectionObserver
+
+  constructor() {
+    console.error('Scroll Svg Class Empty ~ Seems to be an error with your input.')
+    this.svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    this.observer = new IntersectionObserver(function () {})
+  }
   animate() {}
   stopAnimating() {}
   redraw() {}
@@ -117,8 +129,8 @@ export class scrollSvgClassEmpty {
     return defaultOptions
   }
   getSvgPath() {
-    console.error("Invalid input to scrollSvg. Returning an empty SVGPathElement.")
-    return document.createElementNS("http://www.w3.org/2000/svg", "path")
+    console.error('Invalid input to scrollSvg. Returning an empty SVGPathElement.')
+    return this.svgPath
   }
   getPercentageDrawn() {
     return 0