Trumpdonald.org hair effect deconstructed.

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.

Donald Trumps Eyes

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

Donald Trumps Body

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

Donald Trumps Hair

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.

100% Privacy. Guaranteed! Powered by ConvertKit

18 thoughts on “Trumpdonald.org – JavaScript Animations Deconstructed

    1. Jaime

      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. Faris M A

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

    Reply
  2. Radiator

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

    Reply
  3. Patryk Smakosz

    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
    1. Petr Tichy Post author

      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
  4. Patryk Smakosz

    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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>