crysanthymum

<div class="jellyfish">
    <div class="arms">
        <div class="arm" style="--scaleX:1;--scaleY:1;--rotate:3;"></div>
        <div class="arm" style="--scaleX:1;--scaleY:1.1;--rotate:2;"></div>
        <div class="arm" style="--scaleX:1;--scaleY:1.2;--rotate:1;"></div>
        <div class="arm" style="--scaleX:-1;--scaleY:1.15;--rotate:0;"></div>
        <div class="arm" style="--scaleX:-1;--scaleY:1.1;--rotate:0;"></div>
        <div class="arm" style="--scaleX:-1;--scaleY:1;--rotate:-1;"></div>
        <div class="arm" style="--scaleX:-1;--scaleY:1.15;--rotate:-2;"></div>
        <div class="arm" style="--scaleX:.5;--scaleY:1.15;--rotate:-3;"></div>

crysanthymum

Jellyfish

Created for the November 2018 CodePen Challenge #codepenchallenge

A Pen by crysanthymum on CodePen.

License.

crysanthymum

mixin cameras
  .container
    - for (i = 0; i < 400; i++)
      .trigger
    .monitor
      .camera.-z
        .camera.-y
          .camera.-x
            block

crysanthymum

Howl's Moving Castle

This is a tribute to Studio Ghibli's Exhibition in Paris.

While walking through the exhibit, I learned that the castle in howl's moving castle was actually animated with a computer. I was surprised, and inspired to recreate this famous scene using web technologies that I'm familiar with, allowing the user to control the castle's movement.

I ended up biting off more than I could chew, and spending much longer than I had initially intended.

To achieve it, I cut all of the elements out of the film itself using photoshop to crop certain frames. I then inserted all of the elements directly to the DOM (no canvas) and animated them using GSAP and an epic amount of timelines. The legs' walk cycle were by far the most difficult part. I did not use any other software for the animation, just good old sublime text!

crysanthymum

#sky
  .bird
    - for (var i = 0; i < 10; i++)
      .wind
    .bird_body
      .bird_head
      .bird_wing_left
        .bird_wing_left_top
      .bird_wing_right
        .bird_wing_right_top

crysanthymum

#sky
  .bird
    - for (var i = 0; i < 10; i++)
      .wind
    .bird_body
      .bird_head
      .bird_wing_left
        .bird_wing_left_top
      .bird_wing_right
        .bird_wing_right_top

crysanthymum

#sky
  .bird
    - for (var i = 0; i < 10; i++)
      .wind
    .bird_body
      .bird_head
      .bird_wing_left
        .bird_wing_left_top
      .bird_wing_right
        .bird_wing_right_top

crysanthymum

CSS Blossoming Flowers at Magical Night

A Pen by crysanthymum on CodePen.

License.