Trumpdonald.org - JavaScript Animations Deconstructed

Are you wondering how was the hair effect on trumpdonald.org created? Was it SVG, WebGL or HTML5 Canvas?

Find out in this short video deconstruction.

Video

Assets breakdown

The whole scene is simply composed from a few transparent pngs, but a lot of work went into creating these assets.

For example the eyes are created from two separate elements sitting on top of each other.

This gives a very realistic effect when the user moves the mouse around the stage.

The body is a simple div with a background image. It contains two assets for the idle and active state.

The animation of the hair when the user clicks anywhere on the screen is also created using transparent image sprite.

The viewport is divided into 16 angles and based on where the user clicks, the relevant image sprite is displayed.

While the trumpet is blowing all 12 frames are revealed in a sequence.

To make the effect even more realistic, GreenSock shakes the canvas element by animating the x and y offsets between two random values.

var x = (Math.random() < 0.5) ? ['0%', xMax] : [xMax, '0%'],
    y = -Math.floor(Math.random() * 3 + 3) * 100 / 6;
tlBlow.to(hairCanvas, 0.5 / 12 * 1, {
    x: x[0],
    y: y + '%',
    ease: SteppedEase.config(1)
})
.to(hairCanvas, 0.5 / 12 * stepsNum, {
    x: x[1],
    y: y + '%',
    ease: SteppedEase.config(stepsNum)
})

The use of SteppedEase completes the whole random and realistic hair blowing experience.

Conclusion

What do you think about the Trump Donald effect and have you seen any other cool website worth deconstructing?

Let me know in the comments below.

Also I will be adding more deconstruction like this to my YouTube channel over the coming weeks.

If you don’t want to miss the new videos, subscribe to the channel.

Other Website Deconstructions

Download Free Toolkit

All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.

19 thoughts on “Trumpdonald.org – JavaScript Animations Deconstructed”

Norman Dubois February 18, 2016 at 6:08 pm

Hi Petr,
thanks for the deconstruction!
I’m excited about the next ones.
Thanks for your great work!

Reply ↓

Petr Tichy Post authorFebruary 21, 2016 at 11:45 am

Thanks heaps for your suggestions Norman, it helps a lot!

Reply ↓
1. Norman Dubois February 22, 2016 at 6:23 pm
  
  You’re welcome Petr! 🙂
  
  Reply ↓
Jaime March 2, 2016 at 6:40 pm

Is awesome how it take the angle of him eyes.
Thx you for give us a very interesting point of view from this page.

Reply ↓
1. Petr Tichy Post authorMarch 3, 2016 at 8:15 am
  
  No probs Jaime, I am glad it was useful. Thanks
  
  Reply ↓

Faris M A February 22, 2016 at 12:23 pm

Would it be possible for you to deconstruct feedmusic.com?

Reply ↓

Petr Tichy Post authorFebruary 22, 2016 at 12:47 pm

Thanks for the tip Faris! I’ll check it out. Any specific questions?

Reply ↓

Faris M A February 22, 2016 at 12:54 pm

Thanks for the reply. Apparently there is no scrollbar for the website. How do they control the scroll in the website?

Reply ↓

Radiator February 23, 2016 at 9:16 am

Great writeup, thanks! Notably loving the hair implementation details using gsap’s steppedEase method. Clever and extremely effective!

Reply ↓

Petr Tichy Post authorFebruary 24, 2016 at 9:31 am

Thanks Radiator!

Reply ↓

Patryk Smakosz February 26, 2016 at 5:12 pm

Nice, gj Petr, as always 😀

I’ve read and watched a lot of stuff here, thank you very much !

You always want some feedback and you are curious about what we are curious about 😉

So,
Have you thought about creating or sharing information about your work process?
I mean the WHOLE process – from first guides from client, sketches, ideas, planing, mockups etc 🙂
How you organize your work from coffee/tea to super animations (and how you plan them) 😀

Maybe you already have something on that topic that I missed 🙂

But I think most people are doing a lot o things upside down, me for example – I’ve watched hundreds of tutorials and yes, everyone say plan your work etc – but I’ve never had a chance to watch something really from the start. From the white canvas in brain 😉

I would be very grateful for any info on this topic 😀
Cheers!

Reply ↓

Petr Tichy Post authorFebruary 27, 2016 at 10:48 am

Hey Partyk, firstly thanks a lot for following my blog for a while and secondly thanks for the suggestion. I think that I can definitely share some of my workflow tips with you. Stay tuned on the YouTube channel.

You’ve already mentioned a few things that you want me to cover, but if there is anything else or specific, maybe related to a code editor or tools that I use, please let me know.

I want the video to be as useful for you as possible.

Cheers
Petr

Reply ↓

Patryk Smakosz February 29, 2016 at 11:49 am

Hey Petr,

Thanks! That was fast ^_^

As I mentioned it would be great to watch your work process. There’s a lot of confusion (at least I’m confused 🙂 in web development process:

1) first of all I would love to hear your opinion about Front-End Developer position – which skills are essential and which are a bonus for a potential employer.

I’m personally a graphic/motion designer with video montage and coding skills + a bit of everything and sometimes I’m just overwhelmed with this “everything” ;).

2) Do you plan your websites/animations from the start? From sketches to PSD to HTML and so on? Do you use Photoshop/Illustrator/Sketch or some other software?

If yes, please share a bit of your planning process, what things you mark as priorities on the start to make the workflow as smooth as possible, or what questions you ask your clients before starting work on a project to prevent any misunderstandings and time waste.

3) It would be lovely to watch your work on something specific – real world project based on a clients needs or a simulation of such situation.

I know usually clients don’t want to share any projects/info to the world before they are finished (and a lot that you can’t even talk about after they are finished) but maybe you have such a project that you can share with the world and client won’t be mad about it 🙂

4) How you wrap all the project details, specification, agreement to present it to client – so he can sign all the papers and everyones happy because you know what to do, client has all the info approved – and he can’t change any major stuff.

It’s a delicate topic and don’t get me wrong I don’t want an agreement template where client is obligated by law that he can’t move a finger in a design after signing the agreement.
I wonder how to present project for a client so he can imagine how the end site/animation will look like. Because probably everyone had (or will have 🙂 a client where small fixes never end and you can feel a bit of Prometheus pain…usually people don’t do this intentionally they just find somethings they haven’t seen earlier – but it’s often a pain, when you work for free and clients abuse your good will to make them happy.

It’s common stuff, and the web is full of very similar questions. But I love to learn from the best and I hope you will have a lot of fun while creating this little front-end developer starting guide so we all can better understand this wonderful profession.

If you have any questions about anything, I’m here 🙂
Wish you all the best,
Patryk

Reply ↓