cocoesque-animations

Built With

Scroll Driven Animations

Separations of concern

Data attributes to specify timeline and animated elements to keep animation separate from styling.

/* Scroll */
data-scroll-timeline="parent_element"
data-scroll-animate="child_element"

/* View */
data-view-timeline="parent_element"
data-view-animate="child_element"

Polyfill

Provided by flackr

• Navigation bar
• Skills section

Linaria

Scroll Timeline Polyfill

Contentful

GreenSock Animations (GSAP)

React

TypeScript

Vite

Mobile First Design

What's next

• Redo hero button animations

What's in the backlog

• Performance optimizations
• Tests

Extras

• dynamic/animated back to top button
• scroll to top if logo is clicked on homepage
• update rgba to rgb using slash for opacity