GSAPアニメーションによるBarbajs
14486 ワード
私はいつも私のシンプルなWebアプリケーションは、ページと1つのページのアプリケーション(SPA)のような行為の間にbadass流体と滑らかな移行を持っていた.それで、私は、あなたのウェブサイトのページの間で流体と滑らかなトランジションをつくるために、進歩的な強化図書館であるBarbajsに遭遇しました.
バーバJSはまた、ページ間の遅延を減らすために、ブラウザのHTTPリクエストを最小限に抑え、ユーザーのWeb体験を強化するのに役立ちます.
それで、私はBarba JSの用法がある、そして、ページ遷移アニメーションのために単純な着陸ページを建設しました、私はGSAPアニメーションを使用しました.今日はどのように我々はBarbajsとGSAPアニメーションを介してこの滑らかなアニメーションを作成することができます説明します.
それで、GSAPは何ですか?簡単な言語では、JavascriptアニメーションのスイスアーミーナイフとしてGSAPを考えます.より良い.JavaScriptは(CSSのプロパティは、キャンバスのライブラリオブジェクト、SVG、反応、Vue、汎用オブジェクト、何でも)触れることができます何かをアニメーション化し、それは無数のブラウザの矛盾を、すべての速度(自動化されたGPUの高速化を含む)の自動GPUの加速を含む燃えるような速度で解決します.
では、始めましょう.
NPMを使う
ページ遷移
入力してください、一度フックとメソッドです.フックは、共通の
あなたが
今、すべてのコードを混合した後、Github hereで最終的なコードを取得し、アニメーションの周りを再生することができます.私はあなたが素晴らしいアニメーションを作成します願っています.
これまで来て、私はあなたがバーバJSの基本的な理解を得ることを望みます、そして、それは利点です、それで、私はあなたにそれをあなたのプロジェクトにためして、それを楽しむように提案します!
その時まで
ハッキングを続ける
バーバJSはまた、ページ間の遅延を減らすために、ブラウザのHTTPリクエストを最小限に抑え、ユーザーのWeb体験を強化するのに役立ちます.
それで、私はBarba JSの用法がある、そして、ページ遷移アニメーションのために単純な着陸ページを建設しました、私はGSAPアニメーションを使用しました.今日はどのように我々はBarbajsとGSAPアニメーションを介してこの滑らかなアニメーションを作成することができます説明します.
それで、GSAPは何ですか?簡単な言語では、JavascriptアニメーションのスイスアーミーナイフとしてGSAPを考えます.より良い.JavaScriptは(CSSのプロパティは、キャンバスのライブラリオブジェクト、SVG、反応、Vue、汎用オブジェクト、何でも)触れることができます何かをアニメーション化し、それは無数のブラウザの矛盾を、すべての速度(自動化されたGPUの高速化を含む)の自動GPUの加速を含む燃えるような速度で解決します.
では、始めましょう.
Barbajsをインストールします。
NPMを使う
npm install @barba/core
yarn add @barba/core
<script src="https://unpkg.com/@barba/core"></script>
インデックス作成.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BarbaJs Demo | Home</title>
<link rel="stylesheet" href="./style.css">
</head>
<body data-barba="wrapper">
<div class="wrapper">
<header>
<nav>
<ul>
...
</ul>
</nav>
</header>
<main data-barba="container" data-barba-namespace="home">
...
</main>
</div>
<script src="https://unpkg.com/@barba/core"></script>
</body>
</html>
wrapperがあります.<body data-barba="wrapper">
...
</body
<main data-barba="container" data-barba-namespace="home">
...
</main>
barbajsの初期化のためのすべてです.現在、我々は遷移部分をGSAPを通して加えることができます.最初に、私が作成した移行部門を初期化しましょう.ページレイアウトとしてアニメーション効果を実装する遷移divは、インデックスから変更されます.HTMLについて.HTML<ul class="transition">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
.transition {
position: absolute;
z-index: 99;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100vh;
top: 0;
left: 0;
margin: 0;
padding: 0;
pointer-events: none;
}
.transition li {
width: 20%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
background: #fffffe;
}
ページ遷移
function pageTransition() {
var tl = gsap.timeline();
tl.to(".transition li", {
duration: 0.5,
scaleY: 1,
transformOrigin: "bottom left",
stagger: 0.2,
});
tl.to(".transition li", {
duration: 0.5,
scaleY: 0,
transformOrigin: "bottom left",
stagger: 0.1,
delay: 0.1,
});
}
function contentAnimation() {
var tl = gsap.timeline();
tl.from(".headline", {
duration: 1.5,
translateY: 50,
opacity: 0,
});
tl.to(
"img",
{
clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
},
"-=.1"
);
}
barba.init({
sync: true,
transitions: [
{
async leave(data) {
const done = this.async();
pageTransition();
await delay(1500);
done();
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
},
},
],
});
function delay(n) {
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
バルバジュのフック
入力してください、一度フックとメソッドです.フックは、共通の
this.async()を使用して同期または非同期的に実行したり、約束を返します.あなたが
sync: trueを使うならば、LeaveとEnterが並行しているように、順序は異なります:すべての前に、そして、それから、そして、すべての後に入ってください.barba.hooksを使用してグローバルフックを定義することができますし、すべての移行に適用することに注意してください.コード
今、すべてのコードを混合した後、Github hereで最終的なコードを取得し、アニメーションの周りを再生することができます.私はあなたが素晴らしいアニメーションを作成します願っています.
結論
これまで来て、私はあなたがバーバJSの基本的な理解を得ることを望みます、そして、それは利点です、それで、私はあなたにそれをあなたのプロジェクトにためして、それを楽しむように提案します!
その時まで
ハッキングを続ける
Reference
この問題について(GSAPアニメーションによるBarbajs), 我々は、より多くの情報をここで見つけました https://dev.to/integridsolutions/barbajs-with-gsap-animation-2o15テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol