(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Get Elementor Pro Today –
1 – Elementor Pro
Show/Hide any Element based on scroll direction with Javascript(JS) or GSAP
I have provided two versions, one uses vanilla javascript to achieve this effect and the second one uses GSAP to achieve this effect. You can also choose whether you want to show on scroll down or hide on scroll down, and the same for scroll up.
![](https://dmmotionarts.com/wp-content/uploads/2023/09/MinimalDm-logo2-1024x1024.png)
Home
Portfolio
Resources
Contact
Version 1 – Show on Scroll UP & Hide on Scroll DOWN (Javascript)
- dm-smart-scroller is the CSS class given to element that should be shown on scroll up and hidden on scroll down. If you wish to change the CSS class names, please change them accordingly in the code too.
- The below code uses translate property to show/hide elements based on scroll.
Version 1 – Show on Scroll UP & Hide on Scroll DOWN (GSAP)
- dm-smart-scroller is the CSS class given to element that should be shown on scroll up and hidden on scroll down. If you wish to change the CSS class names, please change them accordingly in the code too.
- The below code uses translate property (y) to show/hide elements based on scroll.
Version 2 – Show on Scroll DOWN & Hide on Scroll UP (Javascript)
- dm-smart-scroller2 is the CSS class given to element that should be shown on scroll down and hidden on scroll up. If you wish to change the CSS class names, please change them accordingly in the code too.
- The below code uses translate property to show/hide elements based on scroll.
Version 2 – Show on Scroll DOWN & Hide on Scroll UP (GSAP)
- dm-smart-scroller2 is the CSS class given to element that should be shown on scroll down and hidden on scroll up. If you wish to change the CSS class names, please change them accordingly in the code too.
- The below code uses translate property (y) to show/hide elements based on scroll.