Looking for assistance with ScrollTrigger - complex animation

[Noah_E]

Hi all.

 

I have been tasked my by company to revamp our site. We have designs and a concept for a single-page site that makes use of animations tied to scroll progress.

 

GSAP and Scrolltrigger has been amazing for this so far. At this point I have the full animation orchestrated from the top to the bottom of the page. Scrolling at a reasonable speed results in the desired effect. However scrolling too quickly or jumping to certain points on the page results in elements ending up in places where they shouldn't be.

 

The animation is quite a complex one when all put together. It involves the same elements being animated multiple times, as they move around the page while scrolling. I've divided the single-page into various sections, and have a separate timeline that handles each section. I'm unable to share a full codepen as I'm not allowed to share certain information such as our assets, but I have included code below that I hope adequately shows my approach.

 

I've tried various solutions suggested already on this forum, including: setting "immediateRender" and "overwrite", using only fromTo's, relative vs absolute values.

I think that my mistake lies in my approach to the task, I believe I'm not employing the optimal practices in order to complete a complex animation of this nature.

 

useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    planetFloat();

    landingPhase();

    discoverPhase();

    discussPhase();

    decidePhase();
  }, []);

export const landingPhase = () => {
  gsap
    .timeline({
      scrollTrigger: {
        trigger: ".scroll-trigger",
        start: "10% bottom",
        end: "+=2000",
        scrub: 0.25,
      },
    })
    // Move landing text off screen
    .to(".landing-text", {
      opacity: "-=1",
      x: "+=300",
    })
    // Bring greatness text onto screen
    .fromTo(
      ".greatness-text",
      { autoAlpha: 0, x: -300 },
      {
        autoAlpha: 1,
        x: 0,
      },
      ">-50%"
    )
    // Scale up discover system
    .fromTo(
      ".discover-system",
      { opacity: 0, scale: 0 },
      {
        opacity: 1,
        scale: 1,
      },
      // ">-60%"
      "<"
    )
    // Telescope ledge rises into view
    .fromTo(
      ".telescope",
      { y: 350 },
      {
        y: 0,
      },
      // ">-60%"
      "<"
    )
    // Greatness text descends below telescope ledge
    .to(
      ".greatness-text",
      {
        opacity: "-=1",
        y: "+=550",
      },
      ">100%"
    )
    // Journey text descends into view
    .fromTo(
      ".journey-text",
      { y: -550, autoAlpha: 0 },
      {
        y: 0,
        autoAlpha: 1,
      },
      ">-70%"
    )
    // Beginning of system rearrange -->
    .to(
      "#moon-container",
      { x: "-=50", y: "-=100", scale: "-=0.7", overwrite: true },
      ">100%"
    )
    .to(
      "#galaxy-swirl-container",
      { x: "-=400", y: "+=50", rotate: 7, scale: "+=0.4", overwrite: true },
      "<"
    )
    .fromTo("#sun-container", { scale: 0 }, { scale: 0.3 }, "<")
    .to(
      "#ringed-planet-container",
      { x: "-=500", y: "+=100", overwrite: true },
      "<"
    )
    .fromTo("#red-planet-container", { scale: 0 }, { scale: 1 }, "<")
    .fromTo("#darkBlue-planet-container", { scale: 0 }, { scale: 1 }, "<")
    .to(
      "#lightBlue-planet-container",
      { x: "-=160", y: "+=240", scale: "+=0.5", overwrite: true },
      "<"
    )
    .to(
      "#dark-planet-container",
      { x: "+=50", y: "-=150", scale: "-=0.5", overwrite: true },
      "<"
    )
    .to(
      "#turquoise-planet-container",
      { x: "-=260", y: "+=60", scale: "+=1.5", overwrite: true },
      "<"
    )
    // <-- Ending of system rearrange
    // Telescope ledge zooms out of view
    .to(
      ".telescope",
      {
        y: "+=500",
        x: "-=800",
      },
      "<"
    )
    // Journey text zooms out of view
    .fromTo(
      ".journey-text",
      {
        y: 0,
        x: 0,
      },
      {
        y: 500,
        x: -800,
      },
      "<"
    );
};

