I am in the process of rebuilding a GSAP website into a Vue.js project.
I am in the very early stages of learning Vue, here is a good, free, video series and here is a very good (but it cost 10 dollars) Udemy course.
My hope for this thread is to build out a full GSAP & Vue App. I will break out each component as I go and place it in a codepen (I have quite a few things done already, it will take me some time to go back and break things out). This will be a work in progress and the codepens will be updated in phases:
Phase 1: will be to get just get things wired the Vue way.
Phase 2: will be to use GSAP for the animations and transitions etc.
Phase 3: Build everything as dynamic/reusable components. If all goes well this will turn into a Vue/GSAP component library of sorts for everyone to reference.
Blake, one of the GreenSock Moderators, has graciously offered to help guide me (Thank you Blake).
Goals for the thread/project:
Navigation Button Component
Section Content Component
Section Hero Image Component
Section Thumbnail/Modal Button Component
Password Modal Component
Vertical Slideshow Component (I will also to help others build out a Horizontal Version).
Slide-up Tab Component
Radial Button/Checkbox Form
Filtering based on a sector/classname (with persistence via local storage or a Vue method, if it exists - learning as I go )
All of the above is built in a non-Vue way here http://hainis.net/dev/
Note: that only the print/advil, print/amex, print/bayer slideshow content is sorted, all the other thumbnails will load a blank modal.
Side note: I'm learning, not there yet, to do things a DRY way; hopefully under Blake's guidance I will finally get this under control and tighten up the spaghetti code that I currently have.
Okay, so that's the setup. Next post will be some useful links and a current state/NOT simplified codepen of the current Vue app.