Modal windows, modal boxes, dialog boxes, light boxes, overlays, call them what you want, that little box that pops up in the middle of the screen and demands your attention is probably one of the most used design patterns. The primary benefit of modal boxes that they avoid the need to use conventional window pop-ups or page reloads. Modal windows can be used to ask your site visitors to perform an action (such as subscribing to your email newsletter) or for sharing an important message. You can love them or hate them, but modals are here and will stay, for sure.
As we know, everyone wants to have and/or tries to make an amazing website. In the end, we want to be able to ‘wow’ people when they come to our websites. We also want them to love the site so much they’ll come back or share it with their friends. We want our clients to love it so much, they’ll want to give a bonus — or at least a recommendation. Now, imagine one world where modals are as cool as these amazing websites and the people say 'wow, such a cool modal', too!
As said, you can love them or hate them. For example, I hate them and I see this article as the first step in the reconciliation process.
As in many cases so far, the base for almost all animations is GSAP's TweenMax and its TimelineMax. Because there are different characters inside and around the modals, it is necessary to make one timeline for each of these characters. All timelines are triggered by clicking and/or hovering certain elements on the page, such as the main or secondary "Sign Up" button, the "Close" Icon, or when writing text inside the "Email" field.
I hope you liked the way I created modal animations and find my demo inspiring and funny!
References and Credits
- The inspiration for effects and Layout comes from Minh Pham
- TweenMax by Greensock
- imagesLoaded by David DeSandro
- Font Montserrat by Google Fonts
- Simple Loader by loading.io
- Monster Vectors created by Freepik
- Landscape Vector created by Freepik
- Correct and Close Icons by Freepik from Flaticon are licensed by CC 3.0