SVGパスに沿って要素を動かせるGSAPプラグインを自作してみました【フィードバック募集中】
はじめに
Web制作とデザインのお仕事をしている個人開発者です。
普段から「動きのあるサイト作り」が好きで、SVGやThree.jsなどの技術を探求しています。
今回はパスに沿って動かせるスライダーのプラグインを作ってみました。
See the Pen UntitledGSAP Plugin "ORBIT SLIDER" Demo by masuda (@morio3) on CodePen.
実際にドラッグして動きを確認してみてください。
開発のきっかけ
このツールを作った一番の動機は、自分自身の「面倒くさい！」という気持ちでした。
かつて曲線スライダーを実装した際、単にパスに沿って動かすだけならCSSやSMILで事足りますが、SVGパスで作った軌道の上を、マウスでドラッグできるスライダーにするとなると、一端に工数が跳ね上がります。一度は力技で完成させたものの、「次同じようなスライダーを作るときにこんなに大変なコードを書きたくない……」と痛感しました。
Illustratorなどで作ったSVGパスを読み込ませるだけで、もっと直感的に、楽に実装したいという思いもありジェネレーターも用意しています。
Demo & Generator: https://molydebnum.github.io/orbit-slider/
まだ「生まれたて」のツールです
自分なりに試行錯誤して形にしてみましたが、まだ個人開発のテスト段階で、多くの環境でのテストや詳細なバグ調査ができていない状態です。
そこで、もしよろしければWeb制作に関わる皆さんに実際に触ってみていただき、アドバイスをいただけないでしょうか。
- 「自分の環境（ブラウザ）ではこう動いた」
- 「この部分の使い勝手が悪い」
- 「こんなエラーが出てしまった」
といったフィードバックをいただけると、本当に助かります。
SVGパスに沿った「ドラッグ操作」を簡単に実装
- 自由な軌道設定: SVGのpathデータを使って、好きな形に要素を並べスライダーにできます。
- 様々なオプション設定: ドラッグやオートプレイの有無、移動スピードやドラッグの強弱も自由に調整可能です。
- コードジェネレーター: 直感的に設定を調整して、コードを書き出せるデモサイトも用意しました。
リポジトリ・デモサイト
開発中のコードや使い方はこちらにまとめています。
- Demo & Generator: https://molydebnum.github.io/orbit-slider/
- GitHub: https://github.com/Molydebnum/orbit-slider
おわりに
技術的な情報交換を含め、皆さんと楽しく交流しながら、このツールをより良いものに育てていけたら嬉しいなと思っています。
まだまだ勉強中の身ですが、仲良くしていただけると幸せです。
お気軽にフォローやコメント、GitHubでのIssue報告などをいただければ大きな励みになります。どうぞよろしくお願いいたします。
