Svelte 可以与 ScrollMagic + GSAP 一起使用吗

Question

我在让 Svelte 与 ScrollMagic 和 GSAP 一起工作时遇到了问题。我试了一整天都在研究它，但仍然找不到解决方案。它甚至可以与 Svelte 一起使用吗？那里有任何 Svelte 和 ScrollMagic 模板吗？

谢谢。

Answer 1

我将这些说明用作参考：https://greensock.com/scrollmagic/

在您的 svelte 项目中添加 scrollmagic、gsap 和 scrollmagic-plugin-gsap:

yarn add -D scrollmagic gsap scrollmagic-plugin-gsap

在 main.js 中，配置 ScrollMagic 以使用 GSAP：

import ScrollMagic from 'scrollmagic'
import gsap from 'gsap'
import { ScrollMagicPluginGsap } from 'scrollmagic-plugin-gsap'

ScrollMagicPluginGsap(ScrollMagic, gsap)

然后在您的 Svelte 组件中，您可以定义控制器、时间轴和屏幕：

<!--- App.svelte -->
<!-- Copied from example here: https://greensock.com/scrollmagic/ -->
<script>
  import ScrollMagic from 'scrollmagic'
  import { TimelineMax } from 'gsap'
  import { onMount } from 'svelte'

  // define a controller and timeline
  const controller = new ScrollMagic.Controller()
  const tl = new TimelineMax()

  // after component mounts, setup scene
  onMount(() => {
    // configure timeline
    tl.staggerFrom(".box", 1.5, {
      scale: 0,
      cycle: {
        y: [-50, 50]
      },
      stagger: {
        from: "center",
        amount: 0.75
      }
    })

    // define the scene
    const scene = new ScrollMagic.Scene({
      triggerElement: "#stage",
      duration: "50%",
      triggerHook: 0.35
    })

    scene.setTween(tl)
    scene.addTo(controller)
  })
</script>


<div class="spacer">
  <h1>This section is just a spacer</h1>
</div>

<div id="stage">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
  <div class="box box6">6</div>
</div>

<div class="spacer">
  <h1>This section is just a spacer</h1>
</div>

<style>
  :global(body) {
    color: #ccc;
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
  }

  h1 {
    color:white;
    margin: 0;
  }

  #stage{
    height:100vh;
    width: 100%;
    background: #262626;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .spacer{
    width:100%;
    height:100vh;
    background:#5386b2;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box {
    height: 60px;
    width: 60px;
    align-items: center;
    margin: 4px;
    font-size: 1.2em;
    font-weight: 700;
    color: white;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

  }

  .box1 {
    background-color: #84c186;
  }

  .box2 {
    background-color: #8b6c4c;
  }

  .box3 {
    background-color: #39a3ee;
  }

  .box4 {
    background-color: #ef9144;
  }

  .box5 {
    background-color: #cd58eb;
  }

  .box6 {
    background-color: #b84b4b;
  }
</style>

它也适用于使用 CDN 导入的 Svelte 的 REPL：https://svelte.dev/repl/af0b5d29ca624171941be9fe9574c4f3?version=3.22.2

Svelte 可以与 ScrollMagic + GSAP 一起使用吗

Can Svelte be used with ScrollMagic + GSAP

scrollmagic

gsap

svelte