LottieFiles: Download Free lightweight animations for website & apps.LottieFiles takes away the complexity from motion design. It lets you create, edit, test, collaborate and ship a Lottie in the easiest way possible. Get Started - It's Free
Drama
Introducing Drama Prototyping, animation & design tool. All-in-one. Try for Free Buy Now Our Customers We are proud that some of the greatest companies in the world use Drama. Draw scenes. Each scene represents a visual state of your prototype. Add transitions between scenes. Transitions are triggered when users interact with the prototype. Magic Move auto-animates layers with the same name during
もう使ってる？ たった3行で美しいSVGアニメが作れる「Vivus」がスゴい
まるで「見えないペン」で描いているような手描き風のSVGアニメーション。CSSとJavaScriptの知識があれば実装できる、定番アニメーション表現ですが、Vivusならもっと手軽に実装できちゃいます。 90年代初期のBLINKタグから、最新のCSS3トランジションやアニメーションに至るまで、Webページやアプリケーションの要素を移動する機能は、いつも魅力的な目標であり続けています。 今日では、SVGなどのテクノロジーを使えば、「見えないペン」と呼ぶエフェクトを比較的容易に実現できます。閲覧者は、まるで見えないペンで描かれたかのように、1ラインずつ表示される絵を目にします。 そのアイデアは新しいものではありません。よく知られているように、1953年の「Duck Amuck（カモにされたカモ）」にまでさかのぼると、のちにバッグス・バニーだと判明した見えざる手は、周りの世界を何度も消しては描き
How SVG Line Animation Works | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. I bet all of you have seen that little trick where an SVG path is animated to look like it’s drawing itself. It’s super cool. Jake Archibald pioneered the technique and has a super good interactive blog post on how it works. Brian Suda wrote about it on 24 Ways. Polygon used
UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
Tween<span>Max</span>
Note: TweenMax has been deprecated in GSAP 3 in favor of the streamlined gsap object. It has 50+ new features and is almost <strong>half the size!</strong> GSAP 3 is backward compatible with the vast majority of GSAP 2 features including TweenMax. Please see the Migration Guide for details. TweenMax lets you animate literally any property of any object that JavaScript can touch (CSS, SVG, React, V
Popmotion 8 | A functional, flexible JavaScript animation library
A functional, flexible JavaScript motion library
react-springでリッチなアニメーションを実現する【今日のGitHubトレンド】 - bagelee（ベーグリー）
はじめに Reactを使ってリッチなサービスを作る際、少し苦戦するのがアニメーション処理です。 実装する際は、公式アドオンのReact Transition Group やシンプルなvelocity-react、恐らく一番人気のreact-motionなどのライブラリを使うことが多いのではないでしょうか。 今回はアニメーションライブラリのreact-springをご紹介します。 デモはこちらをご覧ください。 いくつかサンプルをご紹介します。 react-springとは react-springはReact Nativeのanimatedをベースにしており、また前述のreact-motionの良いところを踏襲しつつ足りない部分を補填しています。 animatedについては、以前こちらの記事でも解説しましたね。 アニメーションをつける【これからはじめるReact Native】 では、実際に
Lottieでアプリにアニメーションを組み込む話（デザイナー編） - くらげだらけ
最近ではWebサービスやスマートフォンアプリにおいてもアニメーションの重要性は認識されつつあります。 機能としてのアニメーションは「FacebookアプリのLoading Placeholder」や「TwitterアプリのLikeボタンのフィードバック」のように何が起こっている（起きた）のかをわかりやすく伝えたり、「17 Live（イチナナ）」や「CASH」のSplashのようにロゴやブランドのイメージを強く印象づけたり、楽しませたりと使い方は様々です。 アニメーションをWebやアプリに組み込む方法は様々ありますが、今回は「Lottie」を使ってアプリにアニメーションを組み込む方法やメリットなどについて書こうと思います。 とはいえ今回はデザイナー編でして、AfterEffectsで簡単なアニメーションを作ってLottie用にデータを書き出すというところまでをご紹介します。 最後にアニメーシ
Radar Chart - amCharts
Radar chart (also known as web chart, spider chart, star chart, etc.) is used to display data as circular two-dimensional plots. In the scope of amCharts you can think of radar charts as circular XY charts with a lot of the same concepts applicable throughout. Key implementation details We start by creating an instance of RadarChart. The key point when adding axes to a radar chart is using special
Unity初心者のためのアニメーションの基礎の基礎 - Qiita
Unity を学んでいる初心者がぶち当たる壁のひとつに「アニメーションって何？」があります。 アニメーションの基礎をきっちりと説明することで、自分の入るべき初心者向けの入り口を知り、スムーズに学んでいけるのではないか？そう考えてこの説明文を作成してみました。 Unityの初心者、アニメーションをこれから学ぼうとしている方にお勧めします。 初心者の間違いやすいポイント 「Unity のアニメーション」と言われたら、まずは以下のようなものを想像しませんか？ 確かにこれは「Unityのアニメーション」としては正しいです。 でもこれを題材に、初心者がアニメーションを理解するには無理があります。使うだけならいいのですが「理解」するには適さない、初心者には高度すぎるサンプルなんです。 料理の初心者は最初に「ゆで玉子」など簡単なものを作りますよね。いきなり「活オマールエビのテルミドール」などを作り出す初
アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ
ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves ３つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま
Vue.js ( Nuxt.js ) でアニメーションやってみたら最高だった話。 - Qiita
Nuxt.jsで自己紹介サイトを作りました。 https://nitta.studio/ 見ていただくと分かる通りアニメーションをしまくったのですが、、 https://t.co/CXj31medDj Nuxt.jsで自己紹介サイト作りました。NetlifyホスティングでPWA対応してます。 いろいろ自分のイカれた略歴など晒しました。宜しくお願いします。 — 新田聡一郎 (@soichiro_nitta) 2018年4月26日 VuexとVue.jsのウォッチャをつかって、 イベントハンドリング ステート変更 ウォッチャで検知 複数のコンポーネントでアニメーション発火🔥 のような書き方をしたら最高だったので、ご紹介です。 アニメーションって、どこにどの処理書けばいいのか困りませんか？ 凝ったものを実装するとめちゃめちゃなコードになりがちですよね... しかーし！Vue.jsのデータ駆動と
使える！CSSアニメーション 20選 | SONICMOOV LAB
CSSの進化により、様々な表現がCSSだけで完結できるようになったこの頃ですが、その中でもCSSを使ったアニメーションが色々と目を引くものがあり、今回はそれについて様々な場面で使えるCSSアニメーションをまとめてみました。ソースコードもあるので、カスタマイズすればすぐに使えますので、ぜひともチェックしてみてください。 関連：コピペで絶対使いたくなるCSSボタン 25選 目次 クネクネ動く CSS loading カラフルな CSS preloader! まるで折り紙のような Cube Fold ユーザーを引きつける Animated SVG Spinner バルスじゃないよ、パルスな Smooth Pulse スマホで見かけるあのメニュー Gooey Menu 一味違う確認モーダル Flipside 円形のプログレス SVG circular progress 流れる星 Parallax
15 Inspiring Examples of CSS Animation on CodePen | Envato Tuts+
1. Pure CSS Watch Animation Pure CSS watch animation by Grzegorz Witczak (@Wujek_Greg). This is a lovely example of combining CSS transform (rotate and translate) to position the hands and the day/night indicator on a stylish watch face. 2. CSS Submarine Submarine animation with CSS in CodePen by Alberto Jerez (@ajerez). Gorgeous use of the circular port-hole shaped container gives this CSS-animat
こんなにあった！UIデザイナー向けアニメーションライブラリー最新ベスト9
Webサイトをおしゃれに、かっこよく演出するアニメーション系JavaScriptライブラリー。デザイナーにも使いやすいライブラリーをまとめました。デモを見るだけでもアイデアがひらめくかも？ Webデザインはこの10年間で大きく変わりました。2007年頃は雑誌のように静的なレイアウトが主流でしたが、2017年には数千のパーツが連動して伸縮しながら移動するデザインも可能になりました。 これから、優れたUIデザイナーになるにはWebアニメーション技術に関する知識も必要です。 この記事ではUIデザイン向けの良質なアニメーションライブラリーを9つ紹介します。現時点での最新の情報と、各ライブラリーの強みや弱み、向き不向きをまとめたので、タスクに適したライブラリーを選んでください。 「コーディングプロ級」の開発者ではなくコーディングもこなせるUIデザイナーの視点で各ライブラリーを評価しました。CSSだけ
素人からAndroidアニメーションの面白さを発見しよう - Qiita
この記事は リクルートライフスタイル Advent Calendar 2016 の19日目の記事です。 はじめに こんにちは。ホットペーパグルメでアンドロイド開発を担当しているビン（Bing）です。中国出身で本名は朱冰凝（シュヒョウギョウ）ですが、名前の発音が難しくて自分も読みづらいのでビン（Bing）と読んでくれたら嬉しいです。 捜索エンジンBingと関連がありませんけど…w 今回は私の初めての日本語ブログです。日本語でも技術についてでも、気兼ねなくコメントをくださいm(= =)m。 最近アニメーションをホットペッパーアプリに追加したら、アプリの温度感が凄く良くなった気がしています。 それで、Androidアニメーションでなにができるか、なんの面白い機能があるのかを調査したので、説明して行きたいと思います。 一般的にAndroidアニメーションはView AnimationとProper
「Lottie」でお手軽Animation実装 / implement animation with Lottie
2017.05.24 potatotips #40 (iOS/Android開発Tips共有会) https://potatotips.connpass.com/event/55019/
アニメーション付きのボタンを実装するためのテクニック - Qiita
林です。 個人的な話ですが10日ほど入院していまして、 入院というのは、人生で初めて経験しましたが、死ぬほど暇なんですね。 暇な時間を使って、dribbbleにありそうなアニメーション付きのボタンを実装してみました。 無事インターネットのある世界に戻ってきたので、公開します。 ベースはUIControl 基本的なところから。 自前のボタンを実装する時はUIButtonではなく、UIControlを継承します。 UIButtonではないですよ。UIControlです。 自前のUIコンポーネントを実装する時に、機能豊富なクラスを継承すると、不要な機能を殺すために苦労する羽目になりがちです。 必要最小限のクラスを使うのが結局のところ近道になります。 押下時の表示変更はisHighlightedをトリガーに GestureRecognizerとか、setAction:とか使わない 毎回、isSel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Free After Effects Project files of Lottie animations