ScrollTrigger section glitch

[SB0912]

on page refresh, the scroll animation seems to glitch out and the image I am revealing behind the "doors" will just scroll into view before the doors can animate, then they will snap to the opening animation after. It fixes itself after scrolling up and down a few times but Im not sure why it is glitching on page refresh. Any help would be appreciated!

See the Pen mdzrYaY by Slater-Bernstein (@Slater-Bernstein) on CodePen

[elegantseagulls]

Your fromTo needs more information, but it looks to me like you can just use a to animation for this. Example:

 

gsap.to(
  ".right-door",
  {
    opacity: 0.85,
    scrollTrigger: {
      trigger: ".right-door",
      scrub: true,
      start: "top top"
    },
    xPercent: -50
  }
);