Fix various issues with automatically set inpoints and outpoints depending on combinations of mode and autoStart settings

Author: nateplusplus

dist/esm/pushin.js

@@ -157,18 +157,19 @@ export class PushInLayer extends PushInBase {
    * Get all inpoints for the layer.
    */
   private getInpoints(element: HTMLElement, index: number): number[] {
-    let inpoints = [this.scene.getTop()];
+    const { scene } = this;
+    let inpoints = [0];
     if (element.dataset[PUSH_IN_FROM_DATA_ATTRIBUTE]) {
       inpoints = element.dataset[PUSH_IN_FROM_DATA_ATTRIBUTE]!.split(',').map(
         inpoint => parseInt(inpoint.trim(), 10)
       );
     } else if (this.settings?.inpoints) {
       inpoints = this.settings.inpoints;
-    } else if (index === 0 || this.scene.getMode() === 'continuous') {
+    } else if (this.isFirst || scene.getMode() === 'continuous') {
       inpoints = this.scene.getInpoints();
     } else if (index > 0) {
       // Set default for middle layers if none provided
-      const { outpoint } = this.scene.layers[index - 1].params;
+      const { outpoint } = scene.layers[index - 1].params;
       inpoints = [outpoint - this.getOverlap()];
     }
 

dist/esm/pushin.js.map

@@ -193,11 +193,7 @@ export class PushInScene extends PushInBase {
    * @returns {number}
    */
   getTop(): number {
-    let { top } = this.container!.getBoundingClientRect();
-    if (this.pushin.target!.container) {
-      top -= this.pushin.target!.container.getBoundingClientRect().top;
-    }
-    return top;
+    return this.container!.getBoundingClientRect().top;
   }
 
   /**
@@ -207,11 +203,7 @@ export class PushInScene extends PushInBase {
    * @returns {number[]}
    */
   getInpoints(): number[] {
-    let inpoints = <number[]>[this.getTop()];
-    const containerTop =
-      this.container!.getBoundingClientRect().top +
-      document.documentElement.scrollTop;
-
+    let inpoints = [0];
     if (this.container!.dataset[PUSH_IN_FROM_DATA_ATTRIBUTE]) {
       const pushInFrom = <string>(
         this.container!.dataset[PUSH_IN_FROM_DATA_ATTRIBUTE]
@@ -220,9 +212,9 @@ export class PushInScene extends PushInBase {
     } else if (this.settings?.inpoints && this.settings?.inpoints.length > 0) {
       inpoints = this.settings.inpoints;
     } else if (this.settings?.autoStart === 'screen-bottom') {
-      inpoints = [containerTop - window.innerHeight];
+      inpoints = [this.getTop() - window.innerHeight];
     } else if (this.settings?.autoStart === 'screen-top') {
-      inpoints = [containerTop];
+      inpoints = [this.getTop()];
     }
 
     return inpoints;

dist/umd/pushin.js

@@ -251,12 +251,22 @@ export class PushIn extends PushInBase {
     const calculated = maxOutpoint + targetHeight;
 
     // Get the existing container height.
-    const height = parseFloat(
+    const containerHeight = parseFloat(
       getComputedStyle(this.container).height.replace('px', '')
     );
 
+    let height = Math.max(containerHeight, calculated);
+
+    if (
+      calculated < window.innerHeight &&
+      this.mode === 'continuous' &&
+      this.scene.settings.autoStart === 'screen-top'
+    ) {
+      height += window.innerHeight;
+    }
+
     // Use the largest value between existing container height, largest outpoint or calculated height.
-    this.container.style.height = `${Math.max(height, calculated)}px`;
+    this.container.style.height = `${height}px`;
   }
 
   loadStyles(): void {

dist/umd/pushin.js.map

@@ -46,5 +46,6 @@ ScreenTopContinuous.args = {
   settings: {
     autoStart: 'screen-top',
     mode: 'continuous',
+    debug: true,
   },
 };

dist/umd/pushin.min.js

@@ -43,10 +43,14 @@ ContinuousWithTransitions.args = {
       },
       {
         transitions: true,
+        transitionStart: 300,
+        transitionEnd: 300,
       },
       {
         transitions: true,
-        inpoints: [100],
+        inpoints: [200],
+        transitionStart: 300,
+        transitionEnd: 300,
       },
     ],
   },