Как сделать анимацию при скроллинге GSAP?

Question

[bxspb]

Помогите разобраться с анимацией GSAP в ScrollMagic. Раньше делала подобные штуки (анимацию при скроле) в uikit 3 в компоненте параллакса, но повелась на наличие сиквентора изображений в "Носке".
Вообщем суть таймлайна: пин на 2м экране (sticky), минус скейл на див в нем, от следующего тригера matrix perspective c уходом дива в правый оверфлоу. Все изобразила на ГИФке. Так вот, либо перспектива не запускается после второго тригера, либо pin не срабатывает, сначала думала со второго тригера менять класс с transform, но если в первом триггере скейлить то тоже не заработает, примерно что-то такое наковырялось, но как-то не але:

var scene = new ScrollMagic.Scene({triggerElement: "#pinFirst",
  duration: "100%"})
	.setPin("#primary",1)
	.addIndicators({name: "3 (duration: 0)"}) 
	.addTo(controller);
	

var scene = new ScrollMagic.Scene({triggerElement: "#second", duration: 300})
	.setTween("#second", 2, {scaleX:0.9,scaleY:0.9})
	.setPin("#primary")
	.addIndicators({name: "1"}) 
	.addTo(controller);

var scene = new ScrollMagic.Scene({triggerElement: "#second", duration: 300})
	.setClassToggle("#primary", "matrix-right")
	.setTween("#primary", 2, {transformStyle:"preserve-3d",rotationY: 30})
	.addIndicators({name: "2 (duration: 300)"}) 
	.addTo(controller);

Comments

[RAX7]

Чтобы работала перспектива нужно родительскому блоку задать например: perspective: 1000px; либо у трансформируемого блока добавить ёё transform: perspective(1000px) rotateX(30deg);
Сделай пример в песочнице (https://jsfiddle.net/ https://codepen.io/pen), так будет проще тебе помочь

[bxspb]

RAX7, спасибо, частично было дело в этом. Пишите в ответе

Answer 1

[RAX7]

Чтобы работала перспектива нужно родительскому блоку задать например: perspective: 1000px; либо у трансформируемого блока добавить ёё transform: perspective(1000px) rotateX(30deg);
https://html5book.ru/3d-transform/