Можно ли использовать Svelte со ScrollMagi c + GSAP - PullRequest
Новая
       102

Можно ли использовать Svelte со ScrollMagi c + GSAP

0 голосов
/ 05 мая 2020

У меня проблемы с тем, чтобы заставить Svelte работать вместе со ScrollMagi c и GSAP. Я пытался изучить это весь день и до сих пор не могу найти решение. Работает ли он даже со Svelte и есть ли какие-нибудь шаблоны Svelte & ScrollMagi c?

Спасибо.

1 Ответ

2 голосов
/ 05 мая 2020

Я использовал эти инструкции в качестве справки: https://greensock.com/scrollmagic/

Добавьте в ваш svelte проект scrollmagic, gsap и scrollmagic-plugin-gsap: 

yarn add -D scrollmagic gsap scrollmagic-plugin-gsap

Внутри main.js настройте ScrollMagi c для использования 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>

Он также работает в REPL Svelte с использованием импорта CDN: https://svelte.dev/repl/af0b5d29ca624171941be9fe9574c4f3?version=3.22.2

...