The Nerdmanship Animation Studio

  • Home
  • The Nerdmanship Animation Studio

The Nerdmanship Animation Studio Let's animate the web! Follow us to stay updated with technology, techniques and examples of state of the art storytelling and animation on the web.

We are user experience designers gone motion designers. Everything we do is about catering to the needs of real web users and we have chosen an extremely powerful tool to do so – animation. This page is about sharing our knowledge. To animate the web – to bring life into what is dead – has the potential to entertain us, to engage us with stories, bring joy and pleasure into a task, provide clarity

and useful information, direct our attention and guide us forward, get the message across in an emotional way – essentially, make users happy. We want the world to know what we know – how to fix an extremely sub-optimal web experience and how to tap the untapped potential of user happiness. And that's what this page is about. Follow us and expect:








About:













What we can do for you:

User experience design is a holistic approach to create the best possible solution to your users in order to fulfil the goals of your business. The core idea of our craft is to infuse entertainment value in this process and through that provide more meaning, improve usability, increase engagement and ultimately boost your business. Happy users means happy clients. It's that simple. In addition to that, the solutions we provide are technologically superior – robust and performant. We can either create holistic web projects from scratch or infuse entertainment value in existing ones. Let's make the web more fun!

If you appreciate animation, you will love this. This is perfection in my opinion. Do the world a favor and share it. An...
21/11/2017

If you appreciate animation, you will love this. This is perfection in my opinion. Do the world a favor and share it. Animated short (10 m)
https://youtu.be/j800SVeiS5I

Embark on a visionary journey through the fragmented unconscious of the west, and with courage face the Shadow. From Shadow into Light. “No tree, it is said,...

✨ ⚾️ ✨This little orb had a pretty nice roll on Twitter and Codepen a few weeks ago. He was a picked project for the fro...
13/03/2017

✨ ⚾️ ✨
This little orb had a pretty nice roll on Twitter and Codepen a few weeks ago. He was a picked project for the front page, featured in Codepen Spark and got spoiled by the Twitter community with hundreds of likes and retweets. He ultimately trended as the most popular project on the platform. We're both very pleased.


The attention is super fun and some pre-launch traction is very valuable, but in this case it's still kind of secondary. This experiment was made to try out some new interesting animation techniques I've been fiddling with and to explore the process of creating fun and engaging cartoon-inspired animations for websites. In the end, I want to use similar methods to communicate the user value of clients' innovative products.


That's at least how I'm starting to frame things. Innovative tech companies always face the challenge to communicate the greatness of their products to the masses. Web-animations like mine can inform and educate potential users in a fun and effortless way from the very first second. This will increase interest, understanding, engagement, retention, conversion and all that stuff that I would be wanting myself, if I was launching a cool and smart product.


What do you think, does that make sense?


Check out the interactive animation here: http://codepen.io/nerdmanship/details/ZLoyPG/


🀄️Here's another animated and interactive Miyazaki character. This time from Spirited Away. Made for web as usual.His na...
10/03/2017

🀄️

Here's another animated and interactive Miyazaki character. This time from Spirited Away. Made for web as usual.
His name is Kaonashi. One of his hobbies is to corrupt creatures with gold. He's pretty good at it. He'll follow you around as you move the mouse.
Check it out here: https://codepen.io/nerdmanship/details/RpoYOL
❤️

😮⚡️  Some very impressive animation work and interactive storytelling about   ✨💉✨By Evan Beohm: https://twitter.com/evan...
07/03/2017

😮⚡️

Some very impressive animation work and interactive storytelling about ✨💉✨

By Evan Beohm: https://twitter.com/evanbbb

Do you remember spook?

⚡️🚀 More happy news!For the second time in a month (!!) my work got featured in the Codepen Spark – a weekly email to al...
07/03/2017

