How To Animate a Full-Screen Menu Using Motion.page

Published: 15 May 2023
on channel: MotionPage
3,434
78

Welcome back to another video tutorial on how to animate stuff in WordPress using our very own Motion.page platform.

You will use a "click" trigger to activate the animation, which will nicely reveal the content of the menu.

If you don't know Motion.page yet, find out more details about the project on our official website here: https://motion.page

CSS from the tutorial:

display: grid!important;
grid-template-columns: repeat(4, 1fr);
width: 100%;

Timestamps:

00:07 - Intro
00:40 - Open Template
00:51 - Create Header Div/Elements
02:43 - Create the Fixed Element and Items
03:00 - Add Custom CSS to make 4-column Grid
03:55 - Create Menu Links / Container
05:36 - Edit in Motion.Page
06:07 - Animate the Menu Icon
06:18 - Animate the Other Menu Icon
06:42 - Animate the Curtains
08:03 - Animate the Menu Links
10:43 - Outro


Watch video How To Animate a Full-Screen Menu Using Motion.page online without registration, duration hours minute second in high quality. This video was added by user MotionPage 15 May 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3,434 once and liked it 78 people.