2021.09.25

10月4日のAdvance Everyday

昨日のイラスト

昨日のスクリプト

このAdvanceでポッドキャストを開設し、多くの人が聴けるようにSpitifyへ配信をしているわけだが、ここ最近になってさらにSpotifyのことが好きになった気がする。

というのも、UIが素敵すぎるのだ。

ポッドキャストを登録する際も、ブラウザでRSSコードというものを使ってプロフィールをつくっていくんだけど、Webでもここまでイケてるルックスをしてるなんて流石すぎる…とずっと感動してました。笑

CODING MANUAL

風景だったり情景をざっくり表現するのもいいですが、こんな感じで「実際スマホにのっかってるもの」をアニメーションさせる面白さもありますよね。

 

// ドットを移動
var advance_music = new TweenMax.to(".played_music_dots", 1, {
  ease: Power3.linear,
  x: 318,
});

var music_let_short = new ScrollMagic.Scene({
  triggerElement: ".music_play_svg",
  triggerHook: 0.4,
})
  .setTween(advance_music)
  .addTo(controller);

// 左の線を伸ばす
var advance_music_play = new TweenMax.to(".played_music", 1, {
  ease: Power3.linear,
  scale: 2,
});

var music_let_play = new ScrollMagic.Scene({
  triggerElement: ".music_play_svg",
  triggerHook: 0.4,
})
  .setTween(advance_music_play)
  .addTo(controller);


// 再生中マークを消す
var tlMusic = new TimelineMax();

var advance_music_button = tlMusic
  .to(".play_button_left", 0.2, {
    ease: Power3.linear,
    opacity: 0,
  })
  .to(".play_button_right", 0.2, {
    ease: Power3.linear,
    opacity: 0,
  })
  .from(".stop_button", 0.2, {
    ease: Power3.linear,
    opacity: 0,
  });

// 停止マークを表示する
var music_button = new ScrollMagic.Scene({
  triggerElement: ".music_play_svg",
  triggerHook: 0.4,
})
  .setTween(advance_music_button)
  .addTo(controller);

今回のドットを移動させるアニメーションに関しては「rect」というタグの名前で表示されていたので、SVGですし、TweenMaxで「left: 100」みたいな指定も機能しなかった。

ここはしょうがないと思ってX軸に目分量で調節して、線の延長とマッチするくらいの数字を設定して耐えています。

線の延長も「scale」で設置しちゃっていますが、センスがないかもしれないですね。。

どうすればいいんでしょうかっ考えてみます。

村木 瞬Shun Muraki
Web Designer

Neutral between linear and non-linear.

デジタルメディアのフォーマット
「Linear Native」について研究。

テーマは”リニアとノンリニアのニュートラル”