I use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

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.

COIDEA - Interactive Modal with Funny Animations

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