Creating an animated revealing menu – Interactions tutorial

A step-by-step tutorial about creating an animated website navigation menu with Pinegrow Interactions.

Before we start

What you’ll learn?

By following this tutorial you will learn how to create a top navigation menu that stays at the top of the window when user scrolls down the page.

What you’ll need?

Of course, you can just watch the tutorial to see how Pinegrow Interactions work. But we recommend that you follow along the tutorial, doing all the steps on the provided example page. To do that, you’ll need:

Pinegrow Web Editor, either a free trial or activated license that includes Pinegrow Interactions.
Download the example project without interactions. Unzip the file and open it as a project in Pinegrow Web Editor.
You can also download the finished project as a reference.

If you already have Pinegrow Web Editor, but don’t have the Interactions add-on you can start a trial in Support -> Purchase & Activate under Add-ons: Interactions.

Want to know more about Pinegrow Interactions?

Visit the Pinegrow Interactions Documentation portal to learn more about Interactions, actions, licensing, API and more.

Need help?

Post any questions and feedback about this tutorial to a dedicated Pinegrow Forum topic.

Watch the whole tutorial

The tutorial has just one video, total length is around 15 minutes.

We recommend that you watch the whole tutorial and follow along with the provided project.

Alternatively, you can scroll down past the video to watch and read transcripts of individual tutorial parts.

The following section contains the videos and transcripts of the tutorial:

1. Introduction

Hi there, today I’m going to show you an interesting trick to reveal elements based on scroll interaction. As always we are going to do this without any hard coding by the help of Pinegrow Web Editor, using Pinegrow Interactions, a GreenSock powered visual editor for web interactions.

In this tutorial I’m going to implement the reveal effect on a website menu. Basically I’m going to create a floating menu but only after scrolling the page for a few 100 pixels. This can be useful for a long page where you want to keep an element visible after scrolling past that element. Plus the interaction makes it more appealing and catches the eye of the viewer.

The end result of what we are going to achieve is that our menu should remain as it is when we scroll at first but after scrolling down a little our menu should appear again.

You can implement this on any page but, today I’m going to use one of the pre-built Bootstrap templates. Which you can easily select within the Pinegrow Web Editor when creating a new file or a project.

If you wish you can download the starter webpage without the interactions and follow along with this tutorial. The link is provided in the video description.

So let’s get started!

Open the starter project and begin building amazing interactions with Pinegrow Web Editor.

2. Create the HTML layout and style it with CSS

We are going to use a pre-built Bootstrap template so let’s create a new file.

Go to the File menu and click on New Page

On the popup you should find Bootstrap with other frameworks and their sample templates.

So here we are going to use Bootstrap 4 and select the blog.html template.

Now our editor will load the page with the selected template. You can save the page here and when you save the page, Pinegrow will ask to open it as a project, so click Yes. This way you are not only able to access the page file, but also the whole project from the Project panel.

On this template we have a big, multi-section header. The top has the logo and subscribe button. The bottom block has the main links. To simply create a floating menu we could apply position: fixed to the whole element. But then will be an overly big block floating over the page content. So the best thing is to work on the lower menu block only. However, we cannot apply position: fixed because it will create a gap when scrolling.

So the solution is to use interactions to make it remain static at first and after scrolling past the element make it fixed or let’s say floating.

Our menu block has a class of .nav-scroller, but for this example I’ll call it the menu block.

While we already have a nice page layout we have to add a little tweak for our interaction to work. The Header and menu block are within a .container block but we need these two blocks separated and the menu block with its own .container, so when we apply position: fixed it will have the same spacing.

Let’s go to the Tree panel, on the first .container select the header block and pressing Shift on your keyboard, select .nav-scroller block as well.

Now drag them both out of the container block and place it above this container block.

Now let’s add containers to these elements. Header will be inside a container block but for the menu block, container block will be inside.

Now on the Tree panel, select header block and right click on it. A popup menu should appear.

Go to Insert

As we are using Bootstrap framework you can find most of the Bootstrap elements with other Plain HTML elements.

Under the Bootstrap section go to Grid
Now hover over the Container and you should see 4 icons, which will let you choose where you what your element inserted
For this one, click on the first one which is Insert before

Now you should get a .container block above the header block now let’s insert it inside the container block. For that just click and drag the header block over the container block and drag little right and leave it.

Now let’s add another container block to our menu block

Go to Tree panel
Select .nav-scroller block and right click on it
On the popup menu go to Insert
Under the Bootstrap section go to Grid
Hover over Container and click on Insert inside on the top, which is the third icon

We need menu links inside the container block so select the Nav block and drag it inside the container block.

Our layout is done, now let’s add our interaction.

3. Add reveal interaction

Let’s add interactions to reveal and hide the menu on scroll.

We need to add our interaction to the menu block and page scroll is the trigger. So for this we need to add Scroll Scene interaction.

We need to add this interaction to the parent of the menu block, which in this case is the body block.

Let’s go to the Tree Panel
Click on body element
Go to Interactions panel
Click on Activate Interactions, if it appears
From the Actions list click on Scroll Scene
Scroll Scene settings should appear

First I’ll work on the Animation and work on Scroll Scene setting to give you more idea about the implementation.

On Animation 1 > leave Target blank, we will set the target in the Timeline editor as we will have multiple targets
Now click on Edit Animation, as we will create a custom animation, the Timeline Editor should appear
Go to Timeline Editor, on the left click on Selector
Go to div.nav-scroller and select .nav-scroller on the popup
Now on the Timeline Editor on the right side, click on blank space to create new transition
Click on the blue transition bar to edit transition popup should appear

Currently we are only adding some CSS properties, that is we are only working on the appearance. So for the transition type we are going to use Set.

On type select Set
On Position enter 0
Click on Add property > go to NoT Animated CSS > select Position
On Position select Fixed
Again click on Add property > go to Position > select Top
On Top enter 0
Similarly click on Add property > go to Position > select Left
On Left enter 0
Now click on Add property > go to Dimension > select Width
On Width enter 100%

Also let’s add z-index

Click on Add property > go to Position > select Z index
On Z index enter 9999

Now you should see our menu block floating over the page, but it has no background. So let’s add white background and a shadow so it separates from the page white background.

Go to the same transition setting on the timeline editor.

Click on Add property > go to Background > select Background
On Background enter white
Now click on Add property > go to Shadows & Filter > select Box Shadow
On Box Shadow enter 0 2px 3px #efefef

We already have a floating menu block now, because this interaction is already triggered. You can check the scroll progress on the Scroll Scene settings, which now should be showing 50%. If you scroll you can see the change. This is because Start on has Enter selected.

This can be helpful while working on Scroll Scene. Another helpful setting is Show indicators. You can enter a label Show indicators which will help you to see the trigger position. Let’s enter menu reveal and now you can 3 indicators:

Start menu reveal – is where animation starts, by default it is at the top and not visible right now
Trigger menu reveal – is the point where animation starts
- If Start on is Enter – trigger is at the bottom
- If Start on is Center – trigger is at the center and
- If Start on is Leave – trigger is at the top
End menu reveal – is where animation ends

We need it to be triggered after we scroll a few 100 pixels, let’s say 500px for this one. So let’s work on the Scroll Scene settings to make it work.

On Duration enter 0
On Start on select Leave
On Offset enter 500px

Now you should see the green indicator, so our animation should start when this green indicator scroll past the trigger point, which is currently at the top.

Still our interaction is not working as it should. So let’s change that.

Go to Animation 1
Click on Advanced Options
On Play > select Independently

Another thing we should do is enable Reverse in opposite direction

Now if you refresh the page and check. Our menu block will remain normal as the page loads. But when we scroll past the scroll position, it appears again.

Right now our menu appears quickly and doesn’t look animated. So let’s add a new transition to our animation.

Go to Timeline editor
Click on purple Set transition bar
Click Add new property > go to Transform > select Y
For Y enter -100%

Now add a new transition by clicking on the blank space inside the timeline editor.

On the popup, keep the type as Tween

On Position > enter 0
On Duration > enter 0.2
Now click on Add property > go to Transform > select Y
For Y enter 0%

Now scroll the page and check, our menu should hide and re-appear with subtle transition. Our menu reveal interaction is done, but you can see our page content jumps when Menu re-appears. This is because, area covered by Menu block is removed from the layout, as position: fixed is applied.

We can fix this by adding the same amount of the space to the element below or top. That is we can add margin or padding to these elements. We can do this by manually calculating the height of the menu block which is 52px with the margin.

Now on the same TImeline editor

On the left click on Add timeline
Click on Selector
Now select the top div.container element which is above the menu block
Now on the right side of the Timeline Editor, click on blank space to create new transition
Click on the blue transition bar to edit transition popup should appear
On type select Set
On Position enter 0
Click on Add property > go to Dimension > go to Margin > select Bottom
On Bottom enter 52px

Now check the page and you should get the same smooth menu reveal and content doesn’t jump now.

This shows one method of how you can reveal the menu using a scroll interaction. You can hide or show any elements on the page with the same concept. You just have to work on the CSS and Transition depending on your need.

This concludes our tutorial for making a Menu Reveal with Pinegrow Interactions. I hope the video was helpful.

If you’ve any questions please feel free to contact us via email or through the Pinegrow forum.

We will be coming up with more videos related to Pinegrow Interactions and How to videos for creating more interactive animations. So keep watching and following.

Thank you for your time and we will see you in the next video.