3d folding panel
April 30, 2015 | 120 Feedbacks

3D Folding Panel

A secondary content panel that folds flat, powered by CSS Transformations and jQuery.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

3D fold effects are pretty popular nowadays, mostly because they have been integrated quite often in mobile apps. A beautiful example is the iOS Peek Calendar app. Thanks to CSS3 transformation and transitions, we can create a similar interaction in the browser!

Sometimes these 3D effects feel too strong, unnecessary. It’s a point I can’t argue with. However, there will be cases when you need to load content, a process that requires time (even if it’s just half a second). In these cases an animation can be a nice way to replace a loading bar, or a loading gif. Besides, with the growth of native apps built on top of web frameworks, learning how to create complex CSS transformations is an ace up your sleeve ;)

Creating the structure

The HTML is structured in 2 main elements: an unordered list, containing the .cd-item blocks and wrapped in a <main> element, and a .cd-folding-panel element, containing the panel content (.cd-fold-content) and the 2 folds (.left-fold and .right-fold).

Adding style

To realise our animation, we used CSS3 Transformations applied to the .left-fold, .right-fold, .cd-main and .cd-item elements.

The 2 folds are created animating the ::after pseudo-elements of the .left-fold and .right-fold.

On mobile, we animate only the right fold (.left-fold element has a display: none): by default, the .cd-folding-panel (and its child .right-panel) has a position fixed and covers the entire viewport (but its visibility is set to hidden), while the .right-panel::after is translated to the left and rotated (translateX(-100%)  rotateY(-90deg), with transform-origin: right center).
When user clicks one of the .cd-item, the .cd-main content is translated to the right (using the .fold-is-open class), while the .right-fold::after is translated into the viewport and rotated back (using the .is-open class assigned to the .cd-folding-panel).

On desktop devices (viewport width > 1100px), both ::after pseudo-elements are animated: the .cd-folding-panel is now placed in the center of the viewport (width: 800px), the .left-panel and .right-panel have a float: left and width equal to half of their parent (400px). Their ::after pseudo-elements are both rotated (rotateY(-90deg)) and translated to the left (.left-panel::after – translateX(100%)) or to the right (.right-panel::after – translateX(-100%)).
When user clicks one of the .cd-item, they are translated to the left (:nth-of-type(2n+1)) or to the right (:nth-of-type(2n)), while both ::after pseudo-elements are translated and rotated back (rotateY(0) translateX(0)).

One important note: each ::after pseudo-element has, as default vanishing point for its 3D space, the center of its parent (so in our case, the center of the .left-panel and .right-panel). For the animation to work properly, we changed perspective-origin of these 2 elements in order to have the center of the viewport as vanishing point.

Events handling

In the index.html file, the .cd-fold-content element is initially empty.
When user selects one of the .cd-item elements, we used the load() function to insert the proper content inside the .cd-fold-content (we created a new html file – item-1.html, item-2.html, … – for each .cd-item in order to store the new content).
Once the new html content has been inserted, the proper classes are assigned and the animation is triggered.

Note: we implemented a basic load() function to upload new content, but you may want to replace it with, for example, a proper $.ajax call in order to handle errors, beforeSend request etc. according to your project.


June 1, 2015
  • Fixed bug - scroll up if there's visible content below the gallery
May 25, 2015
  • Fixed bug on Chrome 43.0.2357.65
