Jump to content


Read This First: How to Create a CodePen Demo

Moderator Tag

Recommended Posts

We love answering GSAP-related questions, but in order to get you a fast, accurate answer, it is very important that you provide code we can test.


Your problem may be related to CSS, HTML, or JavaScript (or a mixture of those). If you only provide a tiny code snippet (outside of its context), it's difficult to diagnose. And it's just not practical to read large chunks of code in a forum post. We need code that we can dig into and play with...quickly.


We are big fans of CodePen.io, an online editor that allows you to create (and share) demos that are easy to inspect and edit. They make isolating issues much faster.


    Watch How it is Done:



    GSAP 3 Starter Pen:



    To create a demo with all of GSAP including every bonus plugin:

    1. Click the Edit on CodePen button
    2. Click the Fork button to create your own copy.
    3. Add the minimal amount of HTML, CSS and JavaScript necessary to replicate your issue.
    4. Save the pen
    5. Paste the URL of your pen (demo) into a new forum topic with a short description of the problem.
    6. Include OS, browser and device information where applicable. 


    CodePen is completely free to use and you don't even have to sign up or log in. We do recommend creating a free account as it will allow you to save and organize your pens and much more.


    Some helpful tips to keep in mind:

    • Isolate the problem.
    • Create a demo from scratch.
    • Don't copy your whole project.
    • Make demos focused and concise.
    • Use stand-ins for content.


    The special "trial versions" of the bonus plugins also work on the following domains:


    Use the pen below to easily copy and paste the urls to the bonus plugins:


    See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen


    Additionally, if you are creating a follow up demo or want to continue making changes after you've gotten a solution please make sure to use the "Fork" button in the bottom right of the CodePen window. This will help context not to be lost in our forums when other people view the thread later and allows us to better keep track of how your demo is being changed.


    Thanks for your cooperation. We look forward to helping you.

    • Like 19
    • Thanks 2
    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.