a-beginner’s-guide-to-scrollytelling

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.

109 comments

  1. I’m gone to inform my little brother, that he should also go
    to see this website on regular basis to take updated
    from most up-to-date news.

  2. Great article! That is the kind of info that are supposed to be shared around the
    net. Disgrace on Google for not positioning this publish upper!
    Come on over and talk over with my web site .
    Thank you =)

    My blog post IQ SuperCharger

  3. Its such as you learn my mind! You seem to understand so much
    about this, like you wrote the e-book in it or something.
    I think that you just could do with some p.c. to drive the message house
    a little bit, however instead of that, that is magnificent blog.
    A great read. I will definitely be back.

    Feel free to visit my blog post: Pure Remedy CBD (http://www.comptine.biz)

  4. Undeniably imagine that which you stated. Your favourite reason seemed to be on the internet the
    simplest thing to be mindful of. I say to you, I certainly get annoyed while other people think about worries
    that they plainly don’t realize about. You managed to hit
    the nail upon the highest as smartly as defined out the entire thing with no need side-effects ,
    folks can take a signal. Will probably be again to get more.

    Thank you!

    Feel free to surf to my page :: Syner Sooth CBD Review

  5. hello there and thank you for your information ? I’ve definitely picked up something new from right here.
    I did however expertise some technical issues using this site, since I experienced
    to reload the site a lot of times previous to I could get it to load correctly.
    I had been wondering if your hosting is OK? Not that I am complaining,
    but slow loading instances times will often affect
    your placement in google and could damage your high-quality score if advertising and
    marketing with Adwords. Anyway I am adding this RSS to my email and can look out for a lot more of your respective intriguing content.
    Make sure you update this again very soon.

    Feel free to surf to my homepage; Glacier Air Conditioner Review

  6. I actually still cannot quite think that I could possibly be one of those studying the important points found on your
    blog. My family and I are truly thankful on your generosity and for presenting me the potential to pursue our chosen profession path.
    Thank you for the important information I acquired from your web page.

    my web-site; Nature Fused Cream Reviews

  7. Hello, I think your site might be having browser compatibility issues.
    When I look at your website in Safari, it looks fine but when opening in Internet Explorer,
    it has some overlapping. I just wanted to
    give you a quick heads up! Other then that, wonderful blog!

    Here is my website; Keto Complete Reviews

  8. An outstanding share! I’ve just forwarded this onto a coworker who was doing a little homework on this.
    And he in fact ordered me dinner simply because I found it
    for him… lol. So allow me to reword this…. Thank YOU
    for the meal!! But yeah, thanks for spending some
    time to talk about this matter here on your internet site.

    my web-site; Oracle Leaf CBD Review

  9. Simply wish to say your article is as astounding.
    The clarity to your put up is just spectacular and i can suppose you’re knowledgeable
    on this subject. Fine together with your permission let me to seize your RSS feed to keep updated with imminent post.

    Thanks a million and please continue the enjoyable work.

    Here is my web blog; Syner Sooth CBD Review

  10. Hi there just wanted to give you a quick heads
    up. The words in your article seem to be running off the screen in Ie.
    I’m not sure if this is a format issue or something to do with internet browser compatibility but
    I thought I’d post to let you know. The design and style look great though!
    Hope you get the issue resolved soon. Kudos

    Feel free to surf to my blog post IQ SuperCharged

  11. I am really inspired with your writing skills as smartly
    as with the format in your weblog. Is this a paid topic or did you customize it yourself?
    Either way stay up the excellent high quality writing, it is rare to see a great blog like this one these days..

    Also visit my webpage … Keto BHB +

  12. With havin so much written content do you ever run into any
    issues of plagorism or copyright infringement? My website has a lot of completely unique content I’ve either created myself or outsourced but
    it appears a lot of it is popping it up all over the internet without my authorization.
    Do you know any techniques to help reduce content from being
    stolen? I’d definitely appreciate it.

    Feel free to visit my site Green Flame CBD Gummies

  13. Its such as you learn my mind! You appear to grasp
    a lot about this, such as you wrote the e-book in it or something.
    I believe that you just could do with a few percent to force the message house a bit, however instead of that, that is fantastic blog.
    An excellent read. I will certainly be back.

    My webpage … http://www.incrediblemedya.com

  14. Hi! I’m at work surfing around your blog from my new iphone 3gs!
    Just wanted to say I love reading your blog and look forward to all your posts!

    Carry on the superb work!

  15. Hi there just wanted to give you a brief heads up and let you know
    a few of the images aren’t loading correctly. I’m not sure why but I think its a linking issue.

    I’ve tried it in two different internet browsers and both show the same results.

  16. Wow, superb blog layout! How long have you been running a blog for?
    you made running a blog look easy. The whole look of your web site
    is wonderful, as well as the content material![X-N-E-W-L-I-N-S-P-I-N-X]I simply could not leave your site
    before suggesting that I extremely loved the usual information an individual supply for your visitors?
    Is going to be again steadily to check out new posts.

    My webpage … http://kanmoulue.com/forum.php?mod=viewthread&tid=225841

  17. Write more, thats all I have to say. Literally, it seems as though you relied
    on the video to make your point. You obviously know what
    youre talking about, why throw away your intelligence on just posting videos to
    your weblog when you could be giving us something enlightening to read?

    Review my homepage: Bio Wellness CBD Gummies

  18. Hey, I think your site might be having browser
    compatibility issues. When I look at your blog site in Chrome, it looks fine
    but when opening in Internet Explorer, it has some
    overlapping. I just wanted to give you a quick heads up!
    Other then that, great blog!

  19. I liked up to you’ll receive carried out right here.
    The sketch is attractive, your authored subject matter stylish.
    nonetheless, you command get got an nervousness over that you want be handing over the following.

    sick certainly come more beforehand again as exactly the same just
    about a lot ceaselessly inside of case you protect this
    increase.

    Here is my web site … Infinuity CBD Reviews

  20. This is the perfect site for anybody who wishes to find out about this topic.
    You realize so much its almost tough to argue with you (not that I actually would want to…HaHa).
    You certainly put a new spin on a topic that’s
    been discussed for many years. Great stuff, just great!

  21. Hi! I know this is somewhat off-topic however I had to ask.

    Does operating a well-established blog such as yours take a large amount of work?
    I am brand new to writing a blog but I do write in my diary
    on a daily basis. I’d like to start a blog so I will be able to share my own experience and thoughts online.
    Please let me know if you have any kind of suggestions or tips for
    new aspiring bloggers. Thankyou!

  22. Hi I am so delighted I found your weblog, I really found you by error, while I was researching
    on Yahoo for something else, Regardless I am
    here now and would just like to say cheers for a tremendous post and a
    all round entertaining blog (I also love the theme/design), I don’t have time to browse it all at the moment but I have saved it and also
    included your RSS feeds, so when I have time I will be
    back to read much more, Please do keep up the
    great jo. scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  23. This design is wicked! You definitely know how to keep a reader amused.
    Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Great
    job. I really loved what you had to say, and more than that, how you presented it.
    Too cool! cheap flights http://1704milesapart.tumblr.com/ cheap flights

  24. I was just searching for this info for some time. After six hours of continuous Googleing, finally I got it in your site.
    I wonder what is the lack of Google strategy that don’t rank this type of informative
    websites in top of the list. Generally the top web
    sites are full of garbage.

    My website :: hair growth

  25. I do not even know how I ended up here, but I thought this post was great.
    I don’t know who you are but certainly you’re going to a
    famous blogger if you are not already 😉 Cheers!

    Here is my webpage; 163.30.42.16

  26. Hi there, just became aware of your blog through Google, and found that it’s truly informative.
    I am going to watch out for brussels. I’ll appreciate
    if you continue this in future. A lot of people will be
    benefited from your writing. Cheers!

    Visit my web-site: Janna

  27. Hi there! This post couldn?t be written much better!
    Reading through this post reminds me of my previous roommate!
    He continually kept preaching about this. I most certainly will forward this post to him.
    Pretty sure he’s going ways to boost libido have a great read.
    I appreciate you for sharing!

  28. Very nice post. I simply stumbled upon your
    weblog and wished to mention that I’ve really enjoyed surfing
    around your weblog posts. In any case I’ll be subscribing in your rss feed and I am
    hoping you write again very soon!

    Here is my web blog … Kendrick

  29. Hi there, just changed into alert to your blog thru Google, and found that
    it is really informative. I am gonna watch out for
    brussels. I’ll be grateful for those who continue this in future.
    Numerous other people will likely be benefited from your writing.
    Cheers!

    my web site foroagua.com

  30. Thank you for any other informative website. The place else may just
    I am getting that type of info written in such a
    perfect method? I’ve a mission that I’m simply now running on, and I
    have been at the look out for such info.

    Review my page atkins induction

  31. Hiya very cool site!! Man .. Excellent .. Wonderful .. I’ll
    bookmark your site and take the feeds also…I am happy to search
    out so many useful info right here in the submit, we need develop extra techniques on this regard, thank you
    for sharing.

    Feel free to surf to my web-site; Leandro

  32. I am really inspired along with your writing abilities as
    smartly as with the format in your blog. Is that this a paid subject or
    did you customize it yourself? Anyway keep up the nice quality writing,
    it is rare to peer a nice blog like this one these days..

    My site :: ckd diet

  33. I tend not to comment, however I glanced through some remarks here A beginner’s guide to scrollytelling
    – Pavvy Designs. I actually do have a few
    questions for you if it’s okay. Could it be just me or does it
    look like some of these responses come across like they are
    left by brain dead visitors? 😛 And, if you are writing on additional online sites, I’d like to keep up with you.
    Would you post a list of the complete urls of all your social
    sites like your twitter feed, Facebook page or linkedin profile?

    Take a look at my blog http://www.a913.vip

  34. Excellent beat ! I wish to apprentice while you amend your web site,
    how could i subscribe for a weblog site?
    The account helped me a acceptable deal. I had been a little bit familiar of this your broadcast provided vivid clear idea.

    Also visit my page enjoy sex better

  35. Wonderful items from you, man. I have consider your stuff prior to and you are just too wonderful.

    I really like what you have got right here, certainly like what you’re saying and the way
    through which you assert it. You make it enjoyable and you continue to take
    care of to keep it smart. I can’t wait to read much
    more from you. That is actually a wonderful website.

    Feel free to surf to my web blog: http://163.30.42.16/

  36. Aw, this was a really nice post. Spending some
    time and actual effort to create a really good article?
    but what can I say? I put things off a lot and don’t manage
    to get anything done.

    Look at my page; fat burning

  37. Hello there, simply was alert to your blog thru Google, and located that it is really informative.
    I am gonna be careful for brussels. I will be grateful if you continue this in future.
    Many folks will probably be benefited from your writing.
    Cheers!

    Here is my site cannabis license

  38. I don’t drop many remarks, however i did a few searching and wound up here A beginner’s guide to scrollytelling
    – Pavvy Designs. And I do have a few questions for you if you tend not to mind.
    Could it be only me or does it look like some of these remarks come across as if they are
    written by brain dead folks? 😛 And, if you are posting at additional online
    sites, I would like to follow everything fresh you have
    to post. Would you list of the complete urls
    of all your shared pages like your linkedin profile, Facebook
    page or twitter feed?

    Take a look at my blog post :: geforce-samp.com

  39. My programmer is trying to persuade me to move to .net from PHP.
    I have always disliked the idea because of the costs.
    But he’s tryiong none the less. I’ve been using Movable-type on numerous websites for about a year and am worried about switching to another platform.

    I have heard great things about blogengine.net. Is there a
    way I can import all my wordpress posts into it? Any
    kind of help would be greatly appreciated!

    Visit my blog post: eating plan

  40. whoah this blog is fantastic i really like reading your
    articles. Keep up the good work! You understand, lots of people are searching round for this information, you can aid them greatly.

  41. You can definitely see your skills within the paintings you
    write. The arena hopes for even more passionate writers like you who aren’t afraid to
    mention how they believe. At all times go after your heart.

    Also visit my web page – seed sprouts

  42. Simply to follow up on the up-date of this subject matter on your site
    and want to let you know simply how much I loved the time you took to put together this beneficial post.
    In the post, you actually spoke on how to definitely handle this matter with all ease.

    It would be my personal pleasure to collect
    some more strategies from your web site and come as much as offer people what I learned
    from you. Many thanks for your usual great effort.

    Also visit my blog post: ketosis diet

Leave a Reply

Your email address will not be published.