⚡️🚀 More happy news!
For the second time in a month (!!) my work got featured in the Codepen Spark – a weekly email to all Codepen members with “all the can't-miss links”. It’s incredibly rewarding that my stuff gets to inspire more people to go explore web-animation. Big thanks to CodePen!
Regardless of who creates it, I hope that we get flooded be this kind of stuff – because it feels good, makes sense and potentially adds a lot of value to both brands and users. More happy users ftw!�.
Check out the issues of Spark (also other great stuff in there!):
Issue 14 – Miyazaki experiment: http://codepen.io/spark/14
Issue 10 – Starwars experiment: http://codepen.io/spark/10
Or why not sign up and get all the goodies every week?
https://codepen.io/accounts/signup

06/03/2017

🎉 Happy news
Last summer I snatched the graphics from Firefox homepage and animated it. I sent it to them and offered them to sue my for copyright infringement.
But they didn't. Instead they loved it and we started to talk. I changed my offer from "law suit" to "use whatever you want".
✨ And they did! ✨
Yesterday the UX lead sent me their thanks and a link to their new onboarding experience.
I'm proud of the contribution and super happy to see big industry leaders recognise the value in bringing web experiences to life!

Hello friends,❤️ Lots and lots of updates I haven't had time to share with you yet. Stay tuned (don't turn the k**b on y...
03/03/2017

Hello friends,

❤️

Lots and lots of updates I haven't had time to share with you yet. Stay tuned (don't turn the k**b on your radio) for oodles and oodles of tasty updates!


First one out is an interactive animation dedicated to the brilliance of Hayao Miyazaki and a blog post about the thoughts I had while creating it.


Animation: http://codepen.io/nerdmanship/pen/xgmBKg/

Blog post: http://codepen.io/nerdmanship/post/miyasaki-ghosts-and-performance-trolls


Very blessed to see both works being selected and published on the front page of codepen!

What I love more than observing beauty in this world, is that extra layer of magic that happens when someone else observ...
05/02/2017

What I love more than observing beauty in this world, is that extra layer of magic that happens when someone else observes it and let me see it thru their eyes.

This little gif is just marvellous!

🙌  Wow, I’m so grateful for the attention and appreciation we’ve got from the creative coding community this week, helpi...
13/10/2016

🙌

Wow, I’m so grateful for the attention and appreciation we’ve got from the creative coding community this week, helping us to smash our own past records in reaching out to people.

The last experiment that we shared was picked up and published on the front page of Codepen.io, which is a huge deal to us. From there it just took off generating thousands of views and a bunch of likes, forks and followers, which in turn brought us to the top list of most popular projects, where it's still growing as we speak.

We’ve also seen a new record in likes and retweets on Twitter and the icing on the cake is that the creator of GSAP (the animation framework that we use) shared our project and gave thanks for "making such a good use of the tools".

This acknowledgement is like a high five to my dreams! It means a greater confidence to keep pursuing them and inspire others to do the same. It means that the word of our services to web users is slowly getting out there, and that a new more fun and useful web is on the rise!

These experiments are not made for the attention, but I want you to know that each and every little like, share and comment brings joy and energy into the work.

13/10/2016

Have you ever wondered why simple but captivating storytelling like this haven't made it to the web?

Our mission is to change that.

Why? Because joy tingling from your gut, around and along your spine and up to your head is a pretty cool thing.

10/10/2016

👆

Kinetic type is the mix of text and motion. If done right, the reading experience comes to life with story and emotion. The message is no longer only in the text, but in the imagination of the user.

This one was so much fun to build! It's pure Javascript dynamically generating over 1000 independent elements, animated with GreenSock, built on CodePen and it weighs only 3 Kb (!!).

It’s fully interactive, so don’t just watch the video – click the link and play with it!
https://codepen.io/nerdmanship/details/WGzGVy/

Read my thoughts on it in the info box (in the link).

Thanks for liking, it means a lot!

27/09/2016



This quick experiment was inspired by the amazing last scene of the classic surf flick 'The Endless Summer' from 1966.

100% code!

Check the experiment here: http://codepen.io/nerdmanship/details/bwWrXg/
Read the description if you wanna have my thoughts on performance.

💀  This is Bob.Bob knows things. Smart and important things. Complicated things that you can’t even understand. Bob has ...
26/09/2016

