Replicating Android Clock
Hello everyone, would it be possible to have some pointers regarding how to begin making something like this in React?
The bottom div containing the times for various locations appears to be moveable. And the content of the div at the top fades relative to the position of the bottom div.
If the bottom div reaches a certain threshold height then it collapses either to the top or to the bottom.
I'm new to frontend and having difficult time figuring out which concepts I should use to begin implementing this.
3 Replies
The simplest option is to use an intersection observer and control the opacity based on the intersection ratio. This is also possible to do in pure CSS using animation timeline, but that is still too new to use in production.
Hi! I think the way to implement this is close to this example: https://codepen.io/supah/pen/jOZezwa
The library used is GSAP, in particular their ScrollTrigger: https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1
ScrollTrigger | GSAP | Docs & Learning
ScrollTrigger enables anyone to create jaw-dropping scroll-based animations with minimal code. Infinitely flexible. Scrub, pin, snap, or just trigger anything scroll-related, even if it has nothing to do with animation.
It's plain JS, so it shouldn't be a problem using react. They even provide a hook to simplify some patterns: https://gsap.com/resources/React/
React & GSAP | GSAP | Docs & Learning
Animate with ease in React - our useGSAP() hook handles all animation cleanup for you.