export const discoverPhase = () => {
  gsap
    .timeline({
      scrollTrigger: {
        trigger: ".scroll-trigger",
        start: "25% bottom",
        end: "+=2000",
        scrub: 0.25,
      },
    })
    // Phase 1 text moves in from the right
    .fromTo(".phase1-text", { x: 1500 }, { x: 1200 }, "")
    // Discover text fades in
    .fromTo(
      ".discover-text",
      { autoAlpha: 0, scale: 2.5 },
      { autoAlpha: 1, scale: 2.5 },
      "<"
    )
    // Phase 1 text moves over the screen
    .to(".phase1-text", { x: "-=135%" }, ">100%")
    // Beginning of system rearrange -->
    .to(
      "#galaxy-swirl-container",
      { rotate: -15, x: "+=300", scale: "-=0.4", overwrite: true },
      ">-50%"
    )
    .to(
      "#sun-container",
      { x: "+=250", y: "+=25", scale: "-=0.05", overwrite: true },
      "<"
    )
    .to("#moon-container", { x: "+=250", overwrite: true }, "<")
    .to(
      "#lightBlue-planet-container",
      { x: "+=200", y: "-=50", scale: "-=0.5", overwrite: true },
      "<"
    )
    .to(
      "#dark-planet-container",
      { x: "+=200", y: "+=25", scale: "-=0.1", overwrite: true },
      "<"
    )
    .to(
      "#turquoise-planet-container",
      {
        x: "+=200",
        y: "-=75",
        scale: "-=0.5",
        overwrite: true,
      },
      "<"
    )
    .to(
      "#red-planet-container",
      { x: "+=400", y: "+=50", overwrite: true },
      "<"
    )
    .to(
      "#darkBlue-planet-container",
      { x: "+=400", y: "+=50", overwrite: true },
      "<"
    )
    .to(
      "#ringed-planet-container",
      { x: "+=450", scale: "-=0.2", overwrite: true },
      "<"
    )
    // <-- Ending of system rearrange
    // Discover text moves away with system
    .to(
      ".discover-text",
      { rotate: -25, x: "+=450", scale: "-=0.6", opacity: "-=1" },
      "<"
    )
    // Curiosity header text slides in
    .fromTo(
      ".curiosity-header-text",
      {
        x: -700,
      },
      { x: 0 },
      "<"
    )
    // Curiosity paragraph 1 text slides in
    .fromTo(
      ".curiosity-paragraph1-text",
      {
        x: -700,
      },
      { x: 0 },
      ">-70%"
    )
    // Curiosity paragraph 2 text slides in
    .fromTo(
      ".curiosity-paragraph2-text",
      {
        x: -700,
      },
      { x: 0 },
      ">-70%"
    )
    // Beginning of system rearrange -->
    .to(
      "#lightBlue-planet-container",
      {
        x: "-=500",
        y: "+=500",
        scale: "+=15",
        overwrite: true,
      },
      ">200%"
    )
    .to(
      "#turquoise-planet-container",
      {
        x: "-=825",
        y: "+=30",
        scale: "+=1.5",
        overwrite: true,
      },
      "<"
    )
    .to(
      "#ringed-planet-container",
      {
        y: "-=50",
        x: "-=50",
        scale: "+=1",
        overwrite: true,
      },
      "<"
    )
    .to(
      "#red-planet-container",
      {
        x: "-=1500",
        opacity: "-=1",
        overwrite: true,
      },
      "<"
    )
    .to(
      "#darkBlue-planet-container",
      {
        x: "-=1500",
        opacity: "-=1",
        overwrite: true,
      },
      "<"
    )
    .to(
      "#dark-planet-container",
      {
        x: "-=900",
        y: "-=150",
        scale: "+=0.5",
        overwrite: true,
      },
      "<"
    )
    .to(
      "#moon-container",
      {
        y: "-=0",
        x: "-=200",
        scale: "+=0.5",
        overwrite: true,
      },
      "<"
    )
    .to(
      "#galaxy-swirl-container",
      {
        x: "-=1500",
        opacity: "-=1",
        scale: "+=10",
        overwrite: true,
      },
      "<"
    )
    .to(
      "#sun-container",
      {
        opacity: "-=1",
        x: "-=1500",
        y: "-=200",
        scale: "+=2",
        overwrite: true,
      },
      "<"
    )
    // <-- Ending of system rearrange
    //  Curiosity header text moves off screen
    .to(
      ".curiosity-header-text",
      {
        x: "-=700",
      },
      "<"
    )
    //  Curiosity paragraph 1 text moves off screen
    .to(
      ".curiosity-paragraph1-text",
      {
        x: "-=700",
      },
      "<"
    )
    //  Curiosity paragraph 2 text moves off screen
    .to(
      ".curiosity-paragraph2-text",
      {
        x: "-=700",
      },
      "<"
    )
    //  Phase 1 text moves off screen
    .to(
      ".phase1-text",
      {
        x: "-=1000",
      },
      "<"
    )
    // Discuss text fades up and in
    .fromTo(
      ".discuss-text",
      {
        autoAlpha: 0,
        scale: 0,
        y: 500,
      },
      {
        autoAlpha: 1,
        scale: 2.5,
        y: 0,
      },
      ">-50%"
    )
    // Phase 2 texts slides on screen
    .fromTo(
      ".phase2-text",
      {
        x: -1700,
      },
      {
        x: -800,
      },
      "<"
    );
};

 

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[mvaneijgen]

Hi @Noah_E welcome to the forum!

 

38 minutes ago, Noah_E said:

I'm unable to share a full codepen as I'm not allowed to share certain information such as our assets

That is great! Minimal demo's are just some colored divs and fake text to demonstrate the issue at hand. They are not your full code library with all the full assets.

 

Making a minimal demo is also something you build for your self to test solutions. I personally find that when making a minimal demo it will result in me fixing my own issue. And if not you've something you can share on places like here. 

[Rodrigo]

Hi,

 

Based on what you are describing another option that could be worth exploring is preventOverlaps and fastScrollEnd. You can check this article and the video @Carl made to explain how they work:

 

https://greensock.com/3-8#preventOverlapsAndFastScrollEnd

 

Happy Tweening!