Squarespace Seven

squarespace.com/seven

Squarespace’s latest landing page features simple, clean designs spiced up with elegant scrolling animations.

Quick Overview

You might remember my deconstruction of Squarespace’s old landing page from 2013.

Well Squarespace 7 is equally as impressive.

Features like a full-screen background video, subtle but effective parallax scrolling animations and a clean design, are the reasons why Squarespace is so popular.

Skrollr or ScrollMagic?

Keep reading to find out.

Skrollr Workshop - Premium Skrollr Tutorials - Sign Up Now!

The Interface Header

The interface section contains a full-screen video as the background and a fading out text on top of it.

How was this done?

1. HTML5 Video

There is a video clip, which is 21 seconds long, playing infinitely in the background.

File Size: 6MB
Size: 1920 × 1080

The width, left and bottom offsets are calculated using JavaScript based on the viewport size.

The .video-wrapper has a class .fill which stretches this container to the size of the viewport.

2. Video Overlay

On top of the video is a transparent overlay with a black background colour.

The higher z-index makes this appear on top of the video.

3. Introduction Text

The introduction text sits on top of the overlay and slowly fades out as the user scrolls down the page.

The fading out effect is created using Skrollr, one of the most popular parallax scrolling libraries.

Let’s explore the data-attributes that create this animation.

Skrollr Data

.text-wrapper is slowly fades out thanks to the Skrollr data-attributes.

data-anchor-target defines an HTML element which controls the timing of the animation.

In other words the position of .intro  decides when the text fades out.

data-0-top-top contains a css style applied to the text, when the top of .intro is at the top of the viewport.

data-0-top-center contains a css style applied to the text, when the centre of .intro is at the top of the viewport.

Confused by Skrollr data-attributes?

Download my Skrollr Cheatsheet here.

2. The Cover Pages

The Cover Page section is even more interesting.

It contains a creative Skrollr SVG animation of an iPad, which then seamlessly fades into a photo.

The whole effect is achieved with 5 elements (4 images, 1 SVG) and a clever use of Skrollr data-attributes.

All of the images and SVG are positioned on top of each other.

The offset is calculated by JavaScript based on the viewport size.

Here are the resulting CSS styles:

And here is the animations sequence:

  1. First Skrollr animates the stroke-dashoffset for each of the SVG paths from value in the stroke-dasharray to 0,
  2. .ipad-fade content (SVG) fades to opacity: 0 at the same time as .fill-screen animates to opacity: 1,
  3. followed by .just-screen content fading into opacity: 1,
  4. and finally the image inside of .just-screen is moved down by animating from transform: translateY(0%)1 to translateY(10%).

Pretty simple, huh?

Skrollr Workshop - Premium Skrollr Tutorials - Sign Up Now!

Skrollr Data-Attributes For SVG Animation

Now we’ll explore the SVG Skrollr animation in more detail.

Note: the above html has been simplified a lot.

Again the position of the .intro container controls the timing of the animation as defined in the data-anchor-target attribute.

Skrollr is animating stroke-dashoffset from the initial value stored in stroke-dasharray back to 0.

Here’s another image explaining how is everything layed out in the browser.

Animations start slightly after each other but finish at the same time when the bottom of .intro is at the top of the viewport.

Learn more about SVG line animations on CSS Tricks.

3. A Bonus

While exploring the html markup of these landing pages, I came across a class attribute on the head tag.

This is quite unusual, and I don’t have a clear explanation for that, maybe someone else will demystify this in the comments?

Conclusion

As you can see, Skrollr can be used to create very effective and playful animations.

Once you master the CSS positioning and Skrollr data-attributes you will be able to implement any scrolling animations you wish.

Learn more about Skrollr in my Parallax Scrolling Master Class.

Until next time, happy deconstructing.

Skrollr Workshop - Premium Skrollr Tutorials - Sign Up Now!

16 Comments

  1. Pauline
    Reply

    Very good website deconstruction. As usual, Squarespace websites are very impressive and inspirational. I follow your website since a year now, and I have learned a lot of great things. Thanks to you, Petr Tichy! :)

    • Petr Tichy
      Reply

      Thanks for reading and the support Pauline.

  2. Max Schwartz
    Reply

    Thanks for the deconstruction, Petr!

  3. jemmeli
    Reply

    hi,

    I would thank you for this great tutorial, but i try to put skrollr attributes inside my file.svg like this:

    Code has been filtered out.

    but nothing work at all i have call skrollr twice in my HTML file before ending the body tag and in my svg file.

    I could not know what is the problem at all

    • Petr Tichy
      Reply

      Hi jemmeli, can you setup a CodePen demo? There is way too many possibilities of what can be wrong with your code. Cheers

  4. Lor
    Reply

    Thank you Petr.

    Very instructive!!!

  5. Martin
    Reply

    Can you please upload files? :)

  6. Darren
    Reply

    Hi, this is wonderful. This is a similar idea that is also on squaresapce – can you recommend an example or codepen (maybe) that demonstrates what this theme does: http://rachelplatten.com/#intro. On scroll each div appears to reveal itself. Works great on mobile too. The website is on squarespace. I am using skrollr and lookign to achieve this but can’t seem to grasp how it works.

  7. Jo
    Reply

    Petr Tichy,

    Your tutorials are awesome.
    Keep doing what you’re doing!

  8. Warner
    Reply

    Hi Petr,

    Nice website, nice deconstruction. I hope to see more new articles, and as usual i’m late to the game. Anyway…

    The head class=”no-skrollr” will be removed on init and an new class named “skrollr” will be added. An extra class “skrollr-mobile” will be set when an mobile device is detected and the class “skrollr-desktop when… Well you know when. These rules allow fallback CSS rules for unsupported devices or when JS or Skrollr are disabled. You can compare it to what Modernizr does.

    Please keep new deconstructions comming. Especially the Greensock deconstruction kind.

    All the best,

    W

    • Petr Tichy
      Reply

      Thanks Warner, great info about the extra classes. I am sure it will be useful for others. I’ll do my best to start adding new deconstructions, just been quite busy with my current project and ihatetomatoes.net blog.

      I’ve started doing occasional deconstructions on Periscope, download the app and follow @ihatetomatoes or check my YouTube channel for some replays.

      Cheers
      Petr

Leave a Reply to Warner

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