alena-alyona-gsap.netlify.app
When I started Master JavaScript Animations with Greensock course, I decided to make a small show case out of it. This course consisted of 2 parts: basics of Greensock and scroll animation.
To properly display them I chose to add a navbar. I found this one by codegridweb. Plus point - it's made using GSAP animation. I needed to add some changes, so it works well for my project.
what have been done navbar-wise:
✅ add vue router
✅ create a routing directory & configuration file
✅ replace anchor tags with router-link
✅ add computed property for displaying marquee
✅ add animation to every item of navbar => when user clicks on any item of navbar, navbar closes (before it worked only when user clicked on "menu" and "close")
✅ show list of projects when user clicks on The Basics of Greensock and Scroll Animation
✅ add distinctive style to current selected item
✅ conditionally display Basics and Scroll sections lists
✅ close all lists when user clicks on Home
✅ fix menu-item-img position for anchor tags
✅ fix menu-item-img responsiveness
improvements/additions for course code:
✅ fix Reveal view responsiveness
✅ CSS tweaks
✅ update Home view content with:
✔️ adding github + linkedin links
✔️ showing an img on hover
✔️ adding animation to links on hover
It was pure fun following this course, working on a navbar and Home page. Definitely it was a good start in understanding GSAP library 🚀
npm install
npm run serve
npm run build
npm run lint