Loops

Overview

Loops was initially intended to replace the Goals feature. For every skill, you could "Loop" on building blocks by recieving learning content on how to improve this skill while reflecting (Checking In) every week. Once a building block is completed, you can move onto the next one and Loop on that building block, and so on...

While this feature has been put on hold, the main UI for Loops relied on a Map that a user traverses to see their progress on the Loop. This feature used more advanced features of GreenSock to bring life to this Map Component.

Notes

Originally written in JavaScript, I rewrote this entirely in TypeScript for my portfolio. Parts of original functionality may have been lost.

Skills

ReactJS
TypeScript
HTML
CSS
Styled Components
Illustrator
GSAP

Demo

Toggle options below to change animation of path on the Loops map.