Add toggle feature

index.html

@@ -119,7 +119,11 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
 
         <div class="h-screen"></div>
 
-        <div data-controller="scroll-reveal" data-scroll-reveal-threshold-value="0.9">
+        <div
+          data-controller="scroll-reveal"
+          data-scroll-reveal-threshold-value="0.9"
+          data-scroll-reveal-toggle-value="true"
+        >
           <p data-scroll-reveal-target="item" class="reveal">With custom</p>
           <p data-scroll-reveal-target="item" class="reveal">options!</p>
         </div>

src/index.ts

@@ -4,16 +4,19 @@ interface Option {
   class?: string
   threshold?: number
   rootMargin?: string
+  toggle?: boolean
 }
 
 export default class ScrollReveal extends Controller {
   classValue: string
   thresholdValue: number
   rootMarginValue: string
+  toggleValue: boolean
 
   class: string
   threshold: number
   rootMargin: string
+  toggle: boolean
   observer: IntersectionObserver
 
   itemTargets: HTMLElement[]
@@ -23,6 +26,7 @@ export default class ScrollReveal extends Controller {
     class: String,
     threshold: Number,
     rootMargin: String,
+    toggle: Boolean
   }
 
   initialize(): void {
@@ -33,6 +37,7 @@ export default class ScrollReveal extends Controller {
     this.class = this.classValue || this.defaultOptions.class || "in"
     this.threshold = this.thresholdValue || this.defaultOptions.threshold || 0.1
     this.rootMargin = this.rootMarginValue || this.defaultOptions.rootMargin || "0px"
+    this.toggle = this.toggleValue || this.defaultOptions.toggle || false
 
     this.observer = new IntersectionObserver(this.intersectionObserverCallback, this.intersectionObserverOptions)
     this.itemTargets.forEach((item) => this.observer.observe(item))
@@ -42,17 +47,23 @@ export default class ScrollReveal extends Controller {
     this.itemTargets.forEach((item) => this.observer.unobserve(item))
   }
 
-  intersectionObserverCallback(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void {
-    entries.forEach((entry) => {
+  intersectionObserverCallback (entries: IntersectionObserverEntry[], observer: IntersectionObserver): void {
+    entries.forEach(entry => {
+      const target = entry.target as HTMLElement
       if (entry.intersectionRatio > this.threshold) {
-        const target = entry.target as HTMLElement
         target.classList.add(...this.class.split(" "))
 
         if (target.dataset.delay) {
           target.style.transitionDelay = target.dataset.delay
         }
 
-        observer.unobserve(target)
+        if (!this.toggle) {
+          observer.unobserve(target)
+        }
+      }
+
+      if (this.toggle && (entry.intersectionRatio < this.threshold || !entry.isIntersecting)) {
+        target.classList.remove(...this.class.split(' '))
       }
     })
   }

yarn.lock

@@ -5022,6 +5022,88 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
   integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
 
+[email protected]:
+  version "16.3.0"
+  resolved "https://registry.yarnpkg.com/prettier-standard/-/prettier-standard-16.3.0.tgz#0a00a85df14fffa73f947eb54cdf7cd73ccfad0a"
+  integrity sha512-6ijfydbY+K9E3hNiNeywqSR/3rlApCp7/dAEyfHeDG3nuDuWOCQsQtkWXWmsZ92s7q7UJqUNeFwkgIlioVK1Gw==
+  dependencies:
+    chalk "^2.4.2"
+    diff "^4.0.2"
+    eslint "^6.8.0"
+    execa "^2.0.4"
+    find-up "^4.1.0"
+    get-stdin "^7.0.0"
+    globby "^6.1.0"
+    ignore "^3.3.7"
+    lint-staged "9.4.3"
+    mri "^1.1.5"
+    multimatch "^3.0.0"
+    prettierx "0.11.3"
+
+[email protected]:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/prettierx/-/prettierx-0.11.3.tgz#379d1aa7df4dbd049c1b34a1990d903efa4e6130"
+  integrity sha512-Xf04LEfD3ITo26i5U/zR++hwqKPG3feR06rrjB0t2o+QFv8ZidFp4o7nPqPGLfE4UwHJgd0qwnZKwm0MsUQHUA==
+  dependencies:
+    "@angular/compiler" "8.2.14"
+    "@babel/code-frame" "7.8.3"
+    "@babel/parser" "7.9.4"
+    "@glimmer/syntax" "0.41.4"
+    "@iarna/toml" "2.2.3"
+    "@typescript-eslint/typescript-estree" "2.6.1"
+    angular-estree-parser "1.3.1"
+    angular-html-parser "1.4.0"
+    camelcase "5.3.1"
+    chalk "3.0.0"
+    cjk-regex "2.0.0"
+    cosmiconfig "5.2.1"
+    dashify "2.0.0"
+    dedent "0.7.0"
+    diff "4.0.2"
+    editorconfig "0.15.3"
+    editorconfig-to-prettier "0.1.1"
+    escape-string-regexp "2.0.0"
+    esutils "2.0.3"
+    find-parent-dir "0.3.0"
+    find-project-root "1.1.1"
+    flow-parser "0.111.3"
+    get-stream "4.1.0"
+    globby "6.1.0"
+    graphql "14.6.0"
+    html-element-attributes "2.2.1"
+    html-styles "1.0.0"
+    html-tag-names "1.1.5"
+    ignore "4.0.6"
+    is-ci "2.0.0"
+    jest-docblock "25.3.0"
+    json-stable-stringify "1.0.1"
+    leven "3.1.0"
+    lines-and-columns "1.1.6"
+    linguist-languages "7.6.0"
+    lodash.uniqby "4.7.0"
+    mem "5.1.1"
+    minimatch "3.0.4"
+    minimist "1.2.5"
+    n-readlines "1.0.0"
+    normalize-path "3.0.0"
+    parse-srcset "1.0.2"
+    postcss-less "2.0.0"
+    postcss-media-query-parser "0.2.3"
+    postcss-scss "2.0.0"
+    postcss-selector-parser "2.2.3"
+    postcss-values-parser "1.5.0"
+    regexp-util "1.2.2"
+    remark-math "1.0.6"
+    remark-parse "5.0.0"
+    resolve "1.15.1"
+    semver "6.3.0"
+    string-width "4.2.0"
+    unicode-regex "3.0.0"
+    unified "8.4.2"
+    vnopts "1.0.2"
+    yaml "1.8.3"
+    yaml-unist-parser "1.1.1"
+
 progress@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"