Kevin Powell - Community•8mo ago

Animate pages

Hi guys, I want pages to animate when you come to this part of the page. For example container 1 insert from the right when you are on this part of the page. Anybody who can help me with that. https://codepen.io/Boeroe/pen/GRzQrKJ

Boeroe

CodePen

GRzQrKJ

...

2 Replies

MarkBoots•8mo ago

you have to look at intersection observer. ref: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API here a simple implementation

//create an observer. every entry that is added will be checked if it is intersecting the viewport.
//the data-attribute 'inview' will be set to true|false
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry=>{
    entry.target.dataset.inview = entry.isIntersecting // [true | false]
  })
}, {});

//select all the items that will be added to the observer
const sections = document.querySelectorAll('section');
sections.forEach(section => observer.observe(section))

//create an observer. every entry that is added will be checked if it is intersecting the viewport.
//the data-attribute 'inview' will be set to true|false
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry=>{
    entry.target.dataset.inview = entry.isIntersecting // [true | false]
  })
}, {});

//select all the items that will be added to the observer
const sections = document.querySelectorAll('section');
sections.forEach(section => observer.observe(section))

then, in css you can style the sections based on the [data-inview=false] atrribute. if it is not in view, the section is translated of the screen. otherwise it will transition to it's original position

.section {
  transition: translate 5s linear;
}
.section:not([data-inview="true"]){
  translate: 100vw;
}

.section {
  transition: translate 5s linear;
}
.section:not([data-inview="true"]){
  translate: 100vw;
}

MDN Web Docs

Intersection Observer API - Web APIs | MDN

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Boeroe•8mo ago

Will look into this this weekend thanks

Gaming

Programming

Animate pages