Здесь я использовал 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)

введите описание изображения здесь

0 ответов

Другие вопросы по тегам