Здесь я использовал gsap и Highway.js для плавного перехода между страницами abiut, но, хотя в консоли нет ошибки, она не работает.
Пожалуйста, проверьте изображение.. Здесь я использовал gsap и Highway.js для плавного перехода между страницами "about", но даже если в консоли нет ошибок, он не работает.
комментарий:- Это главная html-страница..
<main data-router-wrapper>
<section data-router-view="home" class="home">
<div class="home-content">
<div class="home-presentation">
<h1>Seamsless Transition</h1>
<p>Beautiful transition between html pages</p>
</div>
<img src="./images/home.svg" alt="home" />
</div>
</section>
</main>
***comment:- This is the page that need to have transit in...***
<main data-router-wrapper>
<section data-router-view="about" class="about">
<div class="about-content">
<div class="about-presentation">
<h1>About Page</h1>
<p>Learn more about page transitions</p>
</div>
<img src="./images/about.svg" alt="about" />
</div>
</section>
</main>
комментарий:- Это основной файл js
import Highway from "@dogstudio/highway";
import Fade from './transition';
const H = new Highway.Core({
transitions: {
default: Fade
}
});
комментарий:- Это файл перехода
import Highway from "@dogstudio/highway";
import { TimelineLite } from "gsap";
class Fade extends Highway.Transition {
in({ from, to, done }) {
const tl = new TimelineLite();
tl.fromTo(to,0.5,{left: "-100%", top: "50%"}, { left: "0%" })
.fromTo(
to,
0.5,
{ height: "2vh" },
{
height: "90%",
top: "10%",
onComplete: function () {
from.remove();
done();
},
}
)
.fromTo(to.children[0], 2, { opacity: 0 }, { opacity: 1 });
}
out({ from, done }) {}
}
export default Fade;
***NOTE***
I am working on windows and i used node.js and babel (gsap and highway libraries)