[Equivalent approach of drawing an svg without the DrawSvgPlugin]

Sup,

 

I wanted to animate my logo an my website using the gsap object. I coded a demo using the DrawSvgPlugin which is available in Codepen. Since I am not a club member I can´t access it and wanted to ask what would be the workaround here to achieve the same effect.

Here is the same appraoch using the DrawSVGPlugin: 

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

 

I appreciate any inputs. Thanks in advance.

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

[Disable scrolling as long as the animation takes place]

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?

[Disable scrolling as long as the animation takes place]

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.

[Disable scrolling as long as the animation takes place]

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