cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

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!

All rights go to Studio Ghibli and Joe Hisaishi for the audio.

Comments

  1. Very impressive. Now make the little sheep move :D

  2. WOW!!!!!

    Its so smooth, love it so much. Thank you for sharing!

  3. hey @gordonnl , is there any chance to make this scalable so I can see the whole height in all it's glory? :D

  4. @simeydotme hey mate, thanks for you comments!

    The scale was pretty tricky to not leave any gaps and have it all line up while being responsive - I decided this was the best solution. The resolution that works best is actually more of a squarish ratio than fullscreen 16:9. What are you looking at it from?

  5. ahhhh, i was looking at it in fullscreen on a 16:9 monitor :) ... after making the browser half-width of monitor it's perfect!!! sorry

  6. This is my first comment on codepen. Just wanted to say this is amazing. :)

  7. @iceberg That's so nice, I'm flattered :) Thank you

  8. @gordonnl Did you visit the Studio Ghibli exhibition at Art Ludique?

  9. @radialglo Yep! That's the one. Really impressive and inspiring collection.

  10. This is great. Congrats!

  11. this is absolutely stunning.

  12. @gordonnl, I'm absolutely blown away by this. I'm glad you spent the extra time on this one, its extremely impressive. It just feels alive!

  13. Just Amazing, this is a great pen !

  14. This is awesome. The movement is so smooth.

  15. Love that you used Howl's Moving Castle

  16. beautiful inside and out! Truly impressive, thanks for sharing.

  17. AAAARRRGGGHHH this is soooo cool!

  18. Speechless. Both Howls and this pen are beautiful, amazing things :)

  19. Is it only me or images are missing :(

  20. Great job! Thanks for sharing! =)

  21. Could you show us how u did one of the legs?

  22. This is Gorgeous, thank you for this creation

  23. I'm speechless on the level of detail...Was looking at some greensock.js examples and found this...and the music....oh man....love at first listen...:D I left this open so I could listen to it in a loop btw... Thanks for sharing! Cheers! :)

  24. Amazing! I love all studio ghibili movies, i actually think its better than Disneys. I am a newly aspiring web designer. wish i can be as good as you in the near future! ;) Cheers!

  25. This is so so nice! The pen actually captures the style of Ghibli too, where often they have a striking landscape and just very few animated details to bring it to life.

    I'm working on a tribute to Miyasaki too, I'm sure you'd like it. Not done yet tho :)

    https://nerdmanship.github.io/kodamaProject/dist/

  26. this is awesome.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...