Documentation Shento Hendriks
Svelte / SvelteKit
Svelte / SvelteKit
  • Getting Started with SvelteKit
    • Installing SvelteKit
      • Tailwind Typography plugin
    • Base Syntax & Core Features of Svelte
      • Curly Braces & Understanding Core Syntax
      • Reactive Variables
      • Two-way-binding Shortcut
      • Using multiple components
      • Components & Communication via Props
      • Display HTML in Svelte
      • Dynamic classes
      • Using $effect
      • Working with Javascript and Rune reactivity
    • Working with Conditionals & Loops
      • Showing code conditionally in Svelte
      • Looping through arrays (lists)
      • Lists & Keys
    • Closer look at reactivity
      • Updating Arrays & Objects
      • Event Modifiers
    • Component Events
    • Best Practices
    • Adding Google Font in Tailwind and SvelteKit
    • Adding Local Fonts to SvelteKit with Tailwind
    • Prevent flicker in images
    • Enhanced Images
    • Form Submissions in SvelteKit
    • Effective SEO in SvelteKit
    • Automatic Site Maps in Svelte
    • Creating Custom Elements with Svelte, SvelteKit, and Vite
    • Creating a Svelte Library with JavaScript Functions
  • Useful Code Snippets
    • Hover effects
    • Navigation
    • Centering Items
    • Setting Footer Bottom Page
  • Installing Useful Libraries
    • Documenting Javascript with JSDocs (Crash Course)
    • Adding Lottie Animations to Svelte Application
    • SvelteKit Melt-ui
      • First Component - accordion
    • Installing Shadcn/ui Svelte
    • Getting Started with GSAP with SvelteKit
      • What is GSAP?
      • Installing GSAP & Your first animation
      • GSAP in SvelteKit
    • Installing Locomotive Scroll with Svelte 5 and SvelteKit
  • SvelteKit Server Fetching and Deployment
    • Preparing a SvelteKit application for Deployment
    • Utility Functions for URL Handling in SvelteKit
    • Fetching Directus Data from Rest API with SvelteKit
    • Fetching data from api with caching
    • Displaying Fetched Data in a Each Loop
    • Creating slug friendly urls based on query data
    • Finding correct query in api based on url slug
Powered by GitBook
On this page
  • What is GSAP?
  • Why use GSAP instead of normal animations?
  1. Installing Useful Libraries
  2. Getting Started with GSAP with SvelteKit

What is GSAP?

What is GSAP?

GSAP stands for GreenSock Animation Platform. It is a JavaScript library that allows you to create high-performance animations for the web. GSAP is widely used by developers to create animations that are smooth, fast, and work across all browsers.

Why use GSAP instead of normal animations?

GSAP provides a number of benefits over traditional CSS animations. Some of the key advantages of using GSAP include:

  • Better performance: GSAP animations are faster and smoother than CSS animations.

  • Cross-browser compatibility: GSAP animations work across all browsers, including older versions of Internet Explorer.

  • More control: GSAP gives you fine-grained control over your animations, allowing you to create complex effects with ease.

  • Rich features: GSAP comes with a wide range of features and plugins that make it easy to create stunning animations.

PreviousGetting Started with GSAP with SvelteKitNextInstalling GSAP & Your first animation

Last updated 9 months ago