HomeMotion & Animation
Preview
js
Code
js
// Intersection Observer ile scroll reveal
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('revealed');
        observer.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
);

document.querySelectorAll('.reveal').forEach(el => {
  observer.observe(el);
});

/* CSS */
/* .reveal { opacity: 0; transform: translateY(24px); transition: all 0.6s cubic-bezier(0.16,1,0.3,1); }
   .reveal.revealed { opacity: 1; transform: none; } */
Related Blocks
js
Page Transition
View Transition API for page transitions.
css
Easing Functions
Bezier values for ease-in, ease-out, and spring.
css
Fade In/Out
Opacity transition animations with stagger.