Свойство «y» не работает при использовании GSAP в React ⇐ Javascript

[Гость]

Я пытаюсь реализовать горизонтальную прокрутку с помощью GSAP, и когда она срабатывает, я хочу, чтобы некоторые теги (которые в кодах являются .anim) перемещались вниз. Для этого я использовал y: -130 в GSAP, но он не работает. Но другие свойства, которые я использовал, такие как непрозрачность и продолжительность, работают хорошо. Можете ли вы сообщить мне причину, по которой не работает только y: -130??

Если вы видите CodeSandBox, вы можете проверить изменения непрозрачности, но не можете

Родительский компонент

import React, { useEffect, useRef } из «реагировать»; import { Wrap } из "./styles"; импортировать один из «../comComponents/one/One»; импортировать два из «../comComponents/two/Two»; импортировать три из «../components/three/Three»; импортировать { gsap, ScrollTrigger } из "gsap/all"; gsap.registerPlugin(ScrollTrigger); константная страница = () => { const WrapRef = useRef (нуль); const oneRef = useRef(null); const twoRef = useRef(null); const ThreeRef = useRef (нуль); useEffect(() => { const разделы = gsap.utils.toArray([ одинRef.current, дваRef.current, триОпорный ток ]); const маска = document.querySelector(".mask"); пусть ctx = gsap.context(() => { пусть прокруткаTween = gsap.to(sections, { xPercent: -105 * (длина разделов - 1), легкость: «нет», прокруткаTrigger: { триггер: ".container", булавка: правда, скраб: 1, конец: "+=3000" } }); // вот проблемная часть sections.forEach((section) => { let text =section.querySelectorAll(".anim"); gsap.from(текст, { у: -130, непрозрачность: 0, продолжительность: 2, легкость: «эластичная», шатание: 0,1, прокруткаTrigger: { триггер: раздел, контейнерАнимация: прокруткаTween, начало: "левый центр", маркеры: правда } }); }); }); return () => ctx.revert(); }, []); возвращаться ( ); }; экспортировать страницу по умолчанию; Дочерний компонент
.anim — цель, которую я хочу анимировать. и я использовал const text в родительском компоненте, чтобы использовать .anim

import React, { frontRef } из «реагировать»; import { Wrap } из "./styles"; const Two = frontRef((props, ref) => { возвращаться ( Два 2 ); }); экспортировать по умолчанию Два; CodeSandBox
https://codesandbox.io/s/react-horizont ... e/Page.jsx