Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
GreenSock

Read This First: How to Create a CodePen Demo

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:

    https://codepen.io/GreenSock/pen/VoZNxw

     

    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

     

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

    https://codepen.io
    • Like 14
    • Thanks 2
    Link to post
    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

    ×