Jump to content
Search Community

Read This First: How to Create a CodePen Demo

GreenSock test
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, a framework or JavaScript (or a mixture of those). A tiny code snippet (outside of its context), is difficult to diagnose. 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 (lower right corner).
  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.

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Helpful tips:

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

 

The special "trial versions" of the bonus plugins also work on the following domains: codesandbox.iostackblitz.comjsfiddle.net

 

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

 

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

 

Each time you reply to a thread in the forums, please make sure to use the "Fork" button in the bottom right of the CodePen window so that you don't keep overwriting the original CodePen with new changes. This will help context not to be lost in our forums when other people view the thread later. It allows us to better keep track of how your demo is being changed.

 

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

https://codepen.io
  • Like 20
  • Thanks 2
Link to comment
Share on other sites

  • ZachSaucier unpinned this topic
  • 1 month later...

Thank you for providing all these templates! I took some time the last 2 days and tried out most of them (those using three). Unfortunately there is a problem with importing three GLTFLoader or OrbitControls in all of them. Things like "GLTFLoader is not a constructor" are shown as error in the console or even right within the code (Codepen). 
I am aware that this is not a GSAP problem, and by no means do I expect that Greensock should fix the three importing problems. But I thought I should point out the problems, because not in all cases it will possible to post a minimal demo.

Link to comment
Share on other sites

 

Hello there Robert.

 

On 9/29/2023 at 9:36 PM, Robert Wildling said:

Unfortunately there is a problem with importing three GLTFLoader or OrbitControls in all of them. Things like "GLTFLoader is not a constructor" are shown as error in the console or even right within the code (Codepen). 

 

I know that I have definitely done that before without having to import anything.

This older pen is at revision 128 of three.js

See the Pen 0e4f333fc375210ed9236642d3cef8c9 by akapowl (@akapowl) on CodePen


 

 

 

At some point after r128 I think, three.js changed their architecture to use a more modular approach, probably to adjust to more modern coding environments. Nonetheless it should still be possible to add three.js, import models and add OrbitControls, e.g. in Codepen.

 

I found this pen, that is showing how to import OrbitControls and an object via GLTFLoader - it's on r140 of three.js ...

See the Pen VwQveqV by sowhaty (@sowhaty) on CodePen

 

 

 

... and seems to also work fine when updating to the latest revision (which is 157 currently if I'm not mistaken). 

 

Integrating GSAP works just fine, too.

 

See the Pen QWzVwjo by akapowl (@akapowl) on CodePen

 

 


That example is using an importmap (see HTML section) to help import things via JS ...

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap

... and has es-module-shims integrated as a sort of polyfill for cases where importsmaps might not be supported yet.
 

In general, I think the problems you're experiencing are more about getting used to the new ways, the tools you want to use are built in.

Maybe that'll be useful in some way for the future. Happy tweening!

 

  • Like 1
Link to comment
Share on other sites

Hello, @akapowl ! Thank you for your investigation, research and answer - very much appreciated! As a matter of fact I did find all those examples, too, and there are more out there. But none that uses v0.157.0. And with that version I keep getting errors in the source code on all those platforms I listed. I could use an older version, true, but there are enough situations where an answer would be like "Have you tried with the latest version?". And I want to prevent that. (This might not be the case here, since this is an exceptional forum; but I keep experiencing things like that in other forums, so it became second nature to work with the version I use in my projects.) – Eventually all I wanted to add to this post is that there are rare situations where a minimal demo is not really possible, even though some try hard to provide one.

But since @Rodrigo now says that he wants to move the post, I don't even know if it is welcome to post here. Maybe the comment function should be set to "non possible", if there is anything like that?. 

Anyway, @Rodrigo: I did post this comment because I experienced problems when trying to post my other question. But the posts are not related. I think it should not be moved, because this comment here is more of a universal nature pointing out one specific situation where a minimal demo would perhaps indeed not be possible. In that sense I understand my post as indeed very much related to creating a demo.

It is of no great importance to me, though, so if you prefer to keep this post without comments, please feel free to delete them. :-)

Happy tweening to you all, too! And thank you very much for your feedbacks!

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.
×
×
  • Create New...