GSAP

Greensock Animation Platform (GSAP) is a javascript library that allows you to animate your website. I really like animating the websites that I've built from scratch and GSAP makes it so easy to accomplish! The syntax is really simple which makes no learning curve at all. Other than that, it doesn't take up a lot of space to incorporate these techniques, which makes your web pages 100,000 times faster.

Usually, websites use a mixture of GSAP and three js. GSAP makes animating in three js simple, so you can actually edit 3D stuff. What's great is that three js is essentially an easier webGL, so it makes animating with GSAP really simple!

In the project, you have to npm install gsap (if you have Node.js installed) or you can use the CDN (content delivery network). In sveltekit, you have to put all of your GSAP code in a $effect rune that runs the code when mounted, $effect is displayed once on initial load. If you were to use a regular script tag, it would not work. All of the designs that are animated on this website are mostly from GSAP, but a lot of them are css too. I tend to think that these animations make the website look a lot better than a static website. GSAP is a great tool to use for any web developer. I highly recommend it!

You can install GSAP on any javascript framework you want to use! It works on Vue, React, Svelte, and Angular. GSAP uses integer values to edit the DOM, for the most part.. It's also good for vanilla JavaScript.

It is quite simple to use GSAP. You can use gsap.to("element", { variables }) to animate TO a state. You can use gsap.from("element", { variables }) to animate FROM a state. You can use gsap.fromTo("element", { variables }, { variables }) to animate FROM a state TO another state.

The complete syntax is as follows: gsap.to("element", { variables }). You can use the following variables: duration, delay, ease, stagger, and onComplete. The duration is how long the animation will last. The delay is how long the animation will wait before starting. The ease is the easing function that you want to use. The stagger is how long the animation will wait before starting. The onComplete is the function that will run after the animation is complete.

x, y, z: Control the position of an element along the x, y, and z axes.
rotation: Rotates an element in degrees.
scale: Scales an element uniformly on all axes.
scaleX, scaleY, scaleZ: Scale an element along the x, y, and z axes individually.
opacity: Controls the transparency of an element.
width, height: Animates the width and height of an element.
color, backgroundColor: Changes the color or background color of an element.
borderRadius: Animates the border-radius property of an element.
skewX, skewY: Skews an element along the x and y axes.
rotationX, rotationY, rotationZ: Rotate an element in 3D space along the x, y, and z axes.
duration: Specifies the duration of the animation.
delay: Delays the start of the animation.
repeat: Specifies how many times an animation should repeat.
yoyo: When set to true, makes the animation reverse back to the starting point after completing.
ease: Controls the easing of the animation (e.g: ease: 'power1.inOut').
onStart: Callback function that fires when the animation starts.
onComplete: Callback function that fires when the animation completes.
onUpdate: Callback function that fires on each frame during the animation.
onRepeat: Callback function that fires each time the animation repeats.
paused: If true, the animation starts in a paused state.
stagger: Staggers the start times of animations in an array or NodeList.
scrub: Syncs animations with scroll position (used with ScrollTrigger).
overwrite: Controls how existing tweens are overwritten (auto, none, all).
immediateRender: Renders the tween immediately upon creation.
keyframes: Defines multiple animation states within a single tween.
lazy: Defers rendering to reduce startup performance cost.
id: Assigns a unique identifier to the tween for later reference.
autoAlpha: Combines opacity and visibility (hides an element when opacity reaches 0).
kill: Kills the tween or timeline.
timeScale: Adjusts the speed of the animation.
progress: Sets or gets the progress of the animation.
reverse: Reverses the animation.
seek: Moves the playhead to a specific time or label.
repeatDelay: Sets the delay between repeats.
endTime: Gets the end time of the animation.