Jump to content


Modal Dialog Box Using GSAP, Cycle & Splittext

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.






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

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 months later...

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:



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.