Sébastien Lempens Design

lempens-design.com

www.lempens-design.com is a one page creative portfolio of a French Web Designer – Lempens Sébastien.

This creative scrolling website is full of attention to detail and all the smooth little animations result in a very elegant user experience.

It’s definitely a site worth deconstructing.

Quick Overview

Slick one page website using jQuery, GreenSock and ScrollMagic to achieve very smooth and creative animations.

Now let’s deconstruct some of the details of the site, there is actually quite a lot to talk about.

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

Logo Animation

Most of the animations are created using GreenSock, except for the logo which is a simple animated gif.

The animation repeats every 30 seconds thanks to the following code :

It replaces the image src attribute with the same value every 30 seconds, which makes this gif animated on repeat.

Navigation Dropdown

Now let ’ s deconstruct some of the GreenSock animations and the code.

Do you like the smooth revealing of the sub navigation?

This is a code snippet which animates every subnav li item from rotationX: 89 and height: 0, to rotationX: 0 and a corresponding height.

The whole snippet is wrapped in a for loop and the delay makes every subnav item appear after the previous one.

A similar effect could also be done using the staggerTo() method.

Smooth Scrolling

Every time the user clicks on any of the sub navigation items, the browser smoothly scrolls to the relevant anchor tag.

This effect uses the ScrollTo plugin and animates the page over 1.3sec duration.

Eiffel Tower and The Clouds Animation

This was surely the first animation which grabbed your attention.

Not just because it’s the Eiffel Tower, but because the whole scene fades , rotates and is very creative.

The scene is created using multiple png on separate layers which then animate in sequence.

HTML

The HTML structure consists of plain div elements with the background image and size defined in the stylesheet.

jQuery

Here are a series of setTimeout functions responsible for the animation sequence.

Firstly all the child div elements of #illustration_france animate one after another.

Except the .cloud,.country_name which has a different animation defined in a separate function.

.cloud is also scaled down from 3 to 1, while .country_name is animated to a left offset defined in the data attribute data-posx="37”.

Catch The Train To Paris

Initially I thought that a container with a background image is animated using transform: translateX, but it’s actually the background position being changed as you scroll down which moves the train from left to right.

This is a ScrollMagic code snippet.

Defining a ScrollScene triggered when the top of .apropos-1 (article with a light grey background containing the carousel) is almost at the top of the viewport.

ScrollMagic then animates the background position from -1800px bottom which is a value defined in the stylesheet to a new offset 2000px bottom.

Slider

The slider above the train uses Slick carousel.

Heart Beat

The beating heart effect is also done using GreenSock.

.heart ing animates from scale: 1.4 to scale: 1 and repeat: -1 which makes this animation loop forever.

Used plugins:

Conclusion

This project is full of other creative animations and we could also go on forever.

I hope you’ve learned something new, please leave a comment if there is anything else on the page that you are curious about.

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

21 Comments

  1. Gonzalo
    Reply

    Hello, very useful análisis. English in not my first language.

    • Petr Tichy
      Reply

      Not a problem Gonzalo, the site is full of non english speaking readers like you. Thanks for reading.

  2. Fernando
    Reply

    Hi Petr, great idea for the less advanced developers. I learn a lot on this website. Thank you very much. Kind regards.

    • Petr Tichy
      Reply

      Thanks Fernando. Hope you’ll learn a lot.

  3. agjohnson
    Reply

    Astonishing, Petr!

    I wish you the best of lucks with this amazing repository of deconstructions.

    • Petr Tichy
      Reply

      Stay tuned for more, the one next week is pretty special:)

  4. Jlixerkun
    Reply

    Exquisite!
    Thank you very much for this deconstruction.

    I’m glad I signed up!

    • Petr Tichy
      Reply

      Thanks for the comment and signing up.

  5. Paul
    Reply

    Awesome as always Petr.

    Why do you think the setAnimLogo function was attached to the logo to delay its restart?

    This can be achieved inherently in gifA itself by specifying the delay after a frame. I used the same logo, added an additional layer above the others (a duplication of the start layer) and set its delay to 30000ms – well 3000ms actually, because I didn’t want to wait that long for proof.

    Doesn’t this have the same effect or am I missing the reason for doing it the jQuery way.

    • Petr Tichy
      Reply

      Hi Paul, thank for the support.

      As you know there is always multiple ways how to create the same effect.

      Maybe create a simple Codepen and share with others how you would approach this?

      • Paul

        Thanks for the prompt to codepen this. It is the first time I have used codepen so hope that all works as anticipated.

        http://codepen.io/anon/pen/KwJqs

        In doing the code pen I think I answered the question for myself. Sebastien’s logo does two consecutive animations of the logo a second apart, then rests for 30 seconds. So, the jQuery achieves this without the need for the animation part to be repeated in the fames of the gif. My version (adjusted ONLY to place a 30000ms delay on the last frame of Seb’s original) is set to loop forever, but only has the one pass of the animation.

      • Petr Tichy

        Great Paul, thanks for sharing the Codepen, I’m sure it will answer questions for other readers. Cheers

    • Petr Tichy
      Reply

      Nicely done Sebastien! Congrats on you creative portfolio.

  6. Evelyn
    Reply

    Firstly I wanted to say that this is a very cool project, I’m looking forward to more deconstructions!

    At risk of sounding too much like a n00b, may I suggest the following:

    – indicate what the code you are showing is written in, PHP/jQuery/whatever
    – Green sock? Uglify code? Maybe a reference page with easy to understand definitions?

    I hope my suggestions are useful.

    • Petr Tichy
      Reply

      Evelyn, thanks for your suggestions. I’ll take it on board for my future deconstructions. If you have other ideas what kind of content would be helpful for you, please let me know. Cheers

      • Evelyn

        This is great yet it feels like I’m in way over my head. Do you have any tips on how to bridge the gap between being proficient with more basic websites and this level of awesomeness?

      • Petr Tichy

        Hm, thats a tricky question, but you are on the right way if you are proficient with more basic websites. Try to challenge yourself and learn something new on every project going forward. Exploring new techniques, plugins and frameworks will get you to the level of awesomeness.

  7. Dean
    Reply

    Hi Petr, this is very helpful. Thank you so much! :)

Leave a Reply to Dean

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="">