Implement build for interact for home page and improve viewEnter example (#158)

Author: ydaniv

.github/workflows/interactdocs.yml

@@ -44,6 +44,9 @@ jobs:
         run: |
           NPQ_PKG_MGR=yarn npx npq install
 
+      - name: Build packages and landing page libs
+        run: ./scripts/build-landing.sh
+
       - name: Build docs app
         run: yarn workspace @wix/interact-docs build
         env:
@@ -64,7 +67,7 @@ jobs:
           mkdir -p _site/rules
           mkdir -p _site/assets
 
-          # Copy root landing page and assets
+          # Copy root landing page and assets (includes assets/lib/ from build-landing.sh)
           cp index.html _site/
           cp -r assets/* _site/assets/
 

.gitignore

@@ -3,6 +3,8 @@ node_modules
 .env.*
 dist/
 build/
+assets/lib/*
+!assets/lib/.gitkeep
 coverage/
 .DS_Store
 .idea/

assets/lib/.gitkeep

@@ -1,8 +1,6 @@
 // WIX INTERACT RUNTIME
-import { Interact } from 'https://esm.sh/@wix/interact@2.0.2/dist/es/web.js';
-// import { Interact } from '../packages/interact/dist/es/web.js';
-import * as presets from 'https://esm.sh/@wix/motion-presets@latest/dist/es/motion-presets.js';
-// import * as presets from './packages/motion-presets/dist/es/motion-presets.js';
+import { Interact } from './lib/interact/es/web.js';
+import * as presets from './lib/motion-presets/motion-presets.js';
 
 // =============================================================================
 // FUNCTIONS & METHODS
@@ -723,7 +721,6 @@ const config = {
     {
       key: 'hitbox',
       trigger: 'viewEnter',
-
       params: { type: 'alternate' },
       effects: [
         {
@@ -827,10 +824,12 @@ const config = {
 
     // Entrance Interactions (Swirling Plus)
     {
-      key: 'circle-top',
+      key: 'entrance-card',
       trigger: 'viewEnter',
+      params: { type: 'alternate', threshold: 0.8 },
       effects: [
         {
+          key: 'circle-top',
           fill: 'both',
           keyframeEffect: {
             name: 'slideFromLeftToTop',
@@ -842,13 +841,8 @@ const config = {
           duration: ENTRANCE_DURATION,
           easing: ENTRANCE_EASING,
         },
-      ],
-    },
-    {
-      key: 'circle-right',
-      trigger: 'viewEnter',
-      effects: [
         {
+          key: 'circle-right',
           fill: 'both',
           keyframeEffect: {
             name: 'slideFromTopToRight',
@@ -861,13 +855,8 @@ const config = {
           easing: ENTRANCE_EASING,
           delay: 100,
         },
-      ],
-    },
-    {
-      key: 'circle-bottom',
-      trigger: 'viewEnter',
-      effects: [
         {
+          key: 'circle-bottom',
           fill: 'both',
           keyframeEffect: {
             name: 'slideFromRightToBottom',
@@ -880,13 +869,8 @@ const config = {
           easing: ENTRANCE_EASING,
           delay: 200,
         },
-      ],
-    },
-    {
-      key: 'circle-left',
-      trigger: 'viewEnter',
-      effects: [
         {
+          key: 'circle-left',
           fill: 'both',
           keyframeEffect: {
             name: 'slideFromBottomToLeft',

assets/main.mjs

@@ -393,31 +393,31 @@ <h1 class="text-xl md:text-3xl font-light text-gray-600 leading-tight tracking-t
 
             <!-- 3. ENTRANCE -->
             <div class="w-full h-auto lg:h-[500px] overflow-hidden flex flex-col lg:flex-row rounded-3xl">
-                <div class="w-full lg:w-5/12 h-[400px] lg:h-full flex items-center justify-center p-6 lg:p-8 bg-white">
+                <interact-element data-interact-key="entrance-card" class="w-full lg:w-5/12 h-[400px] lg:h-full flex items-center justify-center p-6 lg:p-8 bg-white">
                     <div class="h-full aspect-square bg-[#000] relative overflow-hidden rounded-2xl">
 
                         <!-- Top Circle -->
-                        <interact-element data-interact-key="circle-top" data-interact-initial="true" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
+                        <interact-element data-interact-key="circle-top" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
                             <div class="circle"><div class="fill-circle bg-transparent"></div></div>
                         </interact-element>
 
                         <!-- Right Circle -->
-                        <interact-element data-interact-key="circle-right" data-interact-initial="true" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
+                        <interact-element data-interact-key="circle-right" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
                             <div class="circle"><div class="fill-circle bg-transparent"></div></div>
                         </interact-element>
 
                         <!-- Bottom Circle -->
-                        <interact-element data-interact-key="circle-bottom" data-interact-initial="true" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-30">
+                        <interact-element data-interact-key="circle-bottom" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-30">
                             <div class="circle"><div class="fill-circle bg-transparent"></div></div>
                         </interact-element>
 
                           <!-- Left Circle -->
-                          <interact-element data-interact-key="circle-left" data-interact-initial="true" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-40">
+                          <interact-element data-interact-key="circle-left" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-40">
                             <div class="circle"><div class="fill-circle bg-transparent"></div></div>
                         </interact-element>
 
                     </div>
-                </div>
+                </interact-element>
                 <div class="w-full lg:w-7/12 flex flex-col p-6 lg:p-10 h-auto lg:h-full">
                     <div class="mb-5 shrink-0">
                         <h1 class="text-xl md:text-3xl font-light text-gray-600 leading-tight tracking-tight">View Enter (AKA Scroll Triggered Animations and Entrance Animations)</h1>
@@ -769,6 +769,13 @@ <h3 class="font-bold text-lg">Source Code</h3>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script src="assets/modal.js"></script>
     <script src="assets/snippets.js"></script>
+    <script type="importmap">
+    {
+        "imports": {
+            "@wix/motion": "./assets/lib/motion/motion.js"
+        }
+    }
+    </script>
     <script type="module" src="assets/main.mjs"></script>
 </body>
 </html>

index.html

@@ -32,6 +32,7 @@
   "scripts": {
     "dev": "vite dev --open",
     "build": "rimraf dist && vite build && npm run build:types",
+    "build:landing": "../../scripts/build-landing.sh",
     "build:types": "tsc -p tsconfig.build.json",
     "lint": "tsc --noEmit",
     "test": "vitest run",

packages/.gitkeep

@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+# Builds all packages and copies the dist files into assets/lib/
+# so that index.html can load Interact and Presets from local bundles.
+#
+# Usage:
+#   yarn workspace @wix/interact build:landing   (from anywhere in the repo)
+#   ./scripts/build-landing.sh                    (from repo root)
+
+set -euo pipefail
+
+REPO_ROOT="$(git rev-parse --show-toplevel)"
+LIB_DIR="$REPO_ROOT/assets/lib"
+
+yarn workspaces foreach --all --topological --include 'packages/*' run build
+
+rm -rf "$LIB_DIR/interact" "$LIB_DIR/motion-presets" "$LIB_DIR/motion"
+
+mkdir -p "$LIB_DIR/interact/es"
+mkdir -p "$LIB_DIR/motion-presets"
+mkdir -p "$LIB_DIR/motion"
+
+cp "$REPO_ROOT/packages/interact/dist/es/web.js" "$LIB_DIR/interact/es/"
+cp "$REPO_ROOT/packages/interact/dist"/index-*.mjs "$LIB_DIR/interact/"
+cp "$REPO_ROOT/packages/motion-presets/dist/es/motion-presets.js" "$LIB_DIR/motion-presets/"
+cp "$REPO_ROOT/packages/motion/dist/es/motion.js" "$LIB_DIR/motion/"
+
+echo "Landing page libraries copied to assets/lib/"