Scrollytelling transforms a longform story into an interactive experience. Audio and visual content adds a deeper layer of meaning, communicating what can’t be captured with words alone. Scrollytelling rolls out the details of a story in an engaging way to keep people reading. It uses what’s great about the web to tell compelling stories.

Scrollytelling: when you want to tell a story rich in details

Scrollytelling is especially well-suited for a story with a distinct chronology. As events unfold, you can use the design to make the who and what come alive. Scrollytelling can heighten a story and hook you into its narrative. Borrowing from one-page and landing-page layouts makes the details dance and prompts you to scroll further.

We’ve gathered some of the best examples of scrollytelling and resources to help you create your own.

Snow Fall: The Avalanche at Tunnel Creek

snow fall new york times

Snow Fall: The Avalanche at Tunnel Creek is a scrollytelling masterpiece. It’s the harrowing tale of a Washington avalanche in 2012. Each part of this story has its own individual page, broken into manageable blocks.

It’s a compelling read with accompanying audio and visual media to offer a much bigger picture of what happened on that tragic day. Not only do we get to read the stories of those involved, we also get to learn about the terrain and weather conditions that led to this avalanche. 

It’s a multimedia approach to storytelling that unpacks what went wrong and what pushes thrill seekers to careen through untouched powder, despite its dangers.

avalanche at tunnel creek

Millennials are screwed

millennials are screwed huffpost

Okay, Gen Xers. I know we’ve all made jokes about millennials — avocado toast, Coachella, and the word “literally” all make for easy fodder. But this generation actually does face some heavy challenges. Millennials are screwed shows us the world through the eyes of this younger demographic to get a clear picture of what they’re up against.

Told by a millennial himself, the story combines humor with concrete information about the financial struggles they face. There’s plenty of humor combined with the sobering realities of this generation. 

The story is told with the help of nostalgic video-game animations, pixelated graphics, and other wacky visuals. It captures the quirky sensibilities of millennials while remaining accessible to those bewildered by SpongeBob SquarePants memes. 

One can’t help but have more compassion for millennials after reading this essay. It’s a good example of using smart, interesting web design to connect with a larger audience.

huffpost millennials are screwed gif

UTC is enough for everyone… right?

For most of us, the subject of universal time codes (UTC) isn’t a particularly compelling topic. But Zach Holman created a website explaining how they work and the complexities of programming with them. His site includes plenty of wit and the occasional, creative use of profanity. 

There are pleasing shifts in color and monochromatic background videos that break up the content. It’s offbeat, but not off-putting. The mesmerizing clash of colors grabs your attention and keeps you wondering what dazzling visuals will come next.

Anyone who’s read any sort of technical programming piece has probably been lulled to sleep. This essay proves that creativity and great storytelling can bring even the driest of topics to life. For those not interested in programming, the information on time is a fascinating read.

zach holman utc

Web design and art history

web design art history

Scrolling through our very own Web design and art history piece is like spending time at a museum. Each section is like a gallery branch, curated works showcasing the breadth of a given art movement. Here, the evolution of art is explained. 

Since web design and the visual arts share a common language, a familiarity of art history can inspire and inform your own work. We went all out writing informative content and including beautiful visuals and animations. If you’re interested in art and design, this essay is a fantastic primer.

webflow web design art history gif

The History of the Web: Interactions 2.0

interactions 2.0

Scrollytelling breaks away from the confines of traditional storytelling and uses good web design to get creative. 

Our Introduction to Interactions 2.0 takes you from the beginnings of the web to “a 100% visual way to build animations and interactions for the web, pushing the limits of what can be built without code.” The site includes so many delightful, cheeky references to Geocities. Oh, how far we’ve come!

interactions 2.0 gif

Time in Perspective

time in perspective

Scrollytelling is the perfect medium to tell a linear story — and what’s more linear than the march of time? From 24 hours to the end of the universe, the scroll triggered animations in Time in Perspective stretches the timeline, reveals milestones, and shows how each era fits into history. This is a great example of using web design for more than just marketing. Design is a powerful tool to educate in innovative ways.

