What do you think about the course so far?
Thank you for your feedback!
Explore more topics
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
Steps:
Select your header
Open the Inspector panel
Set Position Type to Pinned
Toggle on Transition
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
Steps:
Select your header
Open the Inspector panel
Set Position Type to Pinned
Check Overlap Next Section
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:
Select your header
Apply a 1x2 grid (1 column, 2 rows)
Select Adjust Grid then Edit Grid
Set the top row Min to 80px
Set the bottom row Min to 40px
Select your header
Open the Inspector panel
Change the Min Height to None
Add a container to your header
Stretch the container to cover the 2nd row of the grid
Select the container in the 2nd row
From the Inspector panel, choose the Design tab
Change the background color
Select the top row of the grid
Choose a different background color
Transition:
Select your header
Open the Inspector panel
Set Position Type to Pinned
Check Overlap Next Section
Choose Transition > Toggle on
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.
