1.動畫SVG框架幻燈片
在幻燈片之間切換時顯示動畫SVG幀的實驗性幻燈片。不同的形狀可以用來創建各種風格。
我們想和大家分享一個實驗幻燈片。我們的想法是在從一個幻燈片轉換到另一張幻燈片時，使SVG幀動畫化。使用不同的形狀，我們可以在改變SVG路徑時創建各種框架樣式。這個想法的靈感是基於Dribbble拍攝：06章太平庸。我們使用的是anime.js的動畫。
2.WebGL的背景裝飾
使用WebGL顯示為背景的裝飾形狀的集合。這些形狀由Three.js創建，並使用TweenMax庫進行動畫制作。
，我們將探索一些使用WebGL生成的原始和實驗背景。主要想法是將有趣的動畫形狀顯示為裝飾性頁面背景，其中一些具有微妙的交互性。所有的演示都是用Three.js WebGL庫創建的各種形狀，動畫由高性能的GSAP動畫庫控制。
3.創意SVG筆畫動畫
一個創意撫摸由SVG和GSAP驅動的自行車插圖的動畫。
SVG筆畫動畫不是什么新東西，但是當使用基本上由筆畫構成的更復雜的繪畫時，我們可以創建一個非常原始的效果。使用許多不同的顏色和添加一些其他元素動畫，我們可以帶來一個非常獨特的外觀插圖生活。
4.展開網格項目動畫
在細節視圖打開時縮略圖放大的網格項目動畫。
我們想分享一個簡單的實現你的網格動畫是基於Dribbble的射擊沖浪項目由菲利普Slováček。當單擊一個網格項目時，背景和縮略圖將被放大並移動到其全屏位置。雖然Dribbble鏡頭是手機的動畫，但我們認為我們也可以在桌面上探索這個概念。
5.Kylo Ren CSS頁面預加載器
僅用HTML和CSS制作的星球大戰Kylo Ren頁面預加載器。
，我們要分享一些與你有點不同的東西：一個沒有圖像的動畫“星球大戰”只贊助Kylo Ren用HTML和CSS制作。
6.動態形狀覆蓋與SVG
一些想法為多層SVG形狀疊加，動態生成與各種效果可調整的屬性。
我們想分享另一種實現變形頁面轉換的方法。這一次，我們將用JavaScript生成多個SVG曲線，使得許多不同的外觀形狀成為可能。通過控制幾個SVG路徑的各個坐標，使用粘性運動的矩形（疊加）生成的曲線形狀。我們使用glsl-easings中的一些很好的緩動函數，通過調整曲線，速度和延遲值，我們可以產生許多有趣的效果。
7.液體變形效應
由PixiJS和GSAP驅動的WebGL中的液晶失真效果的幻燈片放映。
我們想和你分享一個有趣的失真效果。這個演示的主要概念是使用位移貼圖來扭曲底層的圖像，給它不同類型的效果。為了演示圖像之間的液態轉換，我們創建了幻燈片。一個位移貼圖通常做的是將圖像用作紋理，稍后將其應用於對象，從而給出假設底層對象纏繞在該紋理周圍。這是一種常用於許多不同領域的技術，但是我們將探索如何將其應用於簡單的圖像幻燈片。我們將使用PixiJS作為我們的渲染器，過濾引擎和GSAP動畫。
8.切片雙圖像布局
一些布局具有切片背景圖像，幻燈片功能和毛刺效應。
我們想和你一起分享一些圖片。 這個想法是在網格布局中顯示一些文本元素，並以幻燈片方式更改內容和圖像。 對於背景圖片，我們創建了一個有一些額外選項的插件。 為了做一個有趣的過渡，我們使用一個小故障效果。 這個效果我們也適用於一些文字。
9.有機SVG形狀變形想法
一小組有機形狀效果的想法。演示顯示了一些在網站上交互式使用動畫SVG變形的方法，包括菜單懸停和內容顯示效果。
我們希望與您分享更多動畫有機SVG形狀。這個想法是將一些流暢，自然的形狀整合到一個網頁中作為裝飾元素，有時候還有一個互動，也就是在菜單項上懸停的菜單背景，或者簡單地說，一個由凱文激發靈感的持續動畫波背景拉格爾的設計。在其中的一個演示中，我們還使用了一些模式和剪輯路徑，以獲得全屏動畫，以顯示其他內容。這些演示中的變形路徑和其他動畫由anime.js支持。
10.變形頁面轉換
一個簡單的變形頁面轉換效果，當當前頁面向上移動時，SVG路徑變形。
我們希望與您分享一個簡單的變體頁面過渡效果。這個想法是將一個SVG路徑變形，同時移動一個介紹頁面，創建一個有趣，流暢的外觀。對於動畫我們使用anime.js和一些字母效果，我們使用Charming。在演示中，我們使用“介紹轉換”來展示效果，但這當然只是這種頁面轉換的許多用例之一。
