entry-crossing + exit-crossing + test (#9)

dist/index.cjs

@@ -149,6 +149,10 @@ function transformRangeToPosition (range, viewportSize, rect) {
     startPosition = Math.max(start, end - viewportSize);
     duration = Math.min(viewportSize, height);
   }
+  else if (name === 'exit-crossing') {
+    startPosition = start;
+    duration = height;
+  }
   else if (name === 'cover') {
     startPosition = start - viewportSize;
     duration = height + viewportSize;
@@ -944,7 +948,7 @@ class Scroll {
  */
 
 /**
- * @typedef {'entry' | 'contain' | 'exit' | 'cover'} RangeName
+ * @typedef {'entry' | 'contain' | 'exit' | 'cover' | 'entry-crossing' | 'exit-crossing'} RangeName
  */
 
 /**

src/Scroll.js

@@ -223,7 +223,7 @@ export class Scroll {
  */
 
 /**
- * @typedef {'entry' | 'contain' | 'exit' | 'cover'} RangeName
+ * @typedef {'entry' | 'contain' | 'exit' | 'cover' | 'entry-crossing' | 'exit-crossing'} RangeName
  */
 
 /**

src/view.js

@@ -62,6 +62,10 @@ function transformRangeToPosition (range, viewportSize, rect) {
     startPosition = Math.max(start, end - viewportSize);
     duration = Math.min(viewportSize, height);
   }
+  else if (name === 'exit-crossing') {
+    startPosition = start;
+    duration = height;
+  }
   else if (name === 'cover') {
     startPosition = start - viewportSize;
     duration = height + viewportSize;

test/view.spec.js

@@ -271,3 +271,19 @@ test('start :: entry 40% :: start add calc(10vh + 25px) :: end cover 100% :: end
   t.is(result.start, 0); // -30 + 30 = 0
   t.is(result.end, 300); // 150 + 150 = 300
 });
+
+test('start :: entry-crossing 40% :: end :: exit-crossing 70%', t => {
+  const input = getScene({
+    viewSource: {
+      offsetParent: {},
+      offsetHeight: 150
+    },
+    start: {name: 'entry-crossing', offset: 40},
+    end: {name: 'exit-crossing', offset: 70},
+  });
+
+  const result = getTransformedScene(input, null, SMALLER_VIEWPORT_SIZE, IS_HORIZONTAL, smallAbsoluteOffsetContext);
+
+  t.is(result.start, 10);
+  t.is(result.end, 105);
+});

types.d.ts

@@ -1,4 +1,4 @@
-declare type RangeName = 'entry' | 'exit' | 'contain' | 'cover';
+declare type RangeName = 'entry' | 'exit' | 'contain' | 'cover' | 'entry-crossing' | 'exit-crossing';
 
 declare type RangeOffset = {
   name?: RangeName;