Integrate code from codepen

[As_Gen]

Hi guys!

I’m trying to insert one nice case from codepen. I’ve tried to make it like here but it shows me white page.
Here is my public link https://preview.webflow.com/preview/1111-f6d72d?preview=71edea70d8e47e0ca90c4b73a1c7fd55
Please help to solve it or share some advise how to use codepen’s cases.

[aaronocampo]

Maybe this can help:

How to embed files hosted on Github

1a. Get embeddable link from any github resource. Open file in a new tab Click on “Raw” [image] 1b. Change URL of raw file Change URL from raw.github.com or raw.githubusercontent.com to cdn.rawgit.com (VERY IMPORTANT OR SCRIPT WON’T WORK!!!) Copy changed URL See also: How to host text files on Github Also, feel free to contact me for further code help and/or customization of third-party plugins

[StuM]

Maybe @Waldo can help as he advised on that link you mentioned

Or the uber-cool - @micahryanhtml - who posted this video on his youtube channel a few days ago regarding custom codepen code:

[mistercreate (Micah Johnson)]

Thanks, @StuM! I’m just trying to be uber-cool like you.

Hi @As_Gen,

Definitely a great question.

I was able to implement the CodePen code into a Webflow site, and the following are links for the implementation -

• Live Site: http://css-transitions-codepen.webflow.io/
• Share Link: https://preview.webflow.com/preview/css-transitions-codepen?preview=03df71a63e2e0e3b0e29dcfba6148067

I did the following:

1. Compiled the CSS, copied, and pasted into the head of the site
   
2. Compiled the JS, copied, and pasted before the closing body tag
   
3. Then, I copied and pasted the HTML into an embed element

I do think this interaction can be completed using Webflow’s IX2 interactions. I’ll definitely look into that, also.

Hopefully this helps

Feel free to reach out if you have any questions.

Best regards,
Micah

[As_Gen]

Thanks a lot! You are super cool:slight_smile:
So difference between yours and mine procects is that js scrypt has to be insert to before instead of to head area.
Should experiment more:)

[As_Gen]

Thnaks! It can be useful:)

[As_Gen]

I’m trying to understend logic about how to use codepens’s cases in webflow. And next case isn’t work - I can’t get it. There are some external scripts - I tried to put it in head area and in footer area - nothing, it shows just a blank page.
I decidet to ask in this topic and not to make new one as your answer was very quick and helpful.

[As_Gen]

My public share link: https://preview.webflow.com/preview/1111-f6d72d?preview=71edea70d8e47e0ca90c4b73a1c7fd55

[mistercreate (Micah Johnson)]

https://preview.webflow.com/preview/1111-f6d72d?preview=71edea70d8e47e0ca90c4b73a1c7fd55

Great question, @As_Gen.

When you get a chance - could you provide the link to the CodePen?

I’ll definitely take a look

[As_Gen]

Oh! I’m sorry:sweat_smile:
Here is a codepens link: https://codepen.io/iremlopsum/pen/aqvKJL

[mistercreate (Micah Johnson)]

Hi @As_Gen,

This CodePen was a bit different. I was unable to compile the code to get it working. However, inspecting the code allowed me to copy what the browser was showing.

The steps to get the app to work includes the following:

1. Inspect the code
2. Locate the index.html file
3. Copy code, and paste in the head of Webflow site
4. Copy codes, and paste before the end tag of Webflow site
5. Finally, add Div element to site, and give it an ID name of “app”

The following are the Webflow links:
Live Site - http://tabs-with-elastic-border.webflow.io/
Share Link - https://preview.webflow.com/preview/tabs-with-elastic-border?preview=3c3df52daf5fc91a2dcb4988b49a371a

I think this interaction could also be completed with IX2. I’ll look into it also to see what we can come up with

Hopefully this helps.

Best regards,
Micah

[As_Gen]

Nice trick Thanks for sharing!

So there is only one difference - this script <script src="//static.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script>
It’s not in CodePen’s settings or somewhere else (exept source code from inspection), what it does? (go read PHP guide fellow )

And also I’m very interested in implementation elastic menu with webflow’s IX2.

[mistercreate (Micah Johnson)]

Hey @As_Gen,

I was able to recreate the CodePen with transitions in Webflow using IX2.

You can view the site at the following links:
Live site - http://css-transitions-ix2.webflow.io/
Share link - https://preview.webflow.com/preview/css-transitions-ix2?preview=aceb8fc743bcb51730fa485382ed3588

Hopefully this helps

I plan to make a short video about how I recreated it soon, and I’ll let you know.

Best regards,
Micah