Okay
  Public Ticket #1492361
Adding section and animation
Closed

Comments

  • Seowon Bang started the conversation

    I'm trying to edit the template so that there are two more items on the right and on the left, in addition to the existing 'about' (top) and 'work' (bottom).

    So what I want to see happen is:

    1. Add an element that hangs right of the frame, and another one that hangs left of the frame (similar to how About and Work hang top and bottom of the frame)

    2. When you click on the item on the right, a 'section' pulls open to the left, similar to when you click on About at the top, a section pulls open to the bottom

    3. Vice versa on the item on the left - a section pulls open to the right, similar to when you click on Work at the bottom, a section pulls open to the top

    What I've done so far:

    - edited main.js to add to Page Transitions, and copied the existing top and bottom triggers and replaced them with left and right

    - added slideLeft and slideRight animations to main.css

    - copied .about section and created a new section .partner, replaced 'top' with 'right' and 'pullUp' with 'slideRight', etc

    - added partner section on field-dark.html

    I was able to add an icon to the right of the screen, but I can't get it to 'open' up a section I created for it. The cursor does turn into 'clickable' pointer but nothing happens when I click.

    UPDATE:

    I got the icon to open a section! However it opens up the 'about' section, not the other designated section I created. So the transformation goes left then down (to reveal the 'about' section)

  •  12
    Nick replied

    Hi Seowon,

    Can you please send me a link to your site so we can check out what error you get exactly.

    Thanks,
    Nick


    aetherthemes

  •   Seowon Bang replied privately
  •  12
    Nick replied

    Hi Seowon,

    I can see that there are some issues with your JS. If you go to the main.js file and look at the trigger hooks in the Page Transitions section of the file you'll see that you've bound all of the new triggers that you've created to the about page, like this one for instance:

    rightTrigger.click(function() {
        about.removeClass("idle").addClass("active-screen");
        hero.animate({
            right: 20 + "%"
        }, 500, function() {
        });
        return false;
    });
    

    You are removing the idle class and adding the active-screen class to the about page, that's why it isn't working.

    Thanks,
    Nick


    aetherthemes

  •   Seowon Bang replied privately
  •  12
    Nick replied

    Hey Seowon,

    I can see that you're using undefined variables in your JS now. For instance the left trigger hook you've used the variable 'gears':

    gears.removeClass("idle").addClass("active-screen");
    

    But it's not defined, you should define it in the top where you have defined the other sections:

    // Define variables
    var hero = $("#hero"),
        work = $("#work"),
        about = $("#about"),
        partner = $("#partner"),
    

    Just add the gears one pointing to the element that you wish to trigger.

    Thanks,
    Nick


    aetherthemes

  •   Seowon Bang replied privately
  •   Seowon Bang replied privately
  • Seowon Bang replied

    Update2: SOLVED! I set the wrong direction for gears.active-screen so I corrected it to 'right' and it's working perfectly.

    Thanks for your help!