Jump to content
Search Community

mquint

Members
  • Posts

    2
  • Joined

  • Last visited

Posts posted by mquint

  1. Hello!  I have fairly simple animations in a timeline with scroll trigger:

     

      gsap
        .timeline({
          scrollTrigger: {
            trigger: document.getElementById("scene-1"),
            scrub: 0.5,
            start: "top top",
            end: "bottom bottom"
          }
        })
        .addLabel("Scene 1")
        .to(".scene-1-1", { opacity: 0, y: -80, duration: 1 }, "+=2")
        .to(".bg-1-1", { opacity: 0, duration: 1 }, "-=1")
        .to(".scene-1-2", { opacity: 1, y: -40, duration: 1 })
        .to(".scene-1-2", { opacity: 0, y: -80, duration: 1 }, "+=2")
        .to(".bg-1-2", { opacity: 0, duration: 1 }, "<")
        .to(".scene-1-3", { opacity: 1, y: -40, duration: 1 })
        .to(".scene-1-3", { opacity: 0, y: -80, duration: 1 }, "+=2")

    Text blocks fade in and out, and backgrounds fade out to reveal the next background.

     

    Everything works fine when I'm scrolling down the page, but sometimes when I'm scrolling back up (going through the timeline in reverse) the text elements don't always return all the way to opacity 0. (I have the opacity defaulted to 0 in styles).

     

    image.png.da09b061dbaed3fcc7dddbfc1e112a3d.png

     

    Here's a demo version: https://codesandbox.io/s/interesting-volhard-yc6frk?file=/src/animations.js

    Hoping there's something just I missed for scroll trigger settings? 

×
×
  • Create New...