Jump to content
Search Community

Disable scrolling as long as the animation takes place

Preefix test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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 :D 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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...