Round image of the author with a thin blue line around the image

Yanay Nir

Product Designer

,

August 6, 2020

Header scroll animations.

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

Fade.

1. Select your header

2. Go to SCROLL in the Inspector panel

3. Beside Scroll effect, choose Fixed

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.

1. Select your header

2. Go to SCROLL in the Inspector panel

3. Under Scroll Effects, choose Fixed

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.

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. Go to SCROLL in the Inspector panel

3. Under Scroll Effects, choose Fixed

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:

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

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

Round image of the author with a thin blue line around the image

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.

Did you find this lesson helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Collaboration
Arrow down icon
VIDEO LIBRARY
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.