Apr 30, 2015
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • Efren Castillo

    Beautiful! Thanks!

  • geetpurwar

    Very Awesome. I love this!

  • amit


  • Kyle Rolfe

    When you open up Title 3 and Title 4 on iOS the height of the content isn’t 100% like it is for Title 1 and Title 2. Thoughts? Is that just the weird iOS7 bug that stems from using vh units?

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Kyle, I haven’t test the resource on iOS7 yet (just iOS8), but it could definitely be the vh units. I’ll check and try to fix this bug. Thanks for the heads up ;)

  • Surjith SM

    Hello Team,

    Enjoying your gems, Really wonderful. Just one doubt, how do you create header images for each posts. like this one http://0bf196087c14ed19d1f11cf1.ambercreativelab.netdna-cdn.com/wp-content/uploads/2015/04/3d-folding-panel-featured-new.png

    Thank you,

    • Leandro Ruel

      probably using illustrator to draw this image

    • http://codyhouse.co/ Sebastiano Guerriero

      Photoshop, I try to keep the design minimal by drawing only basic shapes. Anyway something like this can be easily created in any graphic tool ;)

  • Anthony Alaribe

    wonderful work

  • Elie Herrera

    Hey Sebastiano! Nice work as always.
    Just one question:

    Is there a way to change the overflow-y behaviour on the fold-content and allow scrolling with the browser scroller instead?

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Elie! The overflow-y: auto was necessary –> in case there’s more content, users can scroll, otherwise the content is cut since the parent element (.cd-folding-panel) has an overflow: hidden. If you remove some content, you’ll notice the scrollbar will disappear

  • سیما عظیمی

    hello, great work Sebastiano.. howevery when i downloaded, everything works except the content of the files (item-*.html) don’t load. the blank page load with no content. I implemented on my project and exactly same behavior.. any suggestions please?

  • http://giometri.com egiova

    It looks gorgeous on mobile devices. Very creative idea. Felicidades, estupendo trabajo.

  • https://kubiq.sk KubiQ

    nice idea, but you should also force vertical scrollbar to be always visible, because there is a strange”jump” at the end of closing

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi there! The problem is we need to set an overflow: hidden to prevent scrolling, since the folding panel is in position fixed on top of all the rest of the content (it’s not really pushing the gallery items). I don’t know if there’s a way to keep the scrollbar even if scrolling is not possible, I’ll check into this though

      • https://kubiq.sk KubiQ

        Maybe something like event.preventDefault() or event.stopPropagation() on scroll event ;)

  • pixelbombmedia

    Looks fantastic! Wonderful work :)

  • Muhammad Anwar

    Just awesome

  • Thomas Blanchard

    I got a problem. When i’m download this template and i try to use it in local, there is nothing in the white pages. Can you help me ?

    • http://jettdigitals.com/ Terry

      Check out the “developer console” and most likely you will see some info. Most likely something about “Cross origin requests”. Using a local server or uploading to web account will solve the issue.

  • Dido Market

    Great! Thank’s ;)

  • Zach Saucier

    Nice work! It’d be nice to be able to click straight from one to the other without having to close it each time though.

    • http://codyhouse.co/ Sebastiano Guerriero

      Good suggestion! With the next update we may include a navigation to surf through the panels without having to close the current one

  • http://twitter.com/ConAntonakos Con Antonakos

    Thanks, @seguerriero:disqus! Do you have these gems available on GitHub or anything like that?

  • http://braginteractive.com Brad Williams

    I really liked this, so I made a WordPress Theme out of it. If anyone else wants to use it, you can download it here: https://github.com/braginteractive/peekwp

  • http://slotcaracademy.com JW (van Capelleveen)

    Hi I like this a lot. How can I manage that a js script (for Facebook icon or so) is visible at the folded page? Hope this is possible Sebastiano (great work).

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi there! Not sure what you mean, but if you want to include a script inside the content of a panel, you can do that by editing the item-x.html files ;)

      • http://slotcaracademy.com JW (van Capelleveen)

        Hi Thanks. But let me put it this way. The Google add is not working in the item-1.html. Though, the same add does work in the index file. Do you know why. Do you have a trick?

  • Krzysztof Polasik

    Hi, Sebastiano! 3D Folding Panel is another great effect of yours that I like a lot! Unfortunately, as Thomas Blanchard mentioned in some previous comment, I am getting a blank screen when I click on the panels. It seems as if the js did not load the content. Is there any way you could help with that? I have already tried downloading your code from Github but I experience the same issue. Regards,kp

    • http://codyhouse.co/ Sebastiano Guerriero

      looking into this, thanks for the heads up

      • http://slotcaracademy.com JW (van Capelleveen)

        I had this problem to but after publishing it is working in all browsers. I still have a probleem with the scripts (facebook, linkedinscript etc) which do not work in the item-x.html files.
        Do anybody face this problem?

        • Krzysztof Polasik

          Hi, JW! Thanks for a hint. It did work for me. Furthermore, I am facing the same difficulties as you are while trying to add some script into the item-x.html. For instance, I wanted to insert the responsive tab navigation into of the item-x.html. Switching between the tabs does not work, whereas there are no issues with it in the index file. Any help will be greatly appreciated. : ) Regards,kp

  • Bea

    Hi Sebastiano! Does this work with meteor app too?

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Bea! It should, our resource is just a bit of html/css/js therefore any framework integration should be possible

  • Maksym Lynnyk

    Hello Sebastiano! Thanks, it works like a charm!

  • Rubber Bertrand

    Hi Sebastiano, I am trying to add and play with contents in the header (adding or but nothing is showing and I can’t quite figure out why. Could you help me understand why?

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi there! have you tried removing all the style I used for the header? Right now there’s an h1 element with a line-height = header height, which may push away the other content.

      • Rubber Bertrand

        Yeah–I realized that about a day after I posted but forgot to update. Am completely new to this and learning by playing with code I find so I miss what should be obvious things very often. Thank you for your help, and for the resources!

  • Miguel G

    HI there

    Love this and have implemented into my project. Thank you so much.

    There is however an issue that I was hoping you could help me with.
    When you open a panel, the page scrolls up hiding the header and only showing the panel content in the background. This is fantastic.
    However I have additional content bellow the panel content. When opening a panel, it does not scroll up thus it shows the additional content in the background, not under the overlay.
    Currently on your Demo you do not have any content bellow the panel content so you cannot see this issue.

    Is there a way to make the page scroll down when opening a panel the same way its scrolls up? I hope I am explaining the issue clearly. I have attached a screenshot showing the issue.

    Thanks so much for your help.


    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Miguel, got it. We should add in js a way to calculate the gallery position compared to the viewport, then smoothly scroll up if there’s content below and the user clicks on a gallery item. It should be similar to what we did for the “scroll down” effect, just with a bit more variables to consider. We didn’t include it yet because if the gallery is too short there could be a contrast between the 2 forced scrolling effect.

      We’ll include asap an example in the article about how to implement this ;)

      • Miguel G

        Hi Sebastian…

        That would be so so amazing!

        Thank you so very much for considering this. You rock!


        • http://codyhouse.co Claudia Romano

          Hi Miguel, fix it now! you can download the new version ;)

          • Miguel G

            Hi Claudia
            You guys are simply amazing!
            Thank you so much for doing this! It’s perfect!

            You rock! :)

  • Fenwick17

    Hello, I created a page using this and it works brilliantly, thank you!
    However, when I go to use it on and iPad first edition with Safari it appears fine, until you click a view more link and the content which gets loaded in does not display.
    The fold-panel that comes in is just a blue box, does not even pull in the css for white background. Any ideas?

    • http://codyhouse.co/ Sebastiano Guerriero

      that’s odd, I’ll double check and see if there’s a bug :)

      • Fenwick17

        Thank you. Only platform it appears to not work correctly on, no issues anywhere else.

  • Managyck

    Congratulation for your beautiful templates!
    I found a little inconvenience with this 3D-folding one. Sometimes once you open a panel and close it, you cannot scroll anymore the front one. I have check with your demo and the same issue happens.
    I have mix your template with your modal circle menu and it works, all mixed with Xml->Php workflow and it is very nice, thanks. http://www.buiquocchau.org as a flyer for morning massages and http://www.multireflex.ovh for a FileMakerGo app presentation.

  • http://casinoave.com/ RichardCave


    I thank you for this. It may just be what I was looking for.

    The project I am currently building has a slider on the front page that I don’t really fancy and I’d like to inquire if this can be a fitting replacement for the primary content visual (e.g. my slider).

    The reason I am asking is because of two thoughts:

    1) The current look of the site is too plain and I wonder if that can be adjusted by including a folding 3d model.

    2) The slider will have an iframed online games in it and from the article I understand this is a good way to make it unnoticeable.

    Project in question: https://www.casinoave.com/ (Note: Casino Avenue black box in the middle with all the games symbols is an inactive slider)

  • oshri

    Hello dear friends
    I really do not understand programming or design , but this design is stunning and I really want to add it to my site how I’m doing this alone has a short code
    I’d be happy for a detailed explanation by email or here

  • Aisha Ghazanfar

    Hi, I tried this on my wordpress website but i dont know why the javascript is not working. When i press ‘view more’, it doesnt show anything :s. It works on JSFiddle though :/

    • TummyTimmy

      I’m experiencing the same problem. The content from the outside html file is not loading into page. Any updates on the issue?

  • bn

    I’m in love with this folding panel, it’s really great work!
    I’m working on a simple site where I use this template, but I have a problem. Is that possible that I can’t use jQuery functions in the opened content panel? I load some text and images into that and I’d like to use a simple click event on one of the images but it doesn’t work. I can use the same code everywhere else, but something is wrong when I’d like to use that in the folded content.
    Sorry if it’s a stupid question, I’m studying using jquery.
    Thanks in advance!

    • Justin Freeman

      I’ve been having similar issues, try loading a js file underneath line 41 using $.getScript(“jsfolder/yourfile.js”, function() {});

      This solved my issue, hopefully it will do the same for you.

      • bn

        Thank You for your help!
        I’ve found a solution since I’ve commented here. My problem was that the element what I tried to click on wasn’t exist in the DOM because the opened content panel is loaded dynamically. I’ve used jquery .click() what didn’t work, but .on(‘click’) works fine.
        But thanks a lot for your answer!

  • Jawad Arif


    I am using above snippet in my website but its giving 500 internal server error on item click

  • Justin Freeman

    Hi Sebastiano,

    First, your work is incredible. The folding panel effect is perfect for a client’s site, but a form is needed for one of the pages (contact). Looks like an issue with loading some of the javascript (of which I’m not really well versed in the first place) so any suggestion on getting some js to load within the 3d pages? here’s the test environment: http://freemanforhire.com/ekwede/index.html

    Thanks in advance!


  • Prasad Mudholkar

    great work …!!!!
    but i m facing some issue with content display in folding panel, i cant see my text/ images in folding panel
    pls help me

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi there! It works only if uploaded to a server (because of the js load function). You could try an app like http://anvilformac.com/ if you’re on a mac

  • FRKodes

    Hey what’s up, do you have the code on github or so? I have found a little bug and I want to help about it.


    • http://codyhouse.co/ Sebastiano Guerriero

      Hi there! our github profile: https://github.com/CodyHouse


      • FRKodes

        Thanks bro, I just wanted to do a pull request but it seems like Claudia Romano fixed the bug, just yesterday! cool


  • Chris Swanger

    can this be used for images? like a portfolio image viewer? or does it only handle text?

  • Mark

    it doesn’t work in Safari. what can I do?

    • http://codyhouse.co Claudia Romano

      Hi Mark, I just tested it in Safari (8.0.6 – Mac) and it works fine. Which version are you using? and which issue are you experiencing? Please note, we didn’t test it on Safari for Windows because it’s an outdated browser ( the last update has been released more than 2 years ago)

  • http://dannyalbeck.com/ Danny Albeck

    @seguerriero:disqus Was wondering if it would be possible to make the URL change to add a
    #item1, #item2 and so on when the content is displayed, and in
    conjunction to that could you link direct to it and have it opened?
    Appreciate the feedback!

    • Sarah Dulaney

      Danny – Did you get this to work?

  • Victory Matibiri

    Mate you are pure genius! Thank you.

  • stetch02814

    Hello, I have implemented this into my WordPress website and have the single post loading into the content fold using the permalink. Everything works well on desktop but when I try to open them on mobile the content doesn’t load. The strange thing is if I go into any other page on the site and then come back and open one of them the content loads. Any ideas? I appreciate it!

    • TummyTimmy

      I’m experiencing an issue within WordPress where the content is not loading within the folding content area. Works on my local setup fine. Does not work on my ‘live’ server. Any updates on your issue? Thanks.

  • Tony

    Help me understand “@import ‘bourbon'; // http://bourbon.io/” – is this something that needs to be installed? I’m trying to use this with WordPress html5 blank theme without success. Any info/help/advice/direction is appreciated!

  • Jose Azua

    @Sebastiano Guerriero anyway to see a demo with the fold outs happening vertically instead of left and right?

  • Andie

    I just noticed when I open a modal and close it on mobile (Android/ Chrome) and on tablet Chrome & FF, the site is no longer scrollable.

    I’m guessing it’s to do with the JS add/remove class of ‘overflow-hidden’. Can you let us know a fix?

    • Andie

      I added a class on line 56 (after close modal)

      and it seems to have resolved it.

  • Nick Williams

    I am having trouble getting the item-x.html pages to work. My changes to these files are not taking effect. The only one that did take my changes was the first one and don’t know why the others won’t work. Using this with MAMP but not sure where the issue lies.

    • Lynxthelovedone

      Me too… any luck?

      • http://xpgraphics.org Nick Williams

        Not really. The only way I was able to see my changes was actually to rename the html file and link in the other one each time. I also discovered they worked when the four html files were odd numbers. Really wierd

  • http://www.wizardofslo.com Frank P

    In the article, you left out this little gem which breaks everything if you don’t use the source download or go inspect the demo to find it…

    function viewportSize() {

    /* retrieve the content value of .cd-main::before to check the actua mq */

    return window.getComputedStyle(document.querySelector(‘.cd-main’), ‘::before’).getPropertyValue(‘content’).replace(/”/g, “”).replace(/’/g, “”);


  • Pixi Buex

    How to apply the dark layer to entire page rather than just .cd-gallery when the .cd-folding-panel is open?

  • frailamerica

    I wanted the header to be centered in the middle of the page, so I removed the space that the header originally made at the top. Then I add the following classes to to each quadrant to make all four boxes equal size and fill up the entire page (only on larger viewports):

    @media only screen and (min-width: 800px) {
    .nw { position:fixed; width: 50%; height: 50%; top: 0; left: 0; }
    .ne { position:fixed; width: 50%; height: 50%; top: 0; left: 50%; }
    .sw { position:fixed; width: 50%; height: 50%; top: 50%; left: 0; }
    .se { position:fixed; width: 50%; height: 50%; top: 50%; left: 50%; }

    This all works fine, but problem now is that when an index-#.html is open, you no longer see the four quadrants in the background.

    Here are two screenshots showing the difference. The first is the modified view, and the second is how it should look.

    Any help would be greatly appreciated!

  • Soul

    Hi I am very new to html and css coding. I would like to use this design or template for my project website. We are using codeigniter I would like to know how should I add this codes into my codeigniter folder.

    I have codeigniter ‘Home.php” as my default controller and ‘home_body’ as loaded inside Home.php. I tried copying all of this codes inside home_body(view php file inside the home controller). but when i tried loading the page it only loads the html codes like the “title 1….etc.” (texts only and bulletins). I also added the downloaded files inside the codeigniter folder such as js, css, img but nothing happens (mywebsite folder is named ‘myweb’). I think the design is not loading but I dont know why, or maybe I am doing or adding the codes wrong (as i’ve said I’m new with this). honestly i just tried adding these codes inside the header also tried it in the body just to try if it’ll work.

    So, pls if anyone could patiently teach me step by step on how to apply this design on my project i would love to learn it thank you!

  • http://dffernandez.com/ Daniel Fernandez

    Sebastiano. Great Work!

    This was asked before but never answered.

    How can I make the black background (When the window opens) cover the whole screen and not just the gallery?

    Also. On mobile ( Iphone 6) when you click on an item and the window opens, it keeps scrolling even though there is no scrolling text. Additionally, you can see part of the website behind it (at the bottom).

    How can these be fixed?

  • alexander castillo

    is there a way to integrate this into drupal 7? I really want to have a wordpress like backend for my sales people. but im on drupal and cant find another one of theres in a drupal module. any help would be great

    • Easy

      Yes, you can load the content of your Drupal pages in the panels like this for example:

      – change the HREF (at line 4 of the index.html..etc) to the URL of your Drupal page
      – change the class at line 25 of main.js to #section-content like this:
      ….load(url+’ #section-content’, function(event)….

      Make sure you do this from the same domain or you will get an error in the console.
      Good luck

  • Max Frost

    Hi, I have a question. Why does my cat $ (“. Foto”). Magnific Popup ({type: “image”, gallery: {enabled: true}});I do not want to work for the opening page of ” item-1″, when I remove the class “cd-fold-content” and open the page in a browser magnifIcPopup works, but otherwise dc code does not work, what am I doing wrong?

  • Jose Colem

    working in ie8

    edit javascript:

    function viewportSize() {
    if( $(“html”).hasClass(“ie8″) ) {
    return ‘desktop';
    } else {
    return window.getComputedStyle(document.querySelector(‘.cd-main’), ‘::before’).getPropertyValue(‘content’).replace(/”/g, “”).replace(/’/g, “”);

    and html:


    and css:

    .ie8 .cd-fold-content{
    background: #FFFFFF;
    width: 60%;
    left: 0;
    right: 0;
    margin: 100px auto 0;
    height: auto;

    • Sarah Dulaney

      Hi Jose!
      Thanks so much for putting this together. Unfortunately, I am unable to get it to still render/function in IE8. Any chance at all I could please borrow your eyes offline?

  • patinet

    I tested on multiple browsers the online demo, it’s ok, but the downloaded file does’t work well, the content inside the sheet only seen in Firefox, not in Chrome, Opera or Internet Explorer. What could be the problem? Thanku

    • http://codyhouse.co Claudia Romano

      Hi, please take a look at Prasad Mudholkar comment below. Thanks

      • patinet

        Still not seem, only in firefox

  • ArchDeluxxe

    Great transition effect. Just one suggestion… The panel opens in the callback of the jquery .load() method. This means that there could be a delay after a user clicks on a tile (if they have a slow connection or a slow webserver, for example). A better user experience might be to open the panel first, display a spinner or throbber, then make the .load() call, and hide the spinner in the callback once the content has loaded.

  • Gema Gayubar

    Thanks!!!, I’ve used this template in http://palaciodeverano.es/placement
    It’s awesome!

  • fuse

    great work! i have only one problem: if i scroll down at one item and close it, open another item -> the scroll position will be the same. is there an easy way to scroll on top everytime? sorry for my english. hope anyone understand my problem :-) it exists on mobile and mac (tested in firefox and chrome)

  • Miguel G

    Hi guys.

    Just wondering if you have found a fix for the issue reported by the user bellow?

    To explain again… Open a panel, scroll down and and close it. Open another panel – the scroll position will be the same as the previous panel.

    Additionally, is there a way to add a “Next/Previous” to the open panel?

    Thanks for your help.


  • Miguel G

    Hi guys…
    Have you stopped supporting this? I could really use help with the issue I described bellow.
    Or anyone else willing to help?

    Thanks so much.

    • http://codyhouse.co Claudia Romano

      Hi Miguel, you should try setting scrollTop to 0 to the .cd-fold-content element once the modal is closed. Hope this helps!

      • Miguel G

        Thanks Claudia.
        It was a bit more complicated that that. This is the code I added:

        var foldable = $(‘.cd-folding-panel’);
        var foldable_content = $(‘.cd-fold-content’);

        if (foldable.hasClass(‘is-open’)) {
        if (!scrollFixed) {
        scrollFixed = true;
        } else {
        if (scrollFixed) {
        scrollFixed = false;

  • Amber Robertson

    Hi there! Simple question that may have already been answered, but how do I change the text that is held inside the folding panel? I can’t find it in the index or css, so I’m wondering where it is? Thanks.

    • Miguel G

      Hi Amber

      Each folding panel has its own HTML file.
      item-1.html, item-2.html, item-3.html and item-4.html

      Just open each file and edit the content as needed.

      Hope this helps.

      • BrlessKoin

        Hi Miguel, I’ve just edited my external HTML files, but there’s some tags that just dont appear into the panel, as an example links!… any suggest?

  • BenComicGraphics

    doesn’t work. Throws out an Uncaught TypeError: Failed to execute ‘getComputedStyle’ on ‘Window': parameter 1 is not of type ‘Element’.

    • http://codyhouse.co Claudia Romano

      Hi there, I just tested it (on Chrome) and it works just fine. Are you experiencing this issue with our demo or your local version? which browser are you using? Thanks

  • http://www.lucadolci.com/ Luca

    Great script!
    but what happens if there’s more .cd-gallery on the one-page in different sections? how can i scroll inside the specific section and not the first section .cd-gallery?

  • Jurjen Vos

    Okay , so I’m loving this! Problem is, I want to use it in combination with https://codyhouse.co/demo/3d-bold-navigation/

    I added the code to the projects.html, but it doesn’t work. Once you click the link it links to the page itself, I think it doesn’t get loaded into the DOM.

    I suspect it doesn’t work because the projects.html is inserted into the DOM and is being loaded, but the item1/2/3/4.html is not loaded into the DOM? I really have no idea..

    It does seem to work on the index.html, so I guess it’s DOM insertion related.

    Any ideas would be helpful!


  • Rob Simmonds

    I cannot get this to work with an older version of jQuery. Using 2.1.1 is breaking other elements of my website – please help.

  • tlga ezn

    Hi codyhouse, i use Chrome Version 51.0.2704.106 (64-bit) – and i can´t see the text of the item html on my local files. Safari Version 9.1.2 (11601.7.7) works fine. Could you help me please?

    • tlga ezn

      Is someone here who can help me? :(

      • tlga ezn

        ok…online works fine – also chrome…

        • qing

          Check your console. I got this issue: “XMLHttpRequest cannot load file:///….item-1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.”

  • vincent edelin

    Hi Codyhouse,

    Thinks a lot for all your goods ideas and your sharing.

    Someone is using you work in a bad way…

    • http://codyhouse.co Claudia Romano

      Hi Vincent, thanks for the heads-up! the item has been removed now ;)

      • vincent edelin

        your welcome Claudia, enjoy your day !

      • Marcos Moraes

        Good morning Claudia, how are you?

        Can you help me about the Page Scroll Effect? How can I include the anchor links in the website?


  • tlga ezn

    Hi Cody, how can i add a iframe?

  • Masood

    Cant get it to work with with chrome, On clicking the folding effect appears but the content does not appear
    . I am using chrome. And i cant upload the picture either. Can anyone help ?

    • Hiteshi Acharya

      did you find the solution?

  • Miguel G

    Hi guys

    Is there any way to link to a panel? So that when the link is clicked, it the panel opens?


  • http://www.multireflex.com Managyck

    […] I found a solution for the scrolling back to top issue:
    Add a line in the JS after line 4: pageContent = $(‘.cd-fold-content’);
    And then after ±line 57 else {
    /* close the folding panel */
    var mq = viewportSize();

    It works fine for me now, you can check this fantastic 3DfoldingPanel layout that I like so much at http://www.kits.dienshop.com
    ›hope it helps