//variable declaration for the global repeated animations const gear = $("#gear1, #gear2, #gear3"); ... //animation that's repeated for all of the sections function revolve() { let tl = new TimelineMax(); tl.add("begin"); tl.to(gear, 4, { transformOrigin: "50% 50%", rotation: 360, ease: Linear.easeNone }, "begin"); ... return tl; } const repeat = new TimelineMax({repeat:-1}); repeat.add(revolve())

dotsで開催されたReactの導入を検討されてる方向けの勉強会でお話しました https://eventdots.jp/event/597088

物理法則に基づいたアニメーションを実装できるライブラリのDynamics.jsをReact.jsで使ってみた。 基本的にJSのアニメーションライブラリはDOMを直接操作するけど、React.jsを使う場合は実際のDOMと仮想のDOMとの整合性が崩れてしまうのでそれは推奨されない。 なので、アニメーションする値をstateで管理してやってみた。 import React from 'react'; import dynamics from 'dynamics.js'; class Box extends React.Component { constructor(props) { super(props); this.state = { x: 0, y: 0 }; } componentDidMount() { dynamics.animate(this.state, { x: 200, y

クラウドワークスが、 社外のエンジニアに寿司をおごる企画をやっている というのを見かけて、寿司がタダで食べられるなら良いなと思い、なにも考えずに申し込んでみました。 1 選べる!寿司ランチ この企画は、寿司を食べながら対話するエンジニアを指名できるシステムになっています。筆者は、最近案件で使ったReact+Reduxや、RailsとReactを組み合わせて使うことに興味があったため、また、最近子供が生まれてリモートワーク制度を活用していたということで、そのあたりにも興味があり、 suzan2go さんを指名しました。suzna2goさんは、クラウドワークスの中でも、 Reactの普及にとくに熱心 なエンジニアだそうです。 寿司 こちらがクラウドワークスで提供していただいた寿司になります。 筆者もたまに出前する銀のさらの寿司 ごちそうさまでした。なお、お茶は出なかったので、ハックルベリーさん

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Reduxはとりあえず使えるようになった後の情報が少ないように感じています。よく出回っているサンプルコードは「Real World 〜」のような名前がついていたとしても、あくまで雰囲気を味わうために用意されたものに毛が生えた程度で、現実に起こる問題に対する回答や指針を示しているわけではありません。業務で使うことを検討するのであれば、プロダクトの成長と共にどうやってスケールしていくかイメージできないと導入に踏み切れないですよね。本稿ではサンプルコードより大きな規模で開発していくために、Reduxにおけるコンポーネントの再利用について紹介し

Reduxの公式ExampleにあるTodo Listを少しづつ書いてみました。 最終的な動作イメージは以下のような感じです。 Github Pagesにもあげていますので、触ってみてください。 基本的なReduxの説明や環境構築などは他のドキュメントに譲るとして、 ここでは各機能ごとに動くものを作りながら、最終的にExampleの形になることを目指します。 Reactがだいたい分かってて（チュートリアルをやったくらい）で、 Reduxを触り始めたくらいの人を対象としています。 Reduxを触り始めて日が浅いので、間違いもあるかと思います。ぜひご指摘ください。 ExampleのTodo Listの機能は次の3つです。 TodoをTodo Listに追加する「Add Todo」 Todoの完了・未完了を切り替える「Toggle Todo」 表示するTodo Listを完了または未完了のTod