Первый элемент временной шкалы GSAP не анимируется - PullRequest
Новая
       9

Первый элемент временной шкалы GSAP не анимируется

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

Я бы хотел анимацию массива элементов DOM с GSAP 3 в приложении React с абсолютным временем 0 секунд. Я динамически добавляю элементы из элемента refs. Однако первый элемент, кажется, «прыгает» прямо на {x:100}, в то время как следующие элементы правильно корректируются. Есть указатели? 

export const EditorCanvas = (props) => {
  const [{ shapes, stage }, dispatch] = useContext(CanvasContext);
  const layerRef = useRef(null)
  const content = useRef(null)


  const [toggle, setToggle] = useState(false);
  const [tl] = useState(new TimelineLite({paused: true}));


  const elementsRef = shapes.map(() => createRef());

  useEffect(() => {
      tl
      .add(shapes.map((shape, idx) => tl.to(elementsRef[idx].current,{ x: 100}, 0)))
   }, [shapes])

  return (
    <div className="editor-canvas">
      <button className="btn btn-info" onClick={() => tl.play()}>Play</button> 
      <div ref={content} className="stage">
      {
        shapes.map((shape, idx )=> (
          renderElement(shape, dispatch, stage, elementsRef[idx], idx)    
        ))
      }  
      </div>
    </div>
  );
}
...