Custom Animation and Reference File Download Link
https://eu2.contabostorage.com/00f3241116844f24b628f46d81abb929:st1/folder10/10544/12031_powerpoint_with_animation_before_sanitization.pptx
2026-06-01 07:49:04 - Admin
<style> body{ font-family: Arial, Helvetica, sans-serif; line-height:1.6; margin:0; padding:0; background:#f9f9f9; color:#333; } header{ background:#4a90e2; color:#fff; padding:20px 10%; text-align:center; } main{ max-width:800px; margin:30px auto; padding:0 10%; } h1,h2{ color:#2c3e50; } pre{ background:#ececec; padding:10px; overflow-x:auto; } .example{ border:1px solid #ccc; margin:20px 0; padding:15px; background:#fff; } a{ color:#4a90e2; } </style><header> <h1>Custom Animation: A Practical Overview</h1></header><main> <section> <h2>What is Custom Animation?</h2> <p>Custom animation refers to any visual movement that is created specifically for a project rather than using prepackaged motion. In web development this usually means writing your own CSS <code>@keyframes</code>, using the Web Animations API, or scripting controls with JavaScript libraries such as GSAP, Anime.js, or Three.js. The benefit is full control over timing, easing, interaction, and visual style.</p> </section> <section> <h2>Why Use Custom Animation?</h2> <ul> <li><strong>Brand identity</strong> unique motion can become a recognizable part of a brand.</li> <li><strong>Performance</strong> handcrafted animations can be optimized for the target device.</li> <li><strong>Interaction</strong> animation can respond to scroll, hover, or user input in ways static libraries cannot.</li> <li><strong>Accessibility</strong> you can respect user preferences, reduce motion, or provide alternative cues.</li> </ul> </section> <section> <h2>Fundamental Concepts</h2> <h3>Timing & Easing</h3> <p>Every animation has a duration and an easing curve that determines how speed changes over time. CSS provides <code>linear</code>, <code>ease</code>, <code>easein</code>, <code>easeout</code>, and <code>cubicbezier()</code>. The Web Animations API accepts an <code>easing</code> string with the same options plus <code>steps()</code> for framebyframe control.</p> <h3>Transformations</h3> <p>Transform properties (<code>translate</code>, <code>rotate</code>, <code>scale</code>, <code>skew</code>) are GPUaccelerated when used alone, making them ideal for smooth motion. Stacking transforms in a single <code>transform</code> declaration reduces layout thrashing.</p> <h3>Opacity & Filters</h3> <p>Changing <code>opacity</code> is cheap because it only affects compositing. Filters (blur, brightness, huerotate) are more expensive but can add depth when used sparingly.</p> </section> <section> <h2>CSSOnly Custom Animation</h2> <p>Below is a minimal example that creates a bouncing ball using <code>@keyframes</code>. Because everything is done in CSS, the animation works even when JavaScript is disabled.</p> <div class="example"> <style> .ball{ width:50px; height:50px; background:#e74c3c; border-radius:50%; position:relative; animation: bounce 1.5s ease-in-out infinite; } @keyframes bounce{ 0% { top:0; transform:scaleY(1); } 30% { top:150px; transform:scaleY(0.9); } 50% { top:200px; transform:scaleY(1.1); } 70% { top:150px; transform:scaleY(0.9); } 100% { top:0; transform:scaleY(1); } } </style> <div class="ball"></div> </div> <p>Key points to remember:</p> <ul> <li>Use <code>transform</code> for movement whenever possible.</li> <li>Keep the number of animated properties low.</li> <li>Set <code>animation-fill-mode</code> if you need the element to retain a final state.</li> </ul> </section> <section> <h2>JavaScriptDriven Animation</h2> <p>When interaction is requiredscrolllinked effects, draganddrop, timeline controlJavaScript becomes essential. The Web Animations API (WAAPI) is now supported in all modern browsers and gives you the same declarative power as CSS while allowing runtime changes.</p> <h3>Simple WAAPI Example</h3> <div class="example"> <style> #box{ width:100px; height:100px; background:#27ae60; margin:20px auto; } </style> <div id="box"></div> <script> const box = document.getElementById('box'); const animation = box.animate([ { transform: 'translateX(0px) rotate(0deg)' }, { transform: 'translateX(300px) rotate(360deg)' } ], { duration: 2000, easing: 'cubic-bezier(0.42,0,0.58,1)', // ease-in-out fill: 'forwards', iterations: Infinity, direction: 'alternate' }); // pause on hover box.addEventListener('mouseenter', () => animation.pause()); box.addEventListener('mouseleave', () => animation.play()); </script> </div> <p>Advantages of WAAPI:</p> <ul> <li>Control playback speed, direction, and current time.</li> <li>Combine multiple keyframe effects into a single <code>GroupEffect</code> (future spec).</li> <li>Easier to synchronize with other JS tasks.</li> </ul> </section> <section> <h2>Using Animation Libraries</h2> <p>Libraries abstract repetitive tasks and provide richer timelines. Two popular choices are:</p> <h3>GSAP (GreenSock Animation Platform)</h3> <ul> <li>Highly performant, works across browsers.</li> <li>Timeline object lets you chain multiple tweens with precise offsets.</li> <li>Plugins for SVG, scroll, physics, and more.</li> </ul> <pre><code><script src="https://cdn.jsdelivr.net/npm/gsap@3"></script><script>gsap.from(".card", { y: 100, opacity: 0, stagger: 0.2, duration: 0.8, ease: "power2.out"});</script></code></pre> <h3>Anime.js</h3> <ul> <li>Lightweight and intuitive syntax.</li> <li>Supports CSS, SVG, DOM attributes, and JS objects.</li> </ul> <pre><code>anime({ targets: '.dot', translateX: 250, rotate: '1turn', backgroundColor: '#FF595E', duration: 1500, loop: true, easing: 'easeInOutSine'});</code></pre> <p>Both libraries handle vendor prefixes, requestAnimationFrame throttling, and provide useful callbacks such as <code>onComplete</code> and <code>onUpdate</code>.</p> </section> <section> <h2>Performance Tips</h2> <ol> <li><strong>Animate on the compositor thread</strong> stick to <code>transform</code> and <code>opacity</code>.</li> <li><strong>Limit layoutthreatening properties</strong> avoid animating <code>width</code>, <code>height</code>, <code>top/left</code> unless necessary.</li> <li><strong>Use <code>will-change</code> sparingly</strong> hint the browser but remove it after the animation ends.</li> <li><strong>Group related changes</strong> batch DOM reads/writes to reduce reflows.</li> <li><strong>Respect <code>prefers-reduced-motion</code></strong> provide a fallback or disable nonessential motion for users who request it.</li> </ol> <p>Example of respecting user preference:</p> <pre><code>if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { // Skip nonessential animations document.querySelectorAll('.animated').forEach(el => el.style.animation = 'none');}</code></pre> </section> <section> <h2>Accessibility Considerations</h2> <p>Motion can be disorienting for some users. Follow these practices:</p> <ul> <li>Provide a reduce motion toggle that disables or simplifies animation.</li> <li>Pair visual animation with ARIA live regions if the motion conveys important information.</li> <li>Make sure interactive elements remain focusable and keyboardnavigable during animation.</li> </ul> </section> <section> <h2>Putting It All Together A Mini Project</h2> <p>Imagine a landing page where a headline fades in, an illustration slides up with a slight bounce, and a calltoaction button pulses when it enters the viewport. Below is a concise implementation that mixes CSS for simple fades, WAAPI for the slide, and IntersectionObserver to trigger the pulse.</p> <div class="example"> <style> body{font-family:sans-serif; background:#fff; color:#222;} h1{opacity:0; transition:opacity 1s ease-out;} .illustration{ width:200px;height:200px; background:#3498db; margin:40px auto; } .cta{ display:inline-block; padding:12px 24px; background:#e67e22; color:#fff; text-decoration:none; border-radius:4px; opacity:0; } </style> <h1 id="title">Welcome to Our Site</h1> <div class="illustration" id="illus"></div> <a href="#" class="cta" id="cta">Get Started</a> <script> // Fadein headline window.addEventListener('load', () => { document.getElementById('title').style.opacity = 1; }); // Slideup illustration with bounce const illus = document.getElementById('illus'); illus.animate([ { transform:'translateY(100px)', opacity:0 }, { transform:'translateY(-10px)', opacity:1 }, { transform:'translateY(0)', opacity:1 } ], { duration:1200, easing:'cubic-bezier(0.68, -0.55, 0.27, 1.55)' // bouncelike }); // Pulse button when it becomes visible const cta = document.getElementById('cta'); const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { cta.animate([ { transform:'scale(1)' }, { transform:'scale(1.1)' }, { transform:'scale(1)' } ], { duration:800, iterations:Infinity, easing:'ease-in-out' }); observer.unobserve(entry.target); } }); }, {threshold:0.5}); observer.observe(cta); </script> </div> <p>This snippet demonstrates how a single page can blend declarative CSS, lowlevel JavaScript animation, and modern APIs to deliver a polished experience while keeping the code readable.</p> </section> <section> <h2>Further Reading & Resources</h2> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes">MDN CSS @keyframes</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/animate">MDN Web Animations API</a></li> <li><a href="https://greensock.com/">GreenSock (GSAP) Official Site</a></li> <li><a href="https://animejs.com/">Anime.js Documentation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">MDN prefers-reduced-motion</a></li> </ul> </section></main>