From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
Recently we’ve stumbled upon a really nice effect on Akademi’s website: the main title of the page moves along as one scrolls down and changes depending on the section that is currently in the viewport. We thought this would be an awesome effect to recreate and play with different animations for the text as it changes. For detecting when a certain section is entered, we use the Intersection Observer API. Note that the API is currently not supported in Safari.
The animations are powered by anime anime.js. We also use imagesLoaded for preloading the images and Charming.js for the handling the letter structure of the titles.
The demo is kindly sponsored by monday.com: The visual project management tool built for designers.
If you would like to sponsor one of our demos, find out more here.
For the demos, we’ve created a layout that starts with some intro text and another text element that will scroll along. Once that element reaches the next section, it will switch to a new title.
In the first demo shuffles the letters in a sequencial way and the second one shows some random characters.
We hope you enjoy the demos and find them inspirational.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
References and Credits
- Hand-drawn skull set by Freepik
- Images made from the “Flight” Collection copyright by RuleByArt
- Images by Unsplash.com
- anime.js by Julian Garnier
- imagesLoaded by Dave DeSandro
- Charming.js by Yuan Qing
Hello thank’s Intersection Observer is a great api to make some wonderfull pages
Thanks a lot for this tutorial!!!!! What about using a polyfill like this one: https://github.com/w3c/IntersectionObserver/tree/master/polyfill for unsupported browsers?
Note that IntersectionObserver is easily polyfillable and thus usable in Safari through the excellent polyfill.io: https://polyfill.io/v2/docs/features/
Nice stuff! I love the animation in the demo. Adding this to our next project!