DEV Community

namdo
namdo

Posted on

Animation with GSAP 3

💡 #svelte, #svelte-boilerplate, #smelte, #gsap3, #webpack, #tailwindcss
Enter fullscreen mode Exit fullscreen mode

💡 GSAP 3 Docs

Let's do it.

>_ yarn add gsap
Enter fullscreen mode Exit fullscreen mode
  • Update src/App/index.svelte
<script>
    import Layout from '@Components/Layout';
    import { gsap } from "gsap";
</script>
Enter fullscreen mode Exit fullscreen mode
<style src="./style.scss">

</style>
Enter fullscreen mode Exit fullscreen mode
<Layout>
    <div class="container xl mx-auto">
        <div class="flex h-screen justify-center">
            <div class="mx-auto p-3" 
              use:gsap.from={ { duration: 3, opacity: 0, scale: 0.9 } }
            >
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </div>
</Layout>
Enter fullscreen mode Exit fullscreen mode

Let's enjoyed

>_ yarn start:dev
Enter fullscreen mode Exit fullscreen mode

Top comments (0)