time in perspective gif

If the Moon Were Only 1 Pixel 

if the moon were 1 pixel

If the Moon were only 1 pixel is a horizontal scroll that rockets you through the vastness of the universe. Josh Worth made the site after struggling to explain to his daughter how long it would take to get to Mars, wondering if he could use a computer screen to map out space. The site does a beautiful job of focusing on the emptiness of space, helping us understand just how far-reaching our universe is. Josh used a single pixel to represent the moon and shows everything in relation to it. 

This project is another brilliant example of how good design can make learning engaging.

Josh worth moon gif

Islamic State Tracker

Washington post islamic state tracker

There’s so much news that comes our way. And with this mass of information, it can be hard to stay current. The Islamic State Tracker from the Washington Post shows the history and current developments of the Islamic State.

The right side of the screen scrolls through a timeline of stories while a map on the left side of the screen highlights where they happened. Clicking points on the map brings you to the specific story of that location. Mapping the location to each event gives a more in-depth picture of each region.

Washington post islamic state tracker gif

Ali Wong Structure of Stand-Up Comedy

ali wong stand up comedy

Mark Twain may have famously said, “Explaining humor is a lot like dissecting a frog, you learn a lot in the process, but in the end you kill it.” But sadly, for old Samuel Clemens, he didn’t get to see the digital age.

We talked earlier how scrollytelling can be used for stories that have a strong timeline. A comedy performance is a narrative where pacing and buildup matter as much as the actual jokes.

Ali Wong Structure of Stand-Up Comedy is an analysis of Ali Wong’s recent comedy special, Baby Cobra. It’s analyzed moment by moment, joke by joke, to show where the biggest laughs are. It’s a fascinating study in how timing and set up are key to land effective punch lines, and gives us insight into what makes Ali Wong such a brilliant writer and performer.

Scrollytelling tools

We’ve seen how scrollytelling can be used to tell different types of stories, and some of the design practices they incorporate. To help get you started with your own scrollytelling, we’ve gathered some tools to help you out. Webflow is the perfect choice for your design work if you wanted to try it out while you’re at it.

Parallax movement on scroll

Elements that move at different speeds as someone scrolls is a way to create the illusion of depth. Parallax is a simple effect to create dimensionality and movement in your story, prompting people to keep moving.

We used parallax scroll for these geometric shapes in “Web design and art history.”

parallax movement on scroll

Check out this parallax tutorial to get started on your own.

Scroll progress indicator

scroll progress indicator

Using a scroll-triggered progress bar in your design is a way to show people where they’re at and keep moving them forward. This blue progress bar stays anchored to the top of the page with a smooth animation that stretches out from 0 to 100% of the layout. It adds motion to the design and makes for better navigation.

Check out our scroll progress tutorial to learn how to create your own in just a few steps. 

Reveal elements on scroll

When a design has too much static content, it can be tiring to read. With scrollytelling, where longform stories are being told, animations offer a nice break from text and photos. The fade of visual elements adds a burst of motion.

The effect can be applied to text or visuals. We use this effect in our Graphic design archive, signaling the beginning of a new block of content.

webflow graphic design archive

Should you reveal elements in your own design work? Definitely! Check out our tutorial to learn how.

Horizontal movement on scroll

horizontal scroll webflow tutorial

Whenever you have a design element that’s sitting idle on the page, like a title, why not give it some pizazz? Horizontal movement wakes up these sleepy design elements and gives them purpose. Take the above example above from our tutorial. The horizontal movement signals the start of the story and makes “Let’s Go Outside” have more of an impact.

It’s easy to do — check out our tutorial on creating your own horizontal movement effect.

Horizontal scrolling

Horizontal scrolling can be a nice change. It brings attention to your content and breaks free from a typical vertical layout. 

Proud and Torn, a website about Hungarian history uses horizontal scrolling to highlight the different eras it covers.

proud and torn homepage

And to refer back to our own art Web design and art history piece discussed earlier — we use horizontal scrolling as another way to keep people active and engaged.

webflow art history

Our tutorial on horizontal scrolling will get you started on using it for your own design.

