Make Me Pulse

makemepulse.com

Many digital agencies create a huge website showcasing their work, history, team, departments,…etc.

All they actually need to showcase their work is an elegant one page website like this one.

Quick Overview

Another award winning site using the latest technology. The mix of GreenSock, Three.js and SnapSVG creates an elegant user experience.

This cute one pager is packed with really nice animations and transitions.

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

Pulsing Preloader

The site shows a pulsing preloaded whilst the content is loading.

How was the effect of growing and shrinking circles created?

.percent and #loader—canvas are both positioned absolute in the middle of the viewport.

draw and drawCircle functions are rendering 3 circles on the canvas element and GreenSock then animates the radius property using TimelineMax().

Please note that the above code has been uglified, probably using Grunt or a similar tool.

You might refer to this CodePen demo for more details on how to draw circles on canvas and animate them using GreenSock.

Angled Image Slider

The web is full of sliders and carousel these days, but not many of them are at an angle.

This one certainly stands out by having images in a creative shape.

Let’s uncover how the shape was put together in the following screenshot.

.work__slider--background is a white background element skewed and rotated by –21deg.

Similar CSS3 transformations are applied to .shape__dark and .about__wrap. These two containers are covering the top resp bottom of the slider.

And finally the .slider-item--left has offset top: 86px while the .slider-item--right is offset in the opposite direction top: -86px.

Pretty neat, huh?

The Blur Hover Effect

The projects slider includes a few interesting transitions.

A blurry project image appears on hover and a new set of projects slide in from the side in a nice sequence.

Here’s how the blurry image effect was created.

The blurry image is sitting on top of the sharp image, but is hidden by default.

Two functions animateProjectIn and animateProjectOut containing paused TimelineMax.

On hover the blurry image animates its autoAlpha to 1 and scale to 0.93, this gives the impression of zooming out.

Used Plugins

Conclusion

There are many other cool effects on the site and we might feature some of them in our future deconstructions.

Explore the site and uncover the beauty of other small effects throughout the page.

Until next time, happy coding.

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

6 Comments

  1. Matic
    Reply

    Uau, amazing website and really good deconstruction of that slider and hover effect. What about that 3D grid in the background? Canvas+webGL+three.js?

    • Petr Tichy
      Reply

      Thanks Matic, there is so much to deconstruct I know, maybe next time.

  2. alphaintel
    Reply

    You are awesome. Your other website, ihatetomatoes.net, is equally awesome. This website deconstruction is awesome and I look forward to the iMac Retina decon. However, I was hoping you could include live demos? I love the code pen examples, but if you could add a live demo of the slanted wow slider, this would elevate your traffic to the level of Codrops. I hope this is positive feedback. Otherwise, you are amazing Mr. T!

    • Petr Tichy
      Reply

      Thanks for the great feedback. and the demos suggestion. I’ll see what I can do about it.

  3. Thomas
    Reply

    Amazing job , is there a way to get the code for the angled slider as you did for the pulsing preloader ?

    • Petr Tichy
      Reply

      Thanks Tom, I might create a tutorial in the future on my blog. Thanks for the suggestion.

Leave a Reply to alphaintel

Click here to cancel reply.

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">