gsap split Текст на слайде - PullRequest
Новая
       20

gsap split Текст на слайде

0 голосов
/ 27 января 2020

У меня есть эта часть кода слайда, и я хочу реализовать разделенный текст gsap в h1 (NexText), чтобы результат был следующим: https://codepen.io/GreenSock/pen/aVJRBg

Тем не менее, я не знаю, как реализовать это в моем коде. 

function nextSlide(pageNumber) {
const nextPage = pages[pageNumber];
const currentPage = pages[current];
const nextLeft = nextPage.querySelector(".hero .model-left");
const nextRight = nextPage.querySelector(".hero .model-right");
const currentLeft = currentPage.querySelector(".hero .model-left");
const currentRight = currentPage.querySelector(".hero .model-right");
const nextText = nextPage.querySelector("h1");
const portofolio = document.querySelector(".portofolio");




const tl = new TimelineMax({
  onStart: function() {
    slides.forEach(slide => {
      slide.style.pointerEvents = "none";
    });
  },
  onComplete: function() {
    slides.forEach(slide => {
      slide.style.pointerEvents = "all";
    });
  }
});


tl.fromTo(currentLeft, 0.3, { y: "-10%" }, { y: "-100%" })
  .fromTo(currentRight, 0.3, { y: "10%" }, { y: "100%" }, "-=0.2")
  .to(portofolio, 0.3, { backgroundImage: backgrounds[pageNumber] })
  .fromTo(
    currentPage,
    0.3,
    { opacity: 1, pointerEvents: "all" },
    { opacity: 0, pointerEvents: "none" }
  )
  .fromTo(
    nextPage,
    0.3,
    { opacity: 0, pointerEvents: "none" },
    { opacity: 1, pointerEvents: "all" },
    "-=0.6"
  )
  .fromTo(nextLeft, 0.6, { y: "-100%" }, { y: "-10%" }, "-=0.6")
  .fromTo(nextRight, 0.4, { y: "100%" }, { y: "10%" }, "-=0.8")
  .fromTo(nextText, 0.3, { opacity: 0, y: 0 }, { opacity: 1, y: 0 })
  .set(nextLeft, { clearProps: "all" })
  .set(nextRight, { clearProps: "all" });

current = pageNumber;
}

В частности, я не знаю, как объединить эти две части: 

const nextText = nextPage.querySelector ("h1");

и 

var mySplitText = new SplitText ("# quote", {type: "chars, words, lines"})

1 Ответ

0 голосов
/ 29 января 2020

То, что вы пытаетесь достичь, может быть выполнено с помощью: 

var variableThatStoresMySplit H1= new SplitText (nextText , {type: "chars"})

И затем позже в вашем коде вам придется использовать пошаговый режим для пролистывания массива SplitText, созданного для вас, выполнив: 

gsap.staggerFrom(variableThatStoresMySplit .chars, 0.5, {y:20, opacity:0}, 0.04)

Надеюсь, это решит вашу проблему

...