How-to: Creating a vanishing logo on a sticky header

Hello everybody!

This is what we’re going to achieve:

Proof of concept

However, so far I’ve found some hijinks and drawbacks you should know beforehand so you can ponder if this effect is for you:

  1. There cannot be any sticky header below in the page (There can be as many as you want above this group, but none below).
  2. There can be a group fixed to browser bottom as long as, in Sparkle, it is placed above this one (your page will look the same, as it’ll stick to the bottom anyway).
  3. There cannot be a full page width box placed below in the page.
  4. If there’s a full page width box starting above it, it can be as tall as you want as long as it doesn’t go all the way to the bottom (you can solve this by placing an invisible pixel tall box below)
  5. There has to be a full page width box in the design, be it visible or invisible.

Still onboard? Let’s go then!

  1. Create a group for the small logo with an invisible box. This will be our SLG (Small Logo Group).
  2. Create a group for the menu/buttons/whatever you desire. It has to have a full page width box; it can be invisible if you want it that way. This will be our MG (Menu Group).
  3. Make sure your MG is shorter in height than your SLG.
  4. Place the SLG in a layer above the MG.
  5. Set both groups in the very same vertical pixel position (so SLG should hang partially, as it is taller).
  6. Set both groups to Stick to page top by Last one pushes previous.
  7. Apply any animation(s) you want to the SLG and to the image inside it (in my example, the opacity animation goes from 0 % opacity at 20 % in the browser viewport to 100 % opacity at 10% in the browser viewport).

Done!

2 Likes