Full Width [alt+shift+f] Shortcuts [alt+shift+k]
Sign Up [alt+shift+s] Log In [alt+shift+l]
35

How to create scroll animations with just 1 React hook (Part 1)

from Tinloof - Blog [alt+shift+b] in programming

This is a series of articles where we learn a few techniques to create scroll animations with just 1 React hook. In this first part, we will use the scroll event to achieve that. Here’s a preview of what we will achieve by the end of the article:
1st Nov 2019

Stay updated

Get a weekly newsletter with the top 5 articles worth reading every week.

More from Tinloof - Blog

How to design an accessible carousel

In this article, we provide a comprehensive guide to designing an intuitive and universally accessible carousel for any web project. Outcome Carousels in UI are practical interactive elements that efficiently display images or content pieces without taking up too much vertical space.

21st Apr 2024 • 74 votes
Guide to fast Next.js

Insights into how Tinloof measures website speed with best practices to make faster websites.

15th Jan 2024 • 57 votes
Perfecting the design handover process

At Tinloof, we aim for seamless and efficient design handoffs, drawing from our experience completing dozens of projects. Our ultimate goal is a "0 questions asked" handoff, akin to an improved IKEA assembly experience. In this article, we'll explore the three core sections of our Figma files: Design System, Blocks, and Pages. We'll also discuss our feedback process and highlight useful Figma features.

2nd Oct 2023 • 38 votes
Tinloof design principles

Tinloof focuses on key principles to consistently create pleasant and practical designs. We're not tied to any specific style - Swiss, Linear-like, neobrutalism, a certain typography or color palette. Instead, we stick to basics that make our process smooth, please our users, attract business, and keep our team happy.

1st Sep 2023 • 39 votes
The SEO scam: $62,000 later

Context Like many businesses operating online, we at Tinloof decided to explore SEO to attract more leads. Seeing the numerous SEO gurus on LinkedIn and Twitter, one might think it's worth a shot to try this approach, hoping to strike gold when search engines place your website at the top of the results page.

6th Aug 2023 • 37 votes

More in programming

If we do not stop to help each other, what do we become?

Yesterday, I received this email as a response to You Can't Vibe Code Love. It's such a remarkable and powerful statement that I asked permission to share it here, in its entirety, with personal information redacted: Hey Jeff, Hope you and your family are doing well.

yesterday • 1 votes
You are still valuable

A frustrated Reddit post about being a condom between an AI and production made the rounds in our team. Here is why I think the opposite is true and what it means for how we review code, plan work and think.

2 days ago • 2 votes
A Short Update on Designing for Foldable Devices

And here we are three years after I wrote about the Google Pixel Fold being announced, followed now with the announcement of the iPhone Duo...(I have questions about the naming by the way). Four years ago I was talking about web primitives in the platform for the Surface Duo. My how time flies. There are CSS media features, a Viewport Segments API, a Device Posture API but Chromium based browsers are the only ones currently supporting these things. I haven't been able to find any signal yet on whether Safari will support these things in the web platform as the developer docs focus on application development. If you're interested in trying out the platform features, you can emulate the Surface Duo and Galaxy Z Fold in the developer tools. And if you're thinking, do I really have to have my website adapt to two screens? The answer is no. Adding a design to an application or dual screen makes sense if you have an experience that has two simulataneous contexts that are useful e.g. a list of email messages/inbox on one screen, an open message, email thread or email composer on the other. Here's one of my talks from 2022 if you're interested in learning more about what's available in the browser for dual screen/foldable devices. Happy building :)

2 days ago • 1 votes
Mommy bloggers react

After a write-up in the New York Times, Mommy Bloggers had two options. Either lean in, or step back. Given how popular it became after that, it's not hard to guess which option they chose. The post Mommy bloggers react appeared first on The History of the Web.

4 days ago • 2 votes
Haunt 0.4.0 released

I'm quite a bit late on this one, but Haunt version 0.4.0 was released released back in July. I haven't had much time for blogging, but I'm catching up now! This release contains a small set of improvements and bug fixes since the 0.3.0 release in 2024. About Haunt Haunt is a static site generator that uses the Guile Scheme as its configuration language. It aims to be simple, functional, and extensible. Features include: Easy blog and Atom/RSS feed generation Markdown post support Simple development server for viewing edits before publishing Purely functional build process User extensibility Notable changes Added support for HTML in Markdown documents. This was a long time coming because guile-markdown did not support it and the library was abandoned by the original maintainer. As part of my work at Spritely, we forked it, implemented the relevant portions of the CommonMark specification, and released it. Spritely's guile-commonmark fork is now considered to be the official upstream by Guix and others. A further consequence of this is that guile-lib is now a required dependency for building Haunt as we need the (htmlprag) module to parse Markdown documents with embedded HTML. html->shtml from guile-lib's (htmlprag) module is now used instead of xml->sxml in the HTML reader. It was silly of me to use xml->sxml for this purpose years ago, but at the time I wanted guile-lib to be an optional dependency. Added haunt new subcommand for creating a new site. Added default directory, template, and prefix arguments to flat-pages procedure. Added support for index metadata flag to flat pages for pretty URLs. Flat pages now receive all page metadata, not just the page title. This is a breaking change from 0.3.0. Added .scm as an additional extension for sxml-reader. make-file-extension-matcher now supports multiple extensions. Fixed emission of <script> and <style> elements. Fixed handling of no available reader in flat pages builder. Fixed unreachable error handling clause when a reader is not found for a post. Fixed default blog theme template missing an <html> tag. Fixed overloaded -h option in haunt serve. Deprecated post in Skribe reader in favor of document. Download Haunt 0.4.0 is already available in Guix: guix pull guix install haunt See the Haunt project page for information on how to build from source. Thank you to Camilo Rodrigues, Noé Lopez, jgart, Jakob L. Kreuze, and Daniel Meißner for their contributions to this release! Happy haunting!

4 days ago • 1 votes
📚 BoredReading

You seem to be enjoying this.

Join free to unlock everything.

Create free account

Already have an account? Sign in