---
title: "Discussion on \"How to make Hashnode like Scroll Aware Toolbar using Framer Motion\" | Hashnode"
description: "Discussion on \"How to make Hashnode like Scroll Aware Toolbar using Framer Motion\". Learn to create a scroll-aware toolbar using Framer Motion, inspired by Hashnode's blog toolbar. Includes setup, animation logic, and demo"
url: "https://hashnode.com/posts/how-to-make-hashnode-like-scroll-aware-toolbar-using-framer-motion/6673b5825957936161ce1f1e"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [How to make Hashnode like Scroll Aware Toolbar using Framer Motion](https://ammarmirza.hashnode.dev/how-to-make-hashnode-like-scroll-aware-toolbar-using-framer-motion?utm_source=hashnode&utm_medium=feed)

Learn to create a scroll-aware toolbar using Framer Motion, inspired by Hashnode's blog toolbar. Includes setup, animation logic, and demo

Jun 20, 2024 · 7 min read · ammarmirza.hashnode.dev  
Updated Jun 21, 2024  
Read the article

-   [#programming](https://hashnode.com/tag/programming)
-   [#framer-motion](https://hashnode.com/tag/framer-motion)
-   [#animation](https://hashnode.com/tag/animation)
-   [#css](https://hashnode.com/tag/css)
-   [#styled-components](https://hashnode.com/tag/styled-components)

## Written by

[Ammar Mirza](https://hashnode.com/@ammarmirza)

@ammarmirza · Mumbai, India

  
[View profile](https://hashnode.com/@ammarmirza)

Software Developer @Pineway | Prev @Hashnode

Just a normal guy who loves tech, food, coffee and video-games.

## Responses 8

Markdown supported · ⌘↵ to post

[klement Gunndu](https://hashnode.com/@klementgunnduai)

[Feb 24](https://hashnode.com/posts/how-to-make-hashnode-like-scroll-aware-toolbar-using-framer-motion/6673b5825957936161ce1f1e/comment/699db730cd5c9f4ea3fca753)

Using useMotionValueEvent to track scroll direction instead of raw scroll listeners is much cleaner — the threshold-based show/hide avoids the flicker you get with naive implementations.

[Llumo](https://hashnode.com/@llumoai)

[Jun 26, 2024](https://hashnode.com/posts/how-to-make-hashnode-like-scroll-aware-toolbar-using-framer-motion/6673b5825957936161ce1f1e/comment/667c24341fa88779642c4e37)

Really helpful [Ammar Mirza](https://hashnode.com/@ammarmirza)

[Ammar Mirza](https://hashnode.com/@ammarmirza)

[Jun 26, 2024](https://hashnode.com/posts/how-to-make-hashnode-like-scroll-aware-toolbar-using-framer-motion/6673b5825957936161ce1f1e/comment/667c24341fa88779642c4e37#reply-667c26031869d453e7ed9e68)

Glad you found it helpful!

[Arya](https://hashnode.com/@Arya06)

[Jun 23, 2024](https://hashnode.com/posts/how-to-make-hashnode-like-scroll-aware-toolbar-using-framer-motion/6673b5825957936161ce1f1e/comment/6677bfc0e4ed8b46e7148ce7)

Hey Amar I am new here I have read your blog for first times really the information you shares is amazing !!

[Ammar Mirza](https://hashnode.com/@ammarmirza)

[Jun 23, 2024](https://hashnode.com/posts/how-to-make-hashnode-like-scroll-aware-toolbar-using-framer-motion/6673b5825957936161ce1f1e/comment/6677bfc0e4ed8b46e7148ce7#reply-667811ac4d69a30e35ab3161)

Thanks for reading Arya. Stay tuned for more such articles.

[Priya Raimagiya](https://hashnode.com/@priyaraimagiya123)

[Jun 21, 2024](https://hashnode.com/posts/how-to-make-hashnode-like-scroll-aware-toolbar-using-framer-motion/6673b5825957936161ce1f1e/comment/6675a54074665870960e8f98)

Nice article!

[Ammar Mirza](https://hashnode.com/@ammarmirza)

[Jun 21, 2024](https://hashnode.com/posts/how-to-make-hashnode-like-scroll-aware-toolbar-using-framer-motion/6673b5825957936161ce1f1e/comment/6675a54074665870960e8f98#reply-6675def1e4ed8b46e70adf96)

Thanks

[Lakshya Thakur](https://hashnode.com/@lakbychance)

[Jun 20, 2024](https://hashnode.com/posts/how-to-make-hashnode-like-scroll-aware-toolbar-using-framer-motion/6673b5825957936161ce1f1e/comment/66740336160bd54d40a20ce4)

Nice approach [Ammar Mirza](https://hashnode.com/@ammarmirza) !. We did evaluate using framer at the time when implementing but resorted to vanilla js since we didn't want to add one more additional dep. But the DX with framer is more intuitive ✨

[Ammar Mirza](https://hashnode.com/@ammarmirza)

[Jun 21, 2024](https://hashnode.com/posts/how-to-make-hashnode-like-scroll-aware-toolbar-using-framer-motion/6673b5825957936161ce1f1e/comment/66740336160bd54d40a20ce4#reply-66757f1674665870960d7cdd)

Thanks for reading 😀