Disable scrolling as long as the animation takes place

[Preefix]

Sup guys, 

 

First time developing a Vue.Js application and wanted to animate my #about section on scroll from the left side of the screen to the right side. I split my app into two parts: the welcome section wrapper that holds the elements I want to animate and the app that scrolls normal again.

When the user starts scrolling stage-1 is applied to the master and the animation takes place:

 

<div id="master" class="stage-0 h-100 w-100 position-relative isAnimating">
    <div class="welcome-section-wrapper w-100 position-relative">
      <div
        class="welcome-section-animated d-inline-flex w-100 h-100"
      >
        <Hero />
        <About />
      </div>
    </div>
    <div id="app" class="app">
      <Experience />
    </div>
</div>

When I start scrolling now it animates the section correct and disables scrolling for 3 seconds.

 

I donßt know if this approach is right + I can´t go the way back when I want   scroll up again.

 

My first attempt was to detect when the user started to scroll and then add some classes to the sections to transform:

 

 handleScroll() {
   const navBar = document.querySelector(".navbar");
      const master = document.querySelector("#master");

      master.classList.add("stage-1");
      master.classList.remove("stage-0");

      var anim = gsap.timeline({
        paused: false,
      });

      anim.from("#master.stage-0", 0, {
        transform: "translateX(0)",
      });

      anim.from("#master.stage-0 #about", 0, {
        transform: "translateX(-100vw)",
      });

      anim.to("#master.stage-1 #hero", 0.25, {
        transform: "translateX(105vw)",
      });

      anim.to("#master.stage-1 #about-content", 0.5, {
        opacity: 1,
      });

      anim.to("#master.stage-1 #about", 3, {
        transform: "translateX(0)",
        onComplete: () =>
          document.querySelector("#master").classList.remove("isLoading"),
      });

      navBar.classList.add("bg-nav");

      if (window.scrollY < 10) {
        navBar.classList.remove("bg-nav");
        master.classList.remove("stage-1");
        master.classList.add("stage-0");
      }
 
 }

 

and the corresponding transformations to animate the sections ( I excluded the transitions because they are just cubic bezier´s)

 

/** 
*stage 0 
*/

#master.stage-0 {
  transform: translateX(0);
}

#master.stage-0 #about {
  transform: translateX(-100vw);
}

/** 
*stage 1
*/

#master.stage-1 #hero {
  transform: translateX(105vw);
}

#master.stage-1 #about {
  transform: translateX(0);
}

#master.stage-1 #about-content {
  opacity: 1;
}

#master.isAnimating .app {
  display: none;
}

At this point I don´t really know how to setup the timeline. Any suggestions are highly appreciated! Thanks

[ZachSaucier]

Hey Preefix and welcome to the GreenSock forums.

 

First off, you're making a couple of the most common GSAP mistakes. I recommend going through that whole article as it's all good to keep in mind  

 

As for your question, it'd be very helpful if you could make a minimal demo of the issue, especially if you could do so using CodePen (it has pretty good built in support for Vue — more info in the linked page).

[Preefix]

Thanks for the advice. I created a 

See the Pen eYBbVLa by Preefix99 (@Preefix99) on CodePen

 .

 

Comming from the iOS world this isn´t straightforward to me  This is what I tried in order to make a smooth animation happen and disabling scrolling to prevent some ugly stuttering when the user scrolls a lot at the beginning.

[ZachSaucier]

Here's how I'd approach it:

• Set it up with CSS to where you have it laid out like this:

                  ┌───────────────┐
                  │               │
                  │      one      │
                  │               │
  ┌───────────────┼───────────────┤
  │               │               │
  │     three     │      two      │
  │               │               │
  ├───────────────┼───────────────┘
  │               │
  │               │
  │               │
  │               │
  │               │
  │               │
  │               │
  │     four      │
  │               │
  │               │
  │               │
  │               │
  │               │
  │               │
  │               │
  │               │
  │               │
  │               │
  │               │
  └───────────────┘

• Create a ScrollTrigger with the trigger as the second section, the start as "top top", the end as += 100% of the viewport's width, pinning a container of all of the content, scrub: true, and a pair animation animating the x position of all of the content (optionally the content inside of the container that has everything in it) of the distance of the viewport.

Definitely keep in mind the common mistakes that I linked to in the last post.

[Preefix]

What do you mean by pair animation animating the x position? I took a look in the docs and from what I have seen I need the onEnter callback?

[ZachSaucier]

You can attach an animation to a ScrollTrigger in a couple of ways:

1. Use the scrollTrigger syntax inside of the tween or timeline vars.
2. Use ScrollTrigger.create() and use the animation property.

You can also put animations inside of the callbacks but that's not really attaching it to the ScrollTrigger itself.

 

For more info see the docs.