Modal Dialog Box Using GSAP, Cycle & Splittext

[hackfin]

For fun I modified an old jQuery plugin I wrote to create modal dialog boxes so I could try out some of the new features in GSAP 1.18.  My goal was to create a plugin with the following features:

1. Automatic sizing regardless of dialog contents.
2. All the standard features you would expect from a dialog plugin.
3. GSAP animation using splittext and cycle.
4. A simple method to change the coloring scheme of the dialog without changing the underlying css or requiring a complex string of styling options.  To achieve this I utilized the relative HSL feature.

So far, I am pretty happy with the results so I thought I would share it with the community.  Feel free to fork any improvements, additions, or corrections.  If anyone finds this usefull, let me know and I will add it to Github as a jQuery plugin once I have had a chance to review and finalize the javascript.  I also attached the js file for the plugin since the js on Codepen is minified.

 

 

 

 

alphaDialogCodepen.txt

See the Pen mVwywQ by hackfin (@hackfin) on CodePen

[pixeldroid]

Nice job.  How about making it draggable?

[Carl]

HI Hackfin,

 

Thanks so much for sharing. Really cool to see all the different ways it can be configured. 

 

If you're looking for suggestions, it might be fun to play with different animations for revealing the dialog like "scale bounce", "3D flipX", etc.

[hackfin]

Carl, I haven't even addressed the initial (or closing) display effects other than a simple fade but I will definitely try a couple of effects.  Maybe what I should do is turn all of the animations into callback functions like follows:

 

1. onDisplay 
2. onHide
3. onButtonMouseOver
4. onRenderText

This would obviously keep the size down on the plugin while offering the user the most flexibility.  What are your thoughts?

[Carl]

Yes it sounds like providing those hooks for the user would be helpful.

[hackfin]

I have finalized this project and published it on GitHub.  The javascript plugin creates a modal dialog box that is easy to style and animate using the GreenSock library.  For the animations, the user has 6 hooks available so that the user can create their own animations.  The user can animate:

• the overlay
• button hover
• close icon hover
• message text
• display of the dialog
• closing of the dialog.

If you are interested, contributors are always welcome.  I am still wet behind the ears when it comes to GreenSock and welcome any criticism.  The main webpage for the project with examples can be accessed through the link below:

 

http://dbs6.github.io/StyleBox/