💀

This is Bob.

Bob knows things. Smart and important things. Complicated things that you can’t even understand.

Bob has many friends. He’s really popular. Many crabs wanna be his friend. Almost all crabs do. But Bob doesn’t need any friends. Because Bob’s got his own back.

Some crabs can be hard to trust, you see. You can’t trust crabs. Most crabs can’t be trusted. But that’s not a problem. Because Bob only trust one crab – and his name is Bob.

Bob’s a fighter, Bob’s a winner, Bob’s the top dog. You better recognise. Unless you wanna get… *snap snap* …pinched!



If Bob knew how powerful he is, he wouldn’t feel so inferior, and he wouldn't behave like such a little dick.

He doesn’t know it, but he’s a vector graphic, which basically is a collection of geometrical shapes defined by code.

And because he is, any component or property of his little code body can be manipulated by other code. And that’s what we do.

With programming, we can move his legs, raise his eyebrows or dilate his pupils.

With storytelling, we can give him personality, a history and a purpose.

When we do, Bob comes to life. And that’s really cool!

🙌  The mission we're on here is primarily to promote web animation as such. There is so much potential in it, so why not...
21/09/2016

🙌

The mission we're on here is primarily to promote web animation as such. There is so much potential in it, so why not use it more to make the web a little more fun, right? Obviously, we wanna look good while doing it, but the greater cause is to drive the change.

The experiment we shared a few days ago was very well received by the people of internet, including the good people at Firefox.

If you didn't catch it last time, check it here: http://codepen.io/nerdmanship/

To this cause that's especially important for two reasons:

One, they don't want to sue my ass for using their stuff and brand, so I can keep focusing on exploration.

And two, the validation and acknowledgment from key-players in the biz simply confirms, to them as enablers and to us as creators, that web animation is – in fact – a great UX tool to improve the web. It also kind of achieves that effect of people thinking "Hey, if those guys like it, then that animation stuff must be pretty good, right?". And all of this will speed up the change!

Thanks to Firefox, Ty Flanagan (Creative Lead) and Sevaan Franks (Sr Interaction Designer) for reaching out. It makes me feel like we're on to something! More experiments to come!

And thanks for being a part of this, reader!

😃  Hey, isn’t this how websites should load?There’s so much potential in the first impression of websites – how it load...
19/09/2016

😃

Hey, isn’t this how websites should load?

There’s so much potential in the first impression of websites – how it loads and how we enter. This new experiment is a quick study in just that. Firefox have an awesome site already, but we explored how to use animation to take it one step further.

Follow the link to see it in all its glory. And don’t forget to read the info box, where I reveal the secret that this animation actually sucks ass.

http://s.codepen.io/nerdmanship/debug/rrrajP

🤖   Hey Nerds,What better way to soft-launch our page than to share a post about the core software that enable ...
31/08/2016

🤖

Hey Nerds,

What better way to soft-launch our page than to share a post about the core software that enable us to explore the new depths of web animation?

✨ The Greensock Animation Platform (GSAP) ✨

Have you ever tried 2D animation in Adobe After Effects? Have you ever made a basic website? If so, you're gonna love GSAP, because it allows you to make really interesting animations straight in the browser with very little code. The animations you create can provide an immense amount of emotion and life to your web projects – making all the difference for your users.

We are believers, nay... missionaries, nay... worshipers of Greensock!

If you have the slightest interest in animation, javascript or just enjoyable web experiences you should check out the presentation video on their website, "What is GSAP (in less than 90 seconds)".

www.greensock.com

If you have tried it, please share what you think!



Like their page: GreenSock

Let's animate the web!

Ultra high-performance, professional-grade animation for the modern web using javascript. The new standard for HTML5 animation.

Address


Alerts

Be the first to know and let us send you an email when The Nerdmanship Animation Studio posts news and promotions. Your email address will not be used for any other purpose, and you can unsubscribe at any time.

Videos

Shortcuts

  • Address
  • Alerts
  • Videos
  • Claim ownership or report listing
  • Want your business to be the top-listed Media Company?

Share