top of page

Designing 3 creative header scroll effects

Follow Yanay's 3 how-tos to create interesting header scroll effects that can be added to any site.

What do you think about the course so far?

Thank you for your feedback!

How can we improve?

Thanks for submitting!

Explore more topics

Additional resources

Visit our help center

Ask the community

Hire an expert

Contact customer care

Yanay Nir

Product Designer

I'm an Editor X product designer. My team is responsible for all designed content including the Compositions, and almost everything suggested in the Add panel. We work closely with the Editor X product team, advising them on definitions and behaviors. I love design, spicy food, oldies music (like 60’s garage & psych) and the people I work with.

Follow these steps in the editor

Fade

See live result →


Steps:

  1. Select your header

  2. Open the Inspector panel

  3. Set Position Type to Pinned

  4. Toggle on Transition

  5. Select Fade


Result:

In preview, the header will fade as you scroll (about 250px down the page), and appear again as you scroll back.


Note:

Play with the Duration from the Inspector panel to fine-tune the effect.



Color Change

See live result →


Steps:

  1. Select your header

  2. Open the Inspector panel

  3. Set Position Type to Pinned

  4. Check Overlap Next Section

  5. Check Fill Color > Select secondary color


Result:

In preview, the secondary background color will appear as you start scrolling and you will see the default only when you get back to the top of the page.





Move

See live result →


Layout:

  1. Select your header

  2. Apply a 1x2 grid (1 column, 2 rows)

  3. Select Adjust Grid then Edit Grid

  4. Set the top row Min to 80px

  5. Set the bottom row Min to 40px

  6. Select your header

  7. Open the Inspector panel

  8. Change the Min Height to None

  9. Add a container to your header

  10. Stretch the container to cover the 2nd row of the grid

  11. Select the container in the 2nd row

  12. From the Inspector panel, choose the Design tab

  13. Change the background color

  14. Select the top row of the grid

  15. Choose a different background color


Transition:

  1. Select your header

  2. Open the Inspector panel

  3. Set Position Type to Pinned

  4. Check Overlap Next Section

  5. Choose Transition > Toggle on

  6. Set the Distance to 80px (height of the first row in the header)


Result:

In preview, as you scroll, the header will move down the page (about 400px) and then, as you continue to scroll, the top row of the grid will disappear to leave only the bottom row visible.


Notes:

  • Make sure you have enough page to scroll down—one section isn’t enough.

  • Play with Duration & Ease in the Inspector panel for fine tuning of the animation.






EXPLORE MORE TUTORIALS

TUTORIAL

Click & hover interactions

TUTORIAL

Pinned position

TUTORIAL

Creating a changing gradient background on scroll

bottom of page