Position sticky

the pudding position sticky

From the Pudding, the same website that created the Ali Wong comedy piece, comes this tutorial about creating a position sticky effect. Position sticky takes an element and stations it in a design temporarily, bringing attention to it. After a bit more scrolling, it’s then released from its position. We’re fans of tutorials that break a process down in an easy to understand way. And it’s all done through scrollytelling.

position sticky effect

Creating a sticky sidebar

Okay, so we just talked about a position sticky. But what about making a sticky sidebar? 

After a bit of a scroll, the sidebar takes a set position. You could use it to contain navigation to other parts of a story, or to different parts of the website.

Transforming a sidebar into a sticky sidebar isn’t too complicated. Take a look at this quick tutorial to put the power of a sticky sidebar into your own designs.

Web design lets you tell a story in more imaginative ways

The web has transformed storytelling. With animations, visuals, and interactivity, reading a story no longer needs to be passive. Scrollytelling is a multimedia experience, provoking deeper thought and understanding. It illuminates what can’t be communicated by words alone and makes the reader an active participant.

Inspired to tell a story of your own through scrollytelling? We’d love to hear about it in the comments.


Today’s web can be accessed via a multitude of devices, of all shapes and sizes, on network speeds ranging from 2G 0.3mbps all the way to 5G 10gbps. With such a wide variety of internet users out there, how fast a website loads is more important than ever.

This first part of a two-part series will introduce you to the world of front-end performance optimization. We’ll discover why front-end performance matters, how to measure your web application performance, and what tools you should use to collect these relevant metrics.


Get comfortable, grab a cup of tea and let’s get started!

Good web performance is an essential ingredient for any website serious about achieving its goals.

Front-end performance has a significant influence on the following key factors:

  • Retaining website visitors
  • Improving conversion
  • Increasing organic traffic
  • Saving users money

Retaining visitors to the website

If a user were to visit a website and it’s loading slowly, they’re likely to grow frustrated because they aren’t able to do what they came to do. This problem can be compounded by the user’s connection speeds. (Find out which old browsers your users are still using are worth supporting)

On a blog, users need to be able to read the posts. On an e-commerce website, users need to be able to browse and buy things. If a user isn’t able to engage with the website, rather than pressing ahead, it’s more likely they’ll just go elsewhere.

front-end performance
The above timeline shows how the loading speeds for sufc.co.uk (a relatively unoptimized website) can differ dramatically across different connection speeds. Full timeline available at share.lukeharrison.dev/filmstrip-full.png

In these real case studies, can you guess the impact good performance (or lack of) has on user experience?

Improving conversions

When a business builds a website, its goal is ultimately to generate revenue by converting website visitors into paying customers. The success of this can be helped by good web performance, and equally hindered by poor web performance. If pages are slow to load, it’s going to impact the users’ shopping experience and increase the likelihood of them going elsewhere.

Here are a few more case studies. Can you guess what impact web performance has on conversion metrics?

Increasing organic traffic

In 2010, Google announced site speed was now a factor in how their algorithm ranks websites on desktop searches. Later, in July 2018, a further speed update was released which extended this behavior to mobile searches as part of their mobile-first indexing project.

Essentially, this means a slow loading website can hurt your organic search rankings on Google. By focusing on improving your site speed, you’re not only improving the user experience but helping them to discover your website in the first place. A win-win, and something we know works, as you’ll see in the case studies below:

The median size of websites has been steadily increasing year on year, with the current median page size (in megabytes) being as follows: 

Page Size (In megabytes) – May 2019

Median Desktop

Median Mobile



75th Percentile Desktop

75th Percentile Mobile



Did you know, the original DOOM is only 2340kb (or 2.3mb)? This puts the growing size of websites into perspective. 

Let’s compare some of today’s popular websites against this classic video game. Here’s some appropriate music for the next section.


DOOM vs The Guardian


DOOM vs MailOnline




DOOM vs DOOM’s website


Thanks to the handy tool at whatdoesmysitecost.com, we can estimate how much this will cost. As per the website:-

