robert
/
xjs


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Targets - Overview</title>
    <link rel="stylesheet" href="../demo.css">
    <style>
        .code-block {
            background: #111;
            padding: 20px;
            border-radius: 6px;
            font-family: 'Roboto Mono', monospace;
            font-size: 13px;
            color: #abb2bf;
            position: relative;
        }
        .code-highlight {
            border: 1px solid #333;
            padding: 2px 4px;
            border-radius: 4px;
            display: inline-block;
        }
        .annotation {
            color: #E69F3C;
            font-size: 12px;
            margin-left: 10px;
            position: absolute;
        }
        .annotation::before {
            content: '— ';
        }
    </style>
</head>
<body>

    <div class="container">
        <div style="font-size: 10px; font-weight: bold; letter-spacing: 1px; color: #ff4b4b; margin-bottom: 20px;">ANIMATION > TARGETS</div>
        
        <h1>Targets</h1>
        <p class="description">Specify the elements to which property value changes are applied.<br>
        Animation targets are defined in the first argument of the <code class="inline">animate()</code> function.</p>

        <div class="box-container" style="margin-top: 30px;">
            <div class="code-view active" style="background: #161616; padding: 40px;">
                <span class="kwd">const</span> $ <span class="punc">=</span> <span class="fun">xjs</span>;<br><br>
                <span class="fun">xjs</span>(<span class="str">'.square'</span>)<span class="annotation">Targets</span>.<span class="fun">animate</span>(<br>
                &nbsp;&nbsp;{<br>
                &nbsp;&nbsp;&nbsp;&nbsp;x: <span class="num">100</span>,<br>
                &nbsp;&nbsp;&nbsp;&nbsp;scale: <span class="num">2</span>,<br>
                &nbsp;&nbsp;&nbsp;&nbsp;opacity: <span class="num">.5</span>,<br>
                &nbsp;&nbsp;&nbsp;&nbsp;duration: <span class="num">400</span>,<br>
                &nbsp;&nbsp;&nbsp;&nbsp;delay: <span class="num">250</span>,<br>
                &nbsp;&nbsp;&nbsp;&nbsp;easing: <span class="str">'ease-out'</span>,<br>
                &nbsp;&nbsp;&nbsp;&nbsp;loop: <span class="num">3</span>,<br>
                &nbsp;&nbsp;&nbsp;&nbsp;direction: <span class="str">'alternate'</span>,<br>
                &nbsp;&nbsp;&nbsp;&nbsp;autoplay: <span class="kwd">false</span>,<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="fun">begin</span>: () => {},<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="fun">update</span>: () => {},<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="fun">complete</span>: () => {},<br>
                &nbsp;&nbsp;}<br>
                );
            </div>
        </div>
        
        <div style="margin-top: 40px; border-top: 1px solid #222; padding-top: 20px;">
            <div style="color: #666; font-size: 14px;">In this section</div>
            <ul style="list-style: none; padding: 0; margin-top: 15px; color: #888;">
                <li style="margin-bottom: 8px;">CSS Selector</li>
                <li style="margin-bottom: 8px;">DOM Elements</li>
                <li style="margin-bottom: 8px;">JavaScript Objects</li>
                <li style="margin-bottom: 8px;">Array of targets</li>
            </ul>
        </div>

    </div>

</body>
</html>