#デイトラ #ウィークリーコーディング
#ScrollTrigger #SVGanimation
『Theme：スクロールに合わせてSVGのグラデーション線が伸びていく表現』⇒『ドローン視点で巡る、ハイキングの追体験』
Animation：
GSAP (ScrollTrigger / keyframes) / SVG (stroke-dashoffset)
🎯Focus：空間を移動する没入感
・道を描画するだけでなく、画面自体を横移動させて「首振りカメラ」のような斜めスクロールを実装
・道の進行に合わせて、ポラロイド風の思い出の写真たちがふんわりと出現する演出
🏹Challenge（実装の壁）
・画面幅を広げて斜めに進ませる際、SVGのS字カーブとカメラの動きがズレて道が画面外に消える問題に直面
・GSAPの keyframes を使い、横移動（x軸）を道のカーブに合わせて3段階に分割することで、追従を実現。
📝Memo
ScrollTriggerと keyframes を組み合わせれば、縦スクロールだけでカメラワークが作れる。
Mar 22
今週の #デイトラ #ウィークリーコーディング
お題は「スクロールに合わせてSVGのグラデーション線が伸びていく表現」
LPの導線演出、サービス紹介のタイムライン、実績紹介、ストーリー設計などでかなり使える実装。
こういった「体験に落とし込める実装ができる人」は現場でも重宝されます！
📝実装のヒント
✅ SVGのpathの長さを取得する
✅ 長さ分の線をずらして非表示→スクロールに連動して描画する
✅ スクロール量と進行度はGSAP ScrollTriggerなどを同期が可能
SVGを作るところがまず難しいかもしれませんが...。まずは直線で動きを確認してみるだけでも大丈夫です🙆♂️
「実装例コード」は1週間後に配布します。ぜひチャレンジしてみてください！
👇 可能な方は、ぜひリプ欄に実装後のURLを貼って教えてください😊
来週、みんなの参考としていくつかピックアップ紹介させてもらえると嬉しいです！
----------
👨💻 ウィークリーコーディングとは？
流行りのアニメーションや「CSSだけでこんな表現できたんだ！」と思うような、ちょっとテクニカルな実装にみんなで挑戦するオンラインスクール「デイトラ」の参加型企画です✨
✅ 毎週月曜にお題 & 前週の実装例を公開
✅ デイトラ生以外も参加歓迎
✅ 実装スキルやスニペット集のレベルUPに！
ぜひ挑戦してみてください！💪
1
1
41
2,283
🚙💨 Free Cinematic Animated SVG – Jeep Icon
A physics-driven animated SVG generated on
Frex Studio using Gemini 3.1 Pro.
No JavaScript.
Pure SVG CSS motion choreography.
🆓 Get the full code here:
👉 frexstudio.com/free-gallery
Built with Google’s Gemini.
#SVG #SVGAnimation #FreeSVG #WebDesign #AI #Google #Gemini #Frontend
4
102
Feb 20
@VaibhavSisinty This is absolutely insane 🔥
Gemini 3.1 Pro just dropped buttery-smooth day-to-night lighting transitions in pure SVG , no Canvas, no heavy video files, still razor-sharp on mobile. Motion designers & creative coders are eating GOOD today.
At @ViksitBharatAI we are building scalable AI creative pipelines and this is exactly the kind of output we want in production- tiny file size infinite scalability.
What was the exact prompt that nailed those gradient shifts? Sharing the magic? 👀
#GeminiAI #SVGAnimation #AICreative
2
347
Feb 16
Design in Figma. Animate in SVGator. Push it back to Figma. Your designs now move, right inside your working file ✨ svgator.com/figma-plugin
#svgator #figmaplugin #figmaanimation #svganimation #motiondesign #webanimation #uianimation #nocodeanimation
2
177
Just upgraded the gravity fall animation effect on the portfolio homepage!
Now supports direct SVG file import, allowing precise selection of elements for the fall effect, plus added elegant glass-like buttons to enhance overall texture. The physics feedback is incredibly smooth and modern.
Visit my website to experience the silky-smooth effects: xdux.top
#WebDesign #FrontEndDevelopment #SVGAnimation #PortfolioTips #UXDesign #CreativeCoding
1
33
Jan 11
Handcrafted SVG animation in action. ✨
Combining clean code with creative motion. Let me know what you think of this CSS/HTML build!
#Frontend #SVGAnimation #UIUX
1
2
6
100
5 Nov 2025
helll yeah got merged! 🚀
animated major git related icons 💃
lucide-animated.com/
#oss #lucideicons #animation #svganimation #animatedlucideicons #motiondev #framermotion #desgin #UIUXDesign
2
87
🎉 Shoutout to @Nickippy from @Squarekicker for creating an awesome tutorial on Xyris! Super helpful for both new and experienced users.
Check it out: youtube.com/watch?v=RtRpBu6t…
Huge thanks to Nick for creating and sharing this!
#Stencils #Xyris #SquareKicker #SVGAnimation
2
3
160
14 Aug 2025
Cool neon raygun animation! 🚀
#WebAnimation #SVGAnimation #NeonDesign #RaygunArt #CSSAnimation #DigitalArt #CreativeCoding
1
3
281
Learn how to create scroll-triggered SVG animations using Xyris and SMIL. Animate visually, control with simple JavaScript—no complex coding required. (link in comment) #SVGAnimation #ScrollAnimation #WebDesign #XyrisApp #SVG #WebAnimation #CreativeCoding #SMILAnimation
1
1
4
136
Discover how to animate SVGs without using CSS or JavaScript by leveraging native SMIL animation: xyris.app/blog/how-to-animat…
#SVGAnimation, #Xyris, #SMIL, #CSSAnimation
1
4
111
11 May 2025
Check out new work on my @Behance profile: "2D SVG animation" be.net/gallery/225622297/2D-…
#animation #2Danimation #SVG #SVGanimation #web #site #website #interface #interactive #UX #UI #UXui #cool #smooth
2
31
Discover the top features every SVG animation editor should have, from keyframe support and interactive animations to cloud collaboration and version history.
#SVGAnimation #SVGAnimator #MotionGraphics #SMIL
xyris.app/blog/top-10-featur…
2
5
159
Compare SVG animations: CSS, SMIL, and JavaScript. Learn their pros, cons, and best uses.
xyris.app/blog/svg-animation…
#svganimation, #cssanimation, #webanimation, #xyris
2
5
199
Learn how to design and animate a glowing neon effect using filters in Xyris! This tutorial covers the basics of applying glow effects, animating colors and blur, and exporting your final design.
#xyris, #svganimation, #filteranimation, #neoneffect
youtu.be/oSpkdIA_Tqo
1
3
6
232
15 Jan 2025
デザインの詳細についてはInstagramに掲載しておりますのでぜひご覧ください。
instagram.com/p/DDi9THYzZ0K/…
#webdesign #branding #creative #animation #logo #Lottie #Studio #SVGanimation #Interactivedesign #Minnamigo
5
708
Think it's a video? It’s not! 🎯 This is an SVG animation made from scratch with just HTML & CSS. 💡 SVGs are lightweight, scalable, and optimized for faster loading—perfect for web performance. 🚀 #SVGAnimation #WebDesign
3
49
Welcome to this step-by-step tutorial on creating path morph animations in Xyris!
#xyristutorial #motiongraphics #svganimation #designtutorial #animationtips #creativedesigns #xyris #graphicdesign #morphanimation #howtoanimate #morph
youtube.com/watch?v=TMfpUCId…
3
6
234
Discover six creative ways SVG animations are transforming modern web design.
#svganimation, #logoanimation, #AnimatedIcons, #animatedbanner, #webanimation
xyris.app/blog/top-6-creativ…
3
8
131