Grids are truly magical. There’s so many different kind of things we can do with them; layout-wise and scroll-wise. Some time ago, I came across Giulia Tonon’s amazing website. The unique design is enhanced by the exquisite motion of the columns: while scrolling, the middle column scrolls one way, while the outer ones scroll the other way.
This is something that I thought would be interesting to build upon using Locomotive Scroll and combine it with a little idea of flying grid items. Once we click on a grid item, it animates to the center of the screen while scaling up. The other grid items move to their respective positions in the row of thumbnails beneath the main image. This kind of animation is highly inspired by the work of Aristide Benoist who is the master of delicate view switching motions and unique layout animations.
This is the initial view:
When clicking on a image, we move it to the center and animate all other images in the viewport to the little thumbnail navigation:
And this is how all the motion flow looks like:
Please be aware that this experiment is mostly a mockup (no “real” thumbnail navigation for this one)!
I really hope you find this inspirational! Thank you for checking by!
Basement Grotesque is one of basement studio’s first self-initiated projects. We wanted to create a typeface tailored to the studio’s visual language. It became the perfect excuse to show it off with a website that could suit its inherent bold and striking style.
The Beginnings
Our design team had just redesigned the studio’s identity. For the wordmark, instead of using an existing font, we decided to draw each of the characters in an effort to capture the distinct voice and style of the studio. Once we had drawn those final seven letters (and the period sign), it seemed only natural to expand them to a full-fledged bespoke font. That was the beginning of Basement Grotesque.
From then on, our task was fairly clear: we had to create a strong typeface, suitable for large headings and titling, and it had to be bold. Inspired by the specimens of grotesque typefaces of the early 19th century, and combining them with the renewed brutalist aesthetics of the contemporary visual landscape, Basement Grotesque would become our first venture into the daunting world of type design. We weren’t just designing and releasing a new font; we were on the journey of learning a new craft by doing.
Coincidentally, the studio had established quarterly hackathons to devote specific time and space to develop self-initiated projects where the whole team would get together, work on and ship anything we wanted to explore and test that wouldn’t normally be possible with client work. After some brainstorming, the first project chosen for our first hackathon was the site to launch and share our first typeface. Again, it just felt like a natural decision.
“This font is really the result of a creative itch we wanted to scratch a long time ago. We took on the challenge and now we have a growing typeface, open and available to anyone who wants to use it” — Andres Briganti, Head of Design
The Process
Once the goal was set, the challenge was to finish at least one weight of the typeface and then make a website to promote it and its future additions. We had to do something captivating so that it would motivate our community to use it and share it.
The font quickly got to a stage where it was advanced enough to be released. Part of the appeal of the project was the idea to create something that was an ongoing effort and a work in progress. New weights and widths, and even revisions and updates would become available and open to the public as time goes by.
Starting with the Black Weight (800), each character was carefully designed to convey the studio’s visual style, and some of the features of the current version are:
413 unique glyphs
14 discretionary ligatures
Bold, our voice and tone, of course
Old style and lining figures
Language support for Western and Central European languages
Create, Develop and Show Off
With the font in hand, we now had to build a website to present it. It had to be interactive enough to show the typeface’s features, but also feel solid and performant.
The preferred tech stack at basement is Next.js with TypeScript. Having those as basics, we then chose GSAP for animations, Stitches for CSS-in-JS, and Locomotive Scroll for better scrolling experiences — among other libraries. We started from a template repository, next-typescript, for faster development.
“We worked on a tight deadline, and the team really delivered. Each of us worked on a specific section, and then we arranged everything together to get to the final result.” Julian Benegas, Head of Development.
1) In the “Try this beauty” section, we have an interactive preview, where you can adjust the font size, leading, and tracking, to see how it looks. We had to create a ResizableTextarea component to solve some spacing issues. The syncHeights function synced the height of a placeholder div with the actual textarea node. A bit hacky!
function syncHeights(textarea: HTMLTextAreaElement, div: HTMLDivElement) {
const value = textarea.value.replace(/\n/g, '<br>')
div.innerHTML = value + '<br style="line-height: 3px;">'
div.style.display = 'block'
textarea.style.height = div.offsetHeight + 'px'
div.style.display = 'none'
}
2) On the footer, we used the 2d physics library p2.js to get that cool “falling letters” animation. The code is a bit long, but please, feel free to follow the source from here.
3) We integrated with Twitter’s API to get and render tweets hashtagged #basementgrotesque on the website. On the download flow, we suggested that users tweet something to show some love
const handleDownload = useCallback(() => {
const encoded = {
text: encodeURIComponent(
'I’m downloading the #basementgrotesque typeface, the boldest font I’ll ever use on my side-projects. Thank you guys @basementstudio 🏴 Get it now: https://grotesque.basement.studio/'
)
}
window.open(
`https://twitter.com/intent/tweet?text=${encoded.text}`,
'_blank'
)
download(
encodeURI(location.origin + '/BasementGrotesque-Black_v1.202.zip')
)
}, [])
basement.studio is a small team of like-minded individuals whose purpose is to create visually compelling brands and websites, focusing not only on their looks but also on their performance. As we like to say: we make cool shit that performs.
Our award-winning team of designers and developers are hungry for even more interesting projects to build.
Today I’d like to share some on-scroll animations for typography with you. There’s a lot of artsy stuff that can be done when we scroll a page and moving letters is one of the things that can set an interesting “motion mood” to a design. Be it just a simple title or a menu or a card-like component, we can play with moving letters depending on the scroll (direction and speed).
This set is very experimental using Locomotive Scroll, and there are certainly better ways to calculate the translate value of each letter, depending on the length of the words, for example. I’ve made this quick and dirty but I hope it gives you some idea of what can be done.
In combination with images, we can add another layer of visual motion which makes possibilities really endless.
I hope you enjoy this little set and find it useful! Thank you for checking by and hit me up on Twitter @crnacura or @codrops, I’d love to hear your feedback!
I was recently looking for a way to perform scrolling effects on a project and I stumbled on the LocomotiveScroll library. It lets you perform a variety of scrolling effects, like parallax and triggering/controlling animations at scroll points.
You might also call it a “smooth scrolling” library, but it doesn’t leverage native smooth scrolling — it does just the opposite by virtualizing scrolling and ensuring it’s always smooth. You could probably consider this “scrolljacking” so if you hate that generally, you might hate this, but UX research seems rather mixed on whether it’s actually bad or not. The homepage will give you a good sense of how it works and feels.
Let’s look at the basics of using Locomotive-Scroll JavaScript and how to leverage it to for delightful user experiences.
Locomotive scroll is a simple scroll library, built as a layer on top of ayamflow’s virtual-scroll, it provides smooth scrolling with support for parallax effects, toggling classes, and triggering event listeners when elements are in the viewport.
In other words, it detects when elements are in the viewport and then alters CSS transform property values on those elements to create scrolling effects.
Oftentimes scrolling effects are called parallax meaning some elements are made to look like they are deep in the background, making them appear to move slower than other elements that are closer to the foreground while scrolling is taking place. Imagine looking out the window from a moving car. The trees far away seems to slowly drift by where the fence right along the road zips quickly by. Sort of like the effect here in this pen from Sarah Drasner:
Here’s how it works
Locomotive Scroll works primarily through specific attributes in the HTML. Elements with these attributes trigger event listeners in JavaScript when they are in the viewport, then apply CSS transform values as inline styles.
There are two key attributes to always call upon Locomotive:
data-scroll: detects whether or not an element is in the viewport
data-scroll-container: wraps all the HTML content you want to watch for scrolling
Here’s what we’re talking about when we say that the transform property values are updated in the HTML as inline styles.
Notice how, as soon as an element with Locomotive’s data- attributes comes into the viewport, the CSS transform values are are updated.
Let’s set this up
We can use the library right as a <script> tag if we’d like. It’s on CDNs, so like:
Now we look for the container and kick off the library:
const scroller = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});
The library is on npm as well, so we can use it that way in our build instead with the typical npm install locomotive-scroll, then:
import LocomotiveScroll from 'locomotive-scroll';
const scroll = new LocomotiveScroll();
That means we could use them off Skypack too, like:
That’s really all there is to the setup! It’s pretty plug-and-play like that.
Here are some examples
You can probably think of some pretty nice use cases for something like this, but let’s go over a few examples where you might use Locomotive Scroll.
Let’s start with this one:
That HTML has all kinds of data- attributes going on in there. We’ve already looked at data-scroll and data-scroll-container. Here’s what the rest are and what they do:
data-scroll-section : Defines a scrollable section. For better performance, it’s a good idea to split pages into sections.
data-scroll-direction: Defines the vertical or horizontal direction that an element moves.
data-scroll-speed: Specifies the speed an element moves. A negative value reverses the direction, but only vertically, unless data-scroll-direction is applied on the same element.
data-scroll-sticky: Specifies an element that sticks to the viewport as long as the target element is still in view.
data-scroll-target: Targets a particular element. It takes in an ID selector, which is unique compared to the other attributes.
So, let’s say we are using the data-scroll-sticky attribute. We always have to set a data-scroll-target attribute as well, because the target element is usually the container holding the other elements.
<div class="container" id="stick" data-scroll-section >
<p data-scroll data-scroll-sticky data-scroll-target="#stick">
Look at me, I'm going to stick when you scroll pass me.
</p>
</div>
Now that we’ve picked one apart, here are a couple of others:
You can also use LocoMotive-Scroll in other frameworks, too. Here’s an example in React:
Scroll aboard!
I can not emphasize the power of Locomotive Scroll enough. I needed to add scroll effects to a side project I was working on, and this was super quick and easy to use. I hope you’re able to use it on a project and experience how great it is for scrolling effects.
If you use Locomotive Scroll, you might have heard about the new update that includes support for horizontal layouts. I’m a big fan of the library, so I couldn’t wait to try out some layouts and animations with the new feature.
The main concept behind these layouts is to play around with animations that feel and work well for scrolling to the sides. This includes animating images and text depending on the direction we scroll. Moving things up and down for example or skewing them can create a really interesting dynamic effect.
By using a structure of the images where an outer element has overflow: hidden and the inner one moves, we can create a cool parallaxed motion that adds depth to the whole layout.
I really hope you enjoy these experiments and find them useful Thank you for stopping by and let me know what you create with Locomotive Scroll @crnacura.
Today I want to share a simple intro animation with you. The concept is to first show an image stack and then animate each image to its position in the grid (or any other layout).
For the first demo, I actually used a simple serial layout and added some smooth scrolling with Locomotive Scroll. The animations are powered by GSAP.
The other day I looked at the beautiful website of Elias & Valentin and fell in love with that nice tilted image grid that animates on scroll. The look and feel of a grid like that is super fashionable right now so I wanted to explore this and other layout variations I stumbled upon.
For the scroll animations I used Locomotive Scroll which is a really fantastic library when it comes to smooth scrolling and on-scroll animations.
The tilted grid from Elias & Valentin allows for a fun play with the directions of the animation.Another interesting layout to play with is a 3D grid.One line “grids” can simply be animated horizontally.
Check out the GitHub repo of Locomotive Scroll to see how simple it is to use the library.
I really hope you find this set interesting and useful
I also wanted to add some smooth scrolling and on-scroll animations, so I’ve used Locomotive Scroll. The beautiful images are by DeMorris Byrd.
This is highly experimental and it turned out to be a complex process. But I hope it gives you some of sort idea and entry point of how to pull off these kind of animations without touching the width and height of an element.
The main idea behind this technique is to scale an element and then counter-scale the child. Paul Lewis and Stephen McGruer show how to do that on a menu using expand and collapse animations. Avoiding animating the width and height of an element helps keep performance in check.
So what we do is to initially set the scale of the content__intro wrapper to a value that will make it shrink to an exact size. Then we set a counter scale to the image. This will make the image maintain the same size as before. Then, we add another scale to the image, shrinking it also the to the target size.
Having the initial width and height of an element and also the target dimensions, we can calculate the scale values of the outer wrapper based on this:
1/introTransform.scaleX is the counter scale of the outer wrapper. The second value that we multiply makes sure that we scale the image down to our desired size, just like we did with the outer wrapper before.
And that’s the main idea behind the scaling magic.
I hope this gives you a starting point for these kind of tricky animations! Thank you for checking it out
Thank you for stopping by and let me know what you create with Locomotive Scroll 
