Awwwards SOTD: Spotify Astrology Club Loader Rebuild

site profile thumbnail

Description

YouTube Tutorial: https://youtu.be/rJBtgFsAtVQ Let's rebuild the loading animation from the Awwwards Site of the Day (SOTD) for Oct 13, 2022 - Spotify Astrology Club. This build will advance your knowledge of more challenging concepts like: Clip path for a solid circle fill. Element stacking context (when we can't use z-index). Relationship between absolute position and height and how it affects animation direction. Complex, long, and chained GSAP timelines. Passing function-based values to GSAP properties we will animate. Forcing one animation (loading time) to last the same duration as a second, parallel animation. Animating a counter with GSAP's snap property
gsapspotifyclippathloaderpreloaderanimationawwwards

More by Web Bae

See profile