Как в библиотеке GSAP совместить плагины MotionPath и ScrollTrigger?

Question

[Влад]

Привет, коллеги.

Задача: сделать так, чтобы объект начинал движение как только достигает bottom вьюпорта и заканчивал при достижении top вьюпорта. Анимация не просто запускается, а координаты перемещаемого по дорожке объекта находятся в прямой зависимости от, нативным языком выражаясь, значения выражения document.documentElement.clientHeight - Math.round(parseInt(selector.getBoundingClientRect().top).

Что-то не могу найти простого вменяемого видео, объясняющего принцип описания зависимости MotionPath от ScrollTrigger в библиотеке GSAP, ни на русском ни на английском языках.

MotionPathPlugin
Codepen

Answer 1

[RAX7]

На странице плагина ScrollTrigger есть куча примеров, которые должны помочь разобраться.

Comments

[Влад]

oops, не заметил ваш ответ, вчера вечером сам разобрался ))
Там действительно проще паренной репы ))

[Влад]

Хотел сейчас во время скролла наверх перевернуть перемещаемый объект в горизонтальной плоскости, у меня не получилось. В общем вот мой код целиком:

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";

gsap.registerPlugin(ScrollTrigger);
gsap.registerPlugin(MotionPathPlugin);

const myPath = document.querySelector(".flying-obj__path");
const dove = document.querySelector(".flying-obj__dove");

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: dove,
    start: "top 50%",
    end: "top",
    scrub: 1,
  },
});

tl.to(dove, {
  duration: 5,
  opacity: 0.5,
  motionPath: {
    path: myPath,
    align: myPath,
    alignOrigin: [0.5, 0.5],
    // autoRotate: true,
  },
}).to(dove, {
  duration: 3,
  opacity: 0,
  y: "-100px"
});

let lastScrollTop = 0;
window.addEventListener("scroll",  () => {
   let st = window.pageYOffset || document.documentElement.scrollTop;
   if (st > lastScrollTop){
      console.log('downscroll');
      dove.style.transform = "scaleX(1)";
   } else {
      console.log('upscroll');
      dove.style.transform = "scaleX(-1)";
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

Как это делается правильно?

[RAX7]

Влад, Можно на событие onUpdate повесить обработчик события, который будет отвечать за переворот элемента:

scrollTrigger: {
  onUpdate({ direction }) {
    if (direction === 1) {
      gsap.set("#rect-inner", { scaleX: 1, transformOrigin: "50% 50%" });
      console.log('forward ⬇');
    }
    else {
      gsap.set("#rect-inner", { scaleX: -1, transformOrigin: "50% 50%" });
      console.log('backward ⬆');
    }
  }
}

Также, сам элемент нужно завернуть в дополнительную обертку и крутить/скэйлить эту обертку, иначе MotionPathPlugin будет перебивать все стили на элементе.
Поправил демку в ответе.