Experimenting with scrollytelling: bringing scroll-animations to the World Cup with no-code
One of the most powerful things you can do as a designer or marketer is to tell an interesting story.
A captivating story can capture your reader’s attention, make them empathise with your cause, and understand your point of view. However, there is now so much content out there that it’s difficult to make your story cut through the noise. You need to differentiate yourself from the crowd.
Scrollytelling is a new form of storytelling that involves — you guessed it — scrolling.
Essentially, as you scroll through a webpage, it will gently animate and load different sections and content, helping to deliver key points at the right moment.
This type of storytelling is an exciting new way to speak to your audience, and it’s built for the web.
How to build a no-code scrollytelling site
Historically, adding precise animations based on scroll positions and changing scrolling directions has been quite complex, involving in-depth web animation expertise. Now though, the no-code movement is making it more accessible for everyone to take advantage of it.
For this tutorial, we will be using a no-code design tool called Vev, which behaves similarly to Figma or Sketch but uses clean semantic code to let you publish your design as a fully functional website.
We will be basing the tutorial on a player profile of Jamal Musiala — a breakout ‘wunderkind’ from Bayern Munich who made his World Cup debut for Germany at the 2022 FIFA World Cup.
The design goal is to blend magazine-style layouts with scrollytelling to create an interesting short story about Musiala’s season and what’s next for him.
Let’s get started.
Getting started
Firstly, we’ll need to sign up for a Vev account. It’s free, and they have a pretty generous free tier.
Once you’re in, create your first project. Make it a blank canvas which targets the desktop viewport initially (we’ll sort out other breakpoints later).
Next, we should create some basic design tokens to reuse throughout the project. We’ll set the colours we want to use as well as the typefaces.
As for colours, use the colour picker in the right panel to select a few colours and then add them to the ‘swatches’ list. If you’re used to working with design systems, you’ll feel at home doing this.
Next, we’ll select some unique typefaces for the project. If you pull in a text element then you can either use a pre-loaded typeface or browse Google Fonts’ collection of font families to use in your project. Personally, I chose to use a mixture of Teko, Rubik Glitch, Righteous, and Roboto Slab for my design. I like having some display typefaces for headlines, along with a very legible typeface for body text.
We should make the design above the fold resemble a print magazine, so use an image and resize it so that it is snug against the bottom of the section.
Editing the size and position of the image in Vev
Next, let’s add some text elements to the screen:
- A feature title
- A headline
- A subtitle
- Two for body text
We want the feature title to be small, but in all-caps so that it’s differentiated from the other text clearly.
As you can see, the headline and subtext also have some different styles applied to them. We should adjust the line height so that some of the text is closer together.
We can then add the two sections of body text to our design. This has an even larger line-height (1.6em) to make it easier to read and give the design a lighter feel.
We can also take advantage of the drop-cap feature Vev has, so the first letter of the text is styled differently from the rest. Highlight the first letter and then select the drop-cap icon. After that, we can adjust the style of the drop-capped letter in the right panel.
For a final touch, we can add an animation to the headline. With the headline text element selected, click the ‘Add-ons’ option in the toolbar and select ‘Animated Letters’.
After that, we can adjust the animation by double-clicking on the text. Personally, I like the look of it when it plays once, there’s no delay and it fades in.
Once that is done, we can hit the preview icon (the eye in the top right) to preview how our design would look in the browser.
Adding scrollytelling magic to the page
The next section we’ll add introduces scrollytelling to the design. We will create a section where Musiala’s favoured positions on the pitch float into view, along with some of his stats from this season.
To begin, from the Add menu, select and add ‘Scrollytelling Image’ to the canvas. Just click below your first section on the canvas to add it in the right place (don’t worry if you add it above, you can just drag the section below in the layer panel on the left).
I created one background image with Musiala’s favoured position on it, and then another image with his less common positions. I created a second scrollytelling image section and used the second image as a background for that.
Stacking these sections in this way makes the image of the pitch remain static and fade between sections, creating the illusion that the player’s positions just pop up on the pitch.
Additionally, we can begin adding elements to the side of our pitch to explain what’s going on in the graphics.
In this section, I’ve copied some text elements from above and rearranged them slightly for the new layout style. I’ve also added a few rectangle elements to convey a progress bar.
There is an animation applied to the rectangle, which I added by selecting the progress indicator rectangle (the gold one), clicking ‘Add-ons’, and selecting ‘Animations’.
We want the animation to play as the element is scrolled into view, so choose ‘Scroll Animation’. The ‘Slide in’ preset already works well, so select that option. If you preview this now, the progress indicator will fade in as you scroll through the section.
For the section below, we are going to explain Musiala’s position a bit more, so we can simply copy and paste some elements we used above to help us do that consistently. We can also shorten the height of this section slightly so that it locks into place quickly and allows us to move into the next section afterward.
In this section, we can include some stats too. We can use some text elements, group them together into a frame, and then animate them based on the scroll position as we did with the progress bar previously.
Horizontal scrollytelling
Another engaging way to tell a story differently is to use horizontal scrolling. This essentially allows you to alter the direction of the scrolling so that your vertical progress gets translated into horizontal movement. This is quite a common design technique in product marketing pages like Apple’s.
Here, we can create a horizontally scrolling section containing pictures of Musiala’s achievements leading up to the World Cup.
First, we need to add a horizontal scroll section. From the Add menu, search and select ‘Horizontal Scroll’. This will add two horizontal scroll sections to your layout. It’s important to note that when viewed as a published site, these two sections will lead into each other horizontally, so you should place content as if they are next to each other rather than above/below each other.
We should change the colours of these sections to reflect the style of the page so far and then add some image elements.
It might take a little bit of tweaking to get the spacing just right when having content overlap into the next section, but it’s easy enough to do with the handles to resize the image elements. You can also hold down the Options key on Mac (Alt key on Windows) with an element selected to see the spacing between two elements (just as you would in a tool like Figma).
Now, all we have to do is add our images.
It’s important to note that you can add alt text for the images you upload in the description field of the image details section. Providing alt text for imagery helps people who rely on assistive technology to understand what an image is trying to convey.
Once we’ve added the photos we want, we’re done with this section. Previewing it now will allow you to experience the horizontal scroll effect.
While a horizontal scrolling section can produce an interesting experience for most users, you should be aware that changing the scroll direction automatically can cause discomfort for people who suffer from vestibular motion disorders. Therefore, you should consider the audience for your story and only use horizontal scrolling where appropriate. Vev’s selection of click-triggered image carousels are a good alternative, if you’d still like to work some horizontal movement into your piece.
Fine-tuning for responsiveness
Designing for the web is often tricky because there are so many different viewport sizes to account for. Thankfully, Vev’s tool makes it pretty easy to adjust your design for different breakpoints.
Using the breakpoint selector in the bottom left, we can toggle between desktop, tablet, and mobile canvas sizes. Once we select a different viewport, our design might look a little crowded. In typical web development, we’d have to begin adding custom media queries for all the individual elements, but with Vev we can simply drag the elements to where they look best.
For example, on the tablet breakpoint, we can adjust the sections so that the text’s width is decreased, and the background image for the scrollytelling image is slightly off-screen.
For adapting the design to mobile, we can change the position of the image so it is more visible in the mobile viewport.
Publishing our design
After we’re satisfied with our design across all breakpoints we can publish our site. Vev lets you publish to a customised domain, embed your design on another webpage, or export your site to a custom destination.
For now, we can just publish the site on our free customised Vev domain. Once we hit publish, Vev will take a few seconds to optimise and upload all the files generated.
If you’re curious as to how my design turned out, you can view it here.
Side note: I created this design and tutorial just before Germany were knocked out of the World Cup in the group stages. Typical.
