Zenn
🍓

スクロールに連動してにょぽんと現れる「Topに戻る」ボタン

2023/04/01に公開
CSS
HTML
animation
GSAP
tech

「Top」に戻るボタンをにょぽんと出現させるアニメーションを学びました↓

サンプル

サンプルはこちら↓

コード抜粋

アニメーションに関するコードを抜粋しました。

style.css

.p-footer__action {
  position:absolute;
  top:-74px;
  right:0;
  display:grid;
  width:300px;
  height:75px;
  background-color: #000;
  clip-path:path("M0 75 C 130 75,130 75, 150 75 C 200 75, 170 75, 300 75 Z");
  transition:transform .3s ease-out;
  transform-origin:center bottom;
} 

.p-footer__action:hover {
  transform:scaleY(1.2);
}
script.js
gsap.to(".js-action",{
  clipPath:"path('M0 75 C 130 75,100 15, 150 15 C 200 15, 170 75, 300 75 Z')",
  ease:"linear",
  duration:.15,
  scrollTrigger:{
    trigger:".js-trigger",
    start:"bottom 100%",
    toggleActions:"play complete reverse reset"
  }
})

三次ベジェ曲線むずい！！！
scrollTriggerが便利だ！

参考サイト

参考サイトはこちら↓
https://www.newformcap.com/

「Topに戻る」ボタン以外にも参考にできそうな箇所が多い！！！！！

Discussion