“Prices were collected from the operator with the largest market share in the country, using the least expensive plan with a (minimum) data allowance of 500 MB over (a minimum of) 30 days. Prices include taxes. Because these numbers are based on the least expensive plan, they are best case scenarios.”

Using this data, we can estimate how much it would cost to visit CNN’s homepage on “pay as you go” plans:

CNN.com Website Cost (Top 5)


Cost ($USD)

Canada ??


Japan ??


Brazil ??


Germany ??


United States ??


United Kingdom ??


Source: https://whatdoesmysitecost.com/test/190623_CQ_fd39240f3e59f96708d2a158fc5580b6

Clearly, front-end performance can have a significant impact on your profitability and customer satisfaction. To improve front-end performance, and by extension, these important measures, understanding how to first measure front-end performance using appropriate metrics is a must.

For more front-end tips and tricks, subscribe to our monthly newsletter.

How do you measure good front-end performance as a developer? What are the most common metrics in use? What front-end performance optimization tools should you use? What are the best front-end performance optimization techniques to learn? Let’s find out!

Common Performance Metrics

These are metrics which many of the top web performance tools (more on these later) use to gauge how fast a website loads.

Time to First Byte

This metric is used to measure the responsiveness of a web server. So when you visit a website, how long does it take the webserver to respond to requests made by the browser. Bad server config or poor back-end coding would be responsible for poor performance in this metric, rather than front-end code. (Have you considered going serverless to enjoy the benefits?)

First Contentful Paint

First contentful paint is a metric measuring from typing in the URL and keying enter to the point where the browser starts to render the first bit of visible content. Think of it as the time spent on the blank, white loading screen before the website loads the first bit of content.

First Meaningful Paint

This is another paint-oriented metric that measures how long it takes a browser to render the majority of above the fold content, including any web font dependencies (Google fonts, Typekit, etc) the website has. Think of this as how long it takes the browser to load something recognizable and expected.

Speed Index

Speed index measures generally how long it takes for all of the pages content to become visible during load. The lower the speed index metric, the better the website’s performance. Specifically its perceived loading time.

First CPU Idle

This metric measures when a web page becomes minimally interactive, in that users can begin to use some – but not all – on page UI components and have them respond to input and actions in a reasonable amount of time.

Time to Interactive

This is very similar to the First CPU Idle metric but requires a more complete level of page interactively. For this to trigger, a page must display the majority of its useful content and register most of the page’s event listeners. In addition, any user input or actions must be responded to within 50 milliseconds.

Estimated Input Latency

Estimated Input Latency measures how long your website takes when responding to any user input. It’s measured in milliseconds and during the most intensive 5s of page load. If this latency figure is over 50 milliseconds, this may result in laggy interactions for the user.

Last Painted Hero

This metric tracks how long it takes for the more important elements of the page to render. In a typical page layout, not all elements are created equal because as designers, we want to guide the user down a certain journey. Depending on the tool, this may be triggered when the biggest image is rendered, or the headline text in a

for example.

Document Complete

Document complete tracks the time it takes for the browser’s onLoad event to fire, which happens when all static assets, such as images, CSS, JavaScript have loaded. This is a useful metric to get an overview of how fast a website is loading.

Fully Loaded

This isn’t too dissimilar from the document complete event, except that it factors in any asynchronous activity which occurs (via 3rd party scripts) after the browser’s onLoad event has come and gone. Typically a measurement is finally captured when network activity has ceased for around 2 seconds.

This is useful because it allows you to get an idea of the impact 3rd party scripts are having on a website’s loading, which is something the Document Complete metric typically wouldn’t cover.

There’s plenty of front-end performance tools out there – free and subscription-based – which allow you to audit the performance of your website and collect metrics covered in the previous section. However, these 2 stand above the rest. They are Google Lighthouse and WebPageTest.

Google Lighthouse


Google Lighthouse is a tool for running performance audits of a website. It generates an easy to read report featuring data for many of the metrics covered previously, as well as a list of suggestions for improving them.

