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:

 

 

GreenSock Bonus Starter Pen

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

 

To create a demo with all of the tools in TweenMax and every bonus plugin:

  1. Click Run Pen in the demo above
  2. Click the Edit on CodePen button
  3. Click the Fork button to create your own copy.
  4. Add the minimal amount of HTML, CSS and Javascript necessary to replicate your issue.
  5. Save the pen
  6. Paste the URL of your pen (demo) into a new forum topic with a short description of the problem.
  7. 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.

 

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 10
  • Thanks 2
Link to comment
Share on other sites

  • 1 year later...

Hi Carl,

 

May we embed a CodePen pen into the forum body for easier access for everyone?

  • Like 1
Link to comment
Share on other sites

It's a nice idea but at the moment that functionality is not supported by our forums.

 

EDIT: 2018 -- now you can just paste in the url of your pen and it will be embedded.

Link to comment
Share on other sites

  • 5 months later...

Hi world :)

How can I embed stuff like SplitText and other bonus content? :)
I tried to upload them on my ftp and then link to codepen but it throws me

"Failed to load resource: net::ERR_INSECURE_RESPONSE"
Probably my ftp is just lame, anyway I would really appreciate some help.

Love your stuff btw ;)
 

Link to comment
Share on other sites

Hi patryksmakosz1,

 

Welcome to the GreenSock forums.

We would love to help, but I'm not sure where you are getting that error or what you are trying to do.

As a member you should have no problem using the bonus plugins that you download from this site.

 

It sounds like you may be loading some assets using http on an https page but I do not know.

 

Do you have a link we can look at?

Link to comment
Share on other sites

if you want to test/play with Club GreenSock bonus plugins on Codepen , you can find codepen safe version here ( which can only be used on codepen ) : 

 

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

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

Thank you both for interest Carl and Diaco. I had not noticed your posts.

I wanted to play with multiple member plugins on codepen - Diaco solved that :)
Thanks again, now I can tween anywhere !
   

Link to comment
Share on other sites

  • 8 months later...

Hi Friends,

 

I am new here and will learn more about greensock to use it in my web applications/websites.

 

Best,

BG

  • Like 1
Link to comment
Share on other sites

  • 4 months later...

I think if your greensock issues are really css, which i find often, you may want to try css tricks they have a forum...

  • Like 1
Link to comment
Share on other sites

  • 2 months later...
  • 5 months later...

If anyone have issues with embedding Codepen links (like I had), here's the answer - you need to hit space after the link! 

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
  • 5 weeks later...

Does anyone know how to link/reference react-gsap in codepen?  Doesn't look like a CDN exists for that library. 

  • Like 1
Link to comment
Share on other sites

1 hour ago, ericnguyen23 said:

Does anyone know how to link/reference react-gsap in codepen?  Doesn't look like a CDN exists for that library. 

 

I think unpkg.com does stuff like that. So, for example: https://unpkg.com/react-gsap@1.2.0/dist/index.js (It's not minified, though). 

Link to comment
Share on other sites

38 minutes ago, GreenSock said:

 

I think unpkg.com does stuff like that. So, for example: https://unpkg.com/react-gsap@1.2.0/dist/index.js (It's not minified, though). 

 

Thanks - although when added to the pen 

See the Pen vwORxr by ericnguyen23 (@ericnguyen23) on CodePen

  it's still not working. If you remove the wrapping <Tween> tags, the svg will appear; that's how I'm troubleshooting it. 


 

Link to comment
Share on other sites

Sorry, that's not something we really support. I'm not a React guy, and the "react-gsap" project isn't in any way associated with GreenSock (apparently they're using our code, but we didn't author that project). Perhaps you could ask the author? 

 

It looks like there are some errors being thrown in the console regarding exports not being defined. Perhaps it's a configuration issue(?)

 

If you have any GSAP-related questions, we'd be happy to help. 

Link to comment
Share on other sites

Thank you both for interest Carl and Diaco. I had not noticed your posts.

I wanted to play with multiple member plugins on codepen - Diaco solved that :)
Thanks again, now I can tween anywhere !

  • Like 1
Link to comment
Share on other sites

11 hours ago, GreenSock said:

Sorry, that's not something we really support. I'm not a React guy, and the "react-gsap" project isn't in any way associated with GreenSock (apparently they're using our code, but we didn't author that project). Perhaps you could ask the author? 

 

It looks like there are some errors being thrown in the console regarding exports not being defined. Perhaps it's a configuration issue(?)

 

If you have any GSAP-related questions, we'd be happy to help. 

 

No worries, good to know.

 

I'll look into implementing gsap using https://greensock.com/react documentation; I'd rather have the support at this time since I'm a gsap noob.

Link to comment
Share on other sites

  • 7 months later...

It's a nice idea but at the moment that functionality is not supported by our forums.

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.

×