Jump to content
GreenSock

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

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.

  • Like 10
  • Thanks 2

Share this post


Link to post
Share on other sites

Hi Carl,

 

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

  • Like 1

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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 ;)
 

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
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 !
   

Share this post


Link to post
Share on other sites

Hi Friends,

 

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

 

Best,

BG

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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). 

Share this post


Link to post
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. 


 

Share this post


Link to post
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. 

Share this post


Link to post
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 !

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×