One of it’s most useful features is the scoring system it applies to your website’s performance and other metrics, based on a 0-100 scale. This makes it easier for devs to communicate performance learnings with non-technical project stakeholders, as there’s no prerequisite knowledge required – just the ability to recognize that the higher the performance number, the better.

front-end performance
You can also run Google Lighthouse directly in Chrome, via opening the web tools interface and selecting the “audits” tab. Happy testing!

Lighthouse can be run straight from Dev Tools (Above), via the web (via Pagespeed Insights), via the terminal or programmatically as a NodeJS module (Docs).

Pros of Lighthouse

  • Lighthouse has a shallow learning curve as it’s designed with simplicity in mind. It’s very much the perfect gateway into the world of web performance auditing.
  • Useful for generating sharable reports with stakeholders and other non-technical folks.
  • Lots of different options for using Lighthouse via the browser, the web, terminal or via Node. This flexibility means it can slot into any workflow.
  • Because Google is often at the forefront of web performance, you can have confidence that any recommendations for improvement covered in the audit are up to date and technically sound.

Cons of Lighthouse

  • If running online via PageSpeed insights, test results don’t persist, so it’s your responsibility to save the findings via exporting them manually or using another service which saves them for you.
  • Not necessarily a con, but when doing regular Lighthouse tests to track performance over time, it’s better to run them from PageSpeed Insights, as this guarantees that tests will always run using the same baseline environment. If you were running these locally via DevTools, a test run using the latest MacBook Pro VS an older Windows laptop may yield different metrics, as these are reliant on what local system resources are available.
  • It’s unclear where the tests are being run from. They may be run locally, or they may be run from the other side of the world. It’s useful to know because, in order to emulate a true customer experience, you need to run tests from similar geographical regions in order to simulate connection speeds, etc.


front-end performance

Whilst Google Lighthouse is great for generating performance audits that are digestible by less-technical users such as stakeholders and marketers, Webpagetest is geared exclusively towards the web performance engineers themselves.

It captures a huge amount of data per test, from individual metric timings, recordings of the webpage loading, timelines showing the page’s requests, to even Google Lighthouse reports.

Webpagetest Tips & Tricks

Metric Medians

Set “Number of tests to run” to 5, as this gives you a set of medians for metrics, avoiding data misrepresentation if one test happens to run when your server is having a bit of a hiccup.


Bulk Testing

Adding a ?bulk=1 to the URL like https://www.webpagetest.org/?bulk=1 enables an extra tab option called “Bulk Testing”. Here, you can automate the testing of multiple URLs, one after the other.


Repeat View

When running tests, always select “First View and Repeat View”. The first view simulates how the website performs when a user is visiting it for the first time, whilst repeat view tests just that. The reason we test repeat views is that this gives insight and metrics around how your website’s caching and service worker strategies are performing.


Test from an appropriate location

When running tests, always select a server location that is relevant to the customer base your targeting. For example, if you’re a UK based company with a customer base there, you’re not getting an accurate report of how those users are experiencing your website if you’re running a test using a server in sunny California.


Pros of Webpagetest

  • When you run a test, the results are saved forever. This means you can share the URL with the confidence that anybody will be able to view it at any time.
  • It’s all free, so you don’t have to pay to unlock new features. Everything is available and it’s glorious.
  • There’s no rate limiting when you register, so you can run as many tests as you need without a mandatory timeout.

Cons of Webpagetest

  • Because Webpagetest is so popular, sometimes a queue of tests can form which can get pretty long. In this instance, you either go and make a cup of tea ☕️ and wait it out or test from a different, less popular server.
  • Webpagetest has a steep learning curve, so don’t be surprised at first if you’re a little overwhelmed with the huge volume of data you’re presented with once the test is complete. Practice makes perfect, and if not, there’s a good book to help you along the way.

This article should help you understand why it’s important to spend project time on improving the front-end performance of a website. 

Now you know how to measure and understand a website’s current performance, in the upcoming part 2 of this series, I’m going to follow up with a breakdown of some of the recommended front-end performance optimization techniques you can use to improve it. Stay tuned!

Don’t miss out on part two with more front-end performance tips.