In-view Text Animation

It’s a really popular trend in 2020 web design to have text animate in when the user scrolls to where the texts should be. I have seen this done on various sites in various different ways. I like systems, so here’s a system that I think will deliver the desired results.

Instructions

First, build a basic in-view . This will notify the browser when a given element is within the scroll view. 

const inView = (element, callback, options = { rootMargin: '0px 0px 0px 0px' }) => {
  if (window.IntersectionObserver) {
    const intersectionObserver = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        callback(entry.target, entry.isIntersecting);
      });
    }, options);

    intersectionObserver.observe(element);
  } else {
    callback(element, true);
  }
};

Then, set up some way to change the element’s scope when the observer triggers. 

const inViewOutOfView = (element, isInView) => {
  element.setAttribute('in-view', isInView);
};

Now, attach the observer function to your desired elements. I chose headings and paragraphs, as you can see. 

const querySelector = 'h1, h2, h3, h4, h5, h6, p';
Array.from(document.querySelectorAll(querySelector)).forEach((element) => {
  inView(element, inViewOutOfView, {
    rootMargin: '-70px 0px -20px 0px',
  });
});

Finally, configure your in-view/out-of-view style changes. And you're good to go. 

h1, h2, h3, h4, h5, h6, p {
  transition: opacity 300ms ease, transform 300ms ease;

  &[in-view=false],
  &:not([in-view]) {
    transform: translateY(1em) rotateX(-90deg);
    opacity: 0;
  }
}

The test

Scroll up and down here, to see the behavior.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut commodo velit. Cras enim dui, luctus facilisis laoreet a, auctor vitae nulla. Nunc et neque laoreet, euismod turpis a, viverra ipsum. Etiam laoreet aliquet tortor quis pretium. Etiam volutpat justo eget eros laoreet ultricies.

Donec tincidunt eros eu tristique gravida. Nullam aliquam elit a lacinia aliquam. Integer quis est vel nisl auctor hendrerit vitae sit amet magna. In rhoncus tellus nec congue venenatis. Nam vitae massa eget mi eleifend viverra vitae quis tellus. Cras venenatis nec justo a rutrum.

Sed vestibulum nisl et odio pretium, in dictum libero fringilla.

Sed facilisis venenatis metus, vitae efficitur lectus dignissim a.

In tincidunt lacinia mi, eget fringilla ante hendrerit in.

Nam viverra mi sit amet arcu interdum, quis suscipit ex commodo.

Duis quis odio id felis venenatis commodo.

Cras sollicitudin, quam non laoreet euismod, risus elit tincidunt nulla, vel ullamcorper neque nibh vel leo.

Sed dignissim tincidunt magna sed vestibulum.

Curabitur eget leo porta, vehicula tellus non, imperdiet arcu.

Vivamus quis dolor congue magna consequat vulputate.

Aenean scelerisque massa dignissim, egestas dui eu, maximus felis.

Aliquam aliquet felis sed nibh porta gravida.

Nunc eget erat a erat mattis consectetur.

Cras id sollicitudin ligula.

Vestibulum facilisis finibus sapien, sed eleifend elit accumsan quis.

Cras commodo congue tellus nec interdum.

Sed laoreet erat in tellus posuere semper.

Quisque vitae commodo nisi, a aliquam sem.

Suspendisse leo neque, fermentum vel suscipit vitae, suscipit ac leo.

Duis tincidunt eget odio quis mollis.

Aenean eget magna consequat leo sollicitudin sodales.

Sed semper egestas lobortis.

Aliquam tincidunt, ex ac porttitor eleifend, metus dolor volutpat elit, eget rutrum nibh justo eu lectus. Cras pharetra laoreet faucibus. Maecenas et auctor mauris, at blandit enim. Integer ut enim rutrum, tristique quam id, placerat augue. Ut ac facilisis lacus.

Nulla aliquam arcu et ultricies porttitor.

Maecenas nec elementum dui, ac rutrum sapien.

Integer ac cursus dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi id nisl sed nulla aliquet posuere a id leo. Proin nec lacus in ligula aliquet varius. Fusce quis sodales odio. Pellentesque suscipit facilisis egestas.

Integer auctor mollis justo, in volutpat tortor interdum non. Maecenas sit amet nunc tempus, venenatis sem vestibulum, mattis ex. Mauris tristique erat sem, ac pulvinar metus tempor ut. Nunc nec ullamcorper sem. Sed laoreet tellus id odio interdum, ut egestas velit vulputate. Sed facilisis nunc sed risus euismod sollicitudin. Ut maximus sit amet diam in venenatis. Proin non urna eu mauris consequat laoreet. Mauris ac vulputate justo.

Pellentesque pretium, sapien eget gravida accumsan, tortor neque rutrum augue, ut dapibus massa nunc iaculis ligula. Cras feugiat, tortor eu tincidunt sollicitudin, eros turpis dapibus turpis, ut finibus nisl erat vel leo. Fusce fermentum, tellus non posuere pretium, felis nulla congue mi, non eleifend arcu velit vel metus.

Nunc dui orci, facilisis in nisi in, semper hendrerit ligula. Aenean in leo in velit placerat dignissim sed non turpis. Sed lobortis justo lectus, condimentum auctor lorem feugiat sit amet. Aliquam nec lorem viverra, fermentum orci at, condimentum ante. Cras pretium enim ut lorem varius aliquet.

Conclusion

Really popular web design trends don’t have to be complicated. I hope this was helpful, and maybe you learned a trick or two.