wrong direction

[trazetJet]

I welcome everyone! Tell me, why does animation without scrolltrigger work from left to right, and with it - on the contrary? I need that animation of emerging panels with months always starts from left to right

See the Pen OJBKajZ by sdghd (@sdghd) on CodePen.

[Rodrigo]

Hi,

 

The problem here is that you're adding your ScrollTrigger configuration to an animation in a timeline. A timeline basically controls the position of a tween's playhead. ScrollTrigger does the same based on the scroll position. So who has control of that particular tween, the timeline or the ScrollTrigger instance? They're both fighting for controlling the tween which causes this result.

 

In this cases just add the ScrollTrigger configuration to the timeline. This seems to work the way you intend:

gsap.registerPlugin(ScrollTrigger);
const tl = gsap.timeline({
  scrollTrigger: {
        trigger: ".split",
        start: "top 15%",
        end: "bottom bottom",
        scrub: 3.5
      }
});
gsap.utils.toArray(".split rect").forEach((panel) => {
  const axisY = panel.getAttribute("y");
  const string = parseInt(axisY);
  tl.fromTo(
    panel,
    {
      height: 52,
      stagger: {
        each: 0.3
      },
      attr: {
        y: `${string + 208}`
      }
    },
    {
      height: 260,
      stagger: {
        each: 0.3
      },
      attr: {
        y: `${axisY}`
      },
      duration: 0.4,
    }
  );
});

 

Hopefully this helps.

Happy Tweening!

 

[trazetJet]

I will take into account for the future, thank you