@bkwld/vue-in-view - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0

components/in-view.js

@@ -7,2 +7,13 @@ export default {
 		classes: Boolean, // Add "visible" class to child when intersecting
+		when: {  // Used to delay triggering until farther into viewport
+			type: Number | String,
+			default: 0,
+		},
+		target: {
+			type: String,
+			default: 'descendants',
+			validator(val) {
+				return ['self', 'children', 'descendants'].includes(val)
+			},
+		},
 	},
@@ -28,4 +39,30 @@
 
+	computed: {
+
+		// Determin the when value, which accepts numbers and strings
+		rootMarginBottom() {
+			if (!this.when) return
+			if (typeof this.when == 'string') return `-${this.when}`
+			if (typeof this.when == 'number') {
+				if (this.when >= 0 && this.when <= 1) return `-${this.when * 100}%`
+				else return `-${this.when}px`
+			}
+		},
+
+		// Calculate the intersection observer's rootMargin
+		rootMargin() {
+			if (!this.rootMarginBottom) return
+			return `0% 0% ${this.rootMarginBottom} 0%`
+		}
+
+	},
+
 	watch: {
 
+		// Rebuild intersection obserer when root margin changes
+		rootMargin() {
+			this.stopObserving()
+			this.startObserving()
+		},
+
 		// React to visiblity changes
@@ -49,2 +86,10 @@ visible() {
 				else if (!this.initialState && this.visible) this.playAnimations()
+
+				// Play animations in reverse when no longer visible, like as an outro.
+				// If the animations start delayed, reverse them.  Otherwise, we can
+				// just hard reset when they aren't visible
+				else if (!this.initialState && !this.visible) {
+					if (this.rootMarginBottom) this.reverseAnimations()
+					else this.resetAnimations()
+				}
 			}
@@ -57,3 +102,3 @@
 			this.initialState = false
-		}
+		},
 
@@ -68,2 +113,4 @@ },
 				this.visible = entry.isIntersecting
+			}, {
+				rootMargin: this.rootMargin
 			})
@@ -78,5 +125,17 @@ this.observer.observe(this.$el)
 
+		// Get the array of animationed to control
+		getAnimations() {
+			switch(this.target) {
+				case 'self': return this.$el.getAnimations()
+				case 'children':
+					return Array.from(this.$el.children).reduce((animations, child) => {
+						return animations.concat(child.getAnimations())
+					}, [])
+				case 'descendants': return this.$el.getAnimations({ subtree: true })
+			}
+		},
+
 		// Restart all css animations inside the container
 		resetAnimations() {
-			this.$el.getAnimations({ subtree: true }).forEach(animation => {
+			this.getAnimations().forEach(animation => {
 				animation.pause()
@@ -89,7 +148,15 @@ animation.currentTime = 0
 		playAnimations() {
-			this.$el.getAnimations({ subtree: true }).forEach(animation => {
+			this.getAnimations().forEach(animation => {
+				animation.playbackRate = 1
 				animation.play()
 			})
-		}
+		},
 
+		// Play all css animation inside the container backwards
+		reverseAnimations() {
+			this.getAnimations().forEach(animation => {
+				animation.playbackRate = -1
+				animation.play()
+			})
+		},
 	},
@@ -96,0 +163,0 @@

package.json

 {
 	"name": "@bkwld/vue-in-view",
-	"version": "0.1.1",
+	"version": "1.0.0",
 	"description": "Vue component for triggering animations, events, and slot variables based on visibility in the viewport.",
@@ -5,0 +5,0 @@ "repository": "[e-mail]:BKWLD/vue-in-view.git",

README.md

@@ -11,3 +11,3 @@ # vue-in-view
 ```sh
-yarn add vue-in-view
+yarn add @bkwld/vue-in-view
 ```
@@ -27,3 +27,3 @@
 export default {
-  buildModules: [ 'vue-in-view/nuxt' ]
+  buildModules: [ '@bkwld/vue-in-view/nuxt' ]
 }
@@ -58,7 +58,9 @@ ```
 
-| **Prop**    | **Default** | **Description**
-|-------------|-------------|----------------
-| `animate`   | `false`     | Reset CSS animations when hidden and play them when visible.
-| `classes`   | `false`     | Adds `hidden` class when hidden and `visible` when visible.
-| `once`      | `false`     | Stops watching for viewport changes after the first instance of the component being visible.
+| **Prop**    | **Default**   | **Description**
+|-------------|---------------|----------------
+| `animate`   | `false `      | Reset CSS animations when hidden and play them when visible.
+| `classes`   | `false`       | Adds `hidden` class when hidden and `visible` when visible.
+| `once`      | `false`       | Stops watching for viewport changes after the first instance of the component being visible.
+| `when`      | `0%`          | A px or % value for delaying when the visible effect is applied. Can be a number (`.25` for `25%`, 200 for `200px`) or a string. This is used to set the [`rootMargin`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) and, as such, only `px` and `%` values are supported.
+| `target`    | `descendants` | Only used with `animate`, this controls which elements' animations are controlled.  May be `descendants` (self and all descendant elements), `children` (just the immediate children), or `self` (just animations applied to the `vue-in-view` component).
 
@@ -65,0 +67,0 @@ ### Slots

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17755

increased by16.37%

Lines of code

164

increased by57.69%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

82

increased by2.5%

No dependency changes