Hide a Menu with GSAP3's set() Tween and autoAlpha Property
The gsap.set() tween (or animation container) is a zero-duration tween that instantly applies a property to an HTML element. In addition, there is a subtle but important difference between opacity and Greensock's autoAlpha properties. You will learn how to hide a menu on page load and also how to prevent the element from flashing on page load. This lesson contains Greensock's basic building blocks that are used to create advanced animations with UI elements.
To add the latest Greensock library to your project, go to Greensock's website. Fun fact: GSAP stands for Greensock Animation Platform, and their current latest version is GSAP 3!
A common programming convention for Greensock I like to follow is, if you're going to animate a property with Greensock, keep it in Greensock, otherwise, if you are not going to animate a property, keep it in your CSS.
Erika Ritter: [0:00] Let's take a brief look at our HTML. I have a <nav> element that has a class called side-menu. Inside of <nav> I have several links. This menu, along with its styling, corresponds to what's being displayed here.
[0:19] To make the magic happen I've included our GSAP library at the bottom of our body tag. Let's get to it and go to our JavaScript file to hide our menu.
[0:32] With our menu in its visible state we'll use GreenSock's set tween to initialize our menu to not show up on page load. I'll start by typing out gsap and attach the set method to the GSAP object. Next, I'll pass in our target element which is our side-menu class. Then I'll pass in an object with two curly braces, which is known as the variables object or vars object for short.
[1:04] The set tween or animation container is a zero-duration tween that allows us to immediately tell GreenSock what the starting property value of the target should be. We do this in the vars object, which can handle many different properties. Inside of the vars object, I will set our side menu class to have an opacity of . I'll save this change and my browser auto refreshes.
[1:34] However, there is a problem. The links are still hoverable and interactive, even though the menu does not show. Instead, I'll use GreenSock's autoAlpha property and set it to . I'll go ahead and save that, and we can see our menu is hidden and I am unable to click or hover on the links.
[1:57] The autoAlpha property is identical to opacity in terms of transparency. autoAlpha's value has its visibility set to hidden, and this prevents clicks and any user interactivity. If you have a value > , autoAlpha's visibility is set to inherit.
[2:18] One caveat with a set tween when initializing our side menu with autoAlpha is you may see a brief flash of the element on page load, especially in a prod environment. Let me show you an example. Sandbox shows it best.
[2:38] To prevent this, we can add the property to our CSS visibility: hidden inside of our side menu class. This will stop the elements brief flash on page load.
[2:50] Off screen, I went ahead and applied the same property to our sandbox example. As we can see, this stopped the element's brief flash on page load. Let's go ahead and get back to our example.
[3:05] To review, we use GreenSock's set method to initialize a starting value of our target element which is our side-menu. By placing autoAlpha with a value of in our vars object we hide our menu's visibility and transparency. Finally, to prevent the element from flashing on page load we add the property visibility: hidden in our CSS to our target element side-menu.