robert
/
xjs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animal.js Demo</title>
    <style>
        body { font-family: sans-serif; padding: 20px; max-width: 800px; margin: 0 auto; padding-bottom: 500px; }
        section { margin-bottom: 50px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
        .box { width: 50px; height: 50px; background: #3498db; border-radius: 4px; margin-bottom: 10px; }
        .circle { width: 50px; height: 50px; background: #e74c3c; border-radius: 50%; }
        .btn { padding: 8px 16px; cursor: pointer; background: #333; color: white; border: none; border-radius: 4px; margin-top: 10px; }
        svg { border: 1px solid #ddd; }
    </style>
</head>
<body>
    <h1>Animal.js Demo</h1>

    <section>
        <h2>1. Basic Transform & Opacity (WAAPI)</h2>
        <div class="box box-1"></div>
        <button class="btn" onclick="runBasic()">Animate</button>
        <pre>animal.animate('.box-1', { x: 200, rotate: 180, opacity: 0.5, duration: 1000 })</pre>
    </section>

    <section>
        <h2>2. Spring Physics</h2>
        <div class="box box-2"></div>
        <button class="btn" onclick="runSpring()">Spring</button>
        <pre>animal.animate('.box-2', { x: 200, easing: { stiffness: 200, damping: 10 } })</pre>
    </section>

    <section>
        <h2>3. Timeline Sequence</h2>
        <div class="box box-3a" style="background: purple"></div>
        <div class="box box-3b" style="background: orange"></div>
        <button class="btn" onclick="runTimeline()">Run Timeline</button>
    </section>

    <section>
        <h2>4. SVG Draw</h2>
        <svg width="200" height="100" viewBox="0 0 200 100">
            <path class="path-1" fill="none" stroke="#2ecc71" stroke-width="5" d="M10,50 Q50,5 90,50 T190,50" />
        </svg>
        <br>
        <button class="btn" onclick="runSvg()">Draw SVG</button>
    </section>

    <section>
        <h2>5. In View Trigger</h2>
        <p>Scroll down to see the animation...</p>
        <div style="height: 110vh; background: linear-gradient(to bottom, #f9f9f9, #eee); display: flex; align-items: center; justify-content: center; color: #999;">
            Scroll Spacer (Keep scrolling)
        </div>
        <div class="box box-view" style="opacity: 0;"></div>
    </section>

    <script src="../animal.js"></script>
    <script>
        // 1. Basic
        function runBasic() {
            animal.animate('.box-1', { 
                x: 200, 
                rotate: 180, 
                opacity: 0.5, 
                duration: 1000,
                easing: 'ease-in-out'
            }).then(() => {
                console.log('Basic finished');
                // Chain back
                animal.animate('.box-1', { x: 0, rotate: 0, opacity: 1, duration: 500 });
            });
        }

        // 2. Spring
        function runSpring() {
            animal.animate('.box-2', { 
                x: 200, 
                easing: { stiffness: 150, damping: 8 } 
            });
        }

        // 3. Timeline
        function runTimeline() {
            const tl = animal.timeline();
            tl.add('.box-3a', { x: 100, duration: 500 })
              .add('.box-3b', { x: 100, rotate: 90, duration: 800 }, "-=200") // Overlap
              .add('.box-3a', { x: 0, duration: 500 })
              .add('.box-3b', { x: 0, rotate: 0, duration: 500 });
        }

        // 4. SVG
        function runSvg() {
            animal.svgDraw('.path-1', { duration: 1500, easing: 'ease-in-out' });
        }

        // 5. In View
        // Use explicit from-to for spring to ensure correct start position
        animal.inViewAnimate('.box-view', {
            x: [-100, 0], 
            opacity: [0, 1],
            duration: 1000,
            easing: { stiffness: 50, damping: 15 } // slow spring
        }, { threshold: 0.5 });

    </script>
</body>
</html>