RESULTS

At the start of the workshop, we started by setting up the frontend tool Vite. This was something new for me where I had to use npm, something I hardly ever use.

This was followed by an explanation of what gsap is and how it can be applied. Stan's example showed several animations. I received the same example from him but without animations. it was up to me to add these animations. On the gsap website, there was an explanation of the parameters. 

Below is part of the code that creates an animation when the mouse hovers over a button.

        import gsap from "gsap";

        import Component from "./../core/Component";

        class Button extends Component {
        constructor(attributes = {}) {
            super(attributes);
            this.initializeTimelines();
            this.initializeEventListeners();
        }

        initializeEventListeners() {
            this.$element.addEventListener("mouseenter", this.handleMouseEnter);
            this.$element.addEventListener("mouseleave", this.handleMouseLeave);
        }

        initializeTimelines() {
            this.initalizeTimelineHover();
        }

        initalizeTimelineHover() {
            gsap.set(this.$refs.background, { scaleY: 0.0 });
            this.timelineHover = gsap.timeline({ paused: true });
            this.timelineHover.to(this.$refs.background, { scaleY: 1.0, duration: 0.5 }, 0.0);
            this.timelineHover.from(this.$refs.arrow, { y:-100, duration: 0.5 }, 0.0);
            this.timelineHover.to(this.$element, { scale: 2.0, duration: 0.5, ease: "back.out(2.0)" }, 0.0);
        }

        handleMouseEnter = () => {
            this.timelineHover.play();
        };

        handleMouseLeave = () => {
            this.timelineHover.reverse();
        };
        }

        export default Button;