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
