robert
/
xjs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
							<!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; }

        /* Styles for Section 5 */
        .scroll-section {
            padding: 50px 0;
            display: flex;
            flex-direction: column;
            gap: 400px; /* Large gaps to force scrolling */
            align-items: center;
        }
        .card { 
            width: 150px; height: 200px; 
            background: linear-gradient(135deg, #6e8efb, #a777e3); 
            border-radius: 8px; 
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            display: flex; align-items: center; justify-content: center;
            color: white; font-weight: bold; font-size: 32px;
            opacity: 0; 
        }

        /* Styles for Section 6 (Scroll Linked) */
        .progress-bar {
            position: fixed; top: 0; left: 0; height: 5px; background: red; width: 0%; z-index: 100;
        }
        .scroll-box {
            width: 100px; height: 100px; background: #2c3e50; margin: 50px auto;
            color: white; display: flex; align-items: center; justify-content: center;
        }
    </style>
</head>
<body>
    <div class="progress-bar"></div>

    <h1>Animal.js Demo</h1>
    <p><a href="animal_basic.html">View CSS Selector Demo</a></p>

    <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 (Staggered Scroll)</h2>
        <p>Scroll down slowly. Cards will appear as they enter the view.</p>
        
        <div class="scroll-section">
            <div class="card card-1">1</div>
            <div class="card card-2">2</div>
            <div class="card card-3">3</div>
        </div>
        <p style="text-align: center; color: #aaa;">(End of trigger section)</p>
    </section>

    <section>
        <h2>6. Scroll Linked Animation</h2>
        <p>This box rotates and moves based on scroll position of the page.</p>
        <div class="scroll-box">Rotate</div>
        <div style="height: 50vh;"></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 (Trigger)
        // Staggered logic: observe each
        const cards = document.querySelectorAll('.card');
        cards.forEach((card, i) => {
             // Alternate left/right entrance
             const xStart = i % 2 === 0 ? -100 : 100;
             animal.inViewAnimate(card, {
                x: [xStart, 0],
                opacity: [0, 1],
                scale: [0.8, 1],
                duration: 1000,
                easing: { stiffness: 100, damping: 15 }
             }, { threshold: 0.2 });
        });

        // 6. Scroll Linked
        // 1. Progress Bar (Page Scroll)
        const progressAnim = animal.animate('.progress-bar', {
            width: ['0%', '100%'],
            duration: 1000, // Duration doesn't matter much for scroll linked, just maps 0-1
            autoplay: false
        });
        animal.scroll(progressAnim); // Default: window scroll

        // 2. Box Rotation (Element Scroll Visibility)
        const boxAnim = animal.animate('.scroll-box', {
            rotate: 360,
            x: 200,
            backgroundColor: '#e74c3c',
            duration: 1000,
            autoplay: false
        });
        // Scroll linked to the entire page scroll (simplest demo)
        // Or we can link it to when the section is in view if we implemented element-target logic in animal.js
        // animal.js current `scroll` implementation supports `target` for element visibility progress!
        
        // Let's link it to the page scroll for clarity
        animal.scroll(boxAnim);

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