Streaming live at 10am (PST)

Integrate code from codepen

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.

1 Like

Maybe this can help:

2 Likes

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:

3 Likes

:blush: 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 -

I did the following:

  1. Compiled the CSS, copied, and pasted into the head of the site
    59%20PM
  2. Compiled the JS, copied, and pasted before the closing body tag
    16%20PM
  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 :blush:

Feel free to reach out if you have any questions.

Best regards,
Micah :nerd_face:

5 Likes

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

1 Like

Thnaks! It can be useful:)

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.

1 Like

My public share link: 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 :blush:

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

1 Like

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 :blush:

Hopefully this helps.

Best regards,
Micah :nerd_face:

3 Likes

Nice trick :grinning: 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? :flushed: (go read PHP guide fellow :nerd_face:)

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

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 :blush:

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

Best regards,
Micah :nerd_face:

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.