jstafford

I was posting this followup right as you posted Carl. I will try your suggestion. I removed the "open menu" stuff as it wasn't part of this problem here. The red and blue was just a way to color code which link in the main menu fetched the corresponding submenu. I tried to be a clear as possible. I will do my best to help you as much as I can.

worth noting, you can see that when the background is set to a color, it indeed blocks out the submenu. fairly sure my problem has to do with figuring out a way to get the page transform to occur without including the menu stuff in the html and body. my attempts so far have proven unsuccessful. http://codepen.io/jstafford/pen/QymKLK

Here is the setup, 95% of which is already working. "#mainMenu" is the main menu and has two dropdownLinks, "#dropdownCategory1" and "#dropdownCategory2" "#submenuCategory1" (red color) is the first submenu that is triggered to come into view by the "#dropdownCategory1" (red color link) in the #mainMenu "#submenuCategory2" (blue color) is the second submenu that is triggered to come into view by the "#dropdownCategory1" (blue color link) in the #mainMenu There are two backlinks: "#backLinkCategory1" is the topmost red container that if clicked sends you back to main menu from the "#submenuCategory1" (red menu) "#backLinkCategory2" is the topmost blue container that if clicked sends you back to main menu from the "#submenuCategory2" (blue menu) You can see a working prototype of this "inter menu animation" here. http://codepen.io/jstafford/pen/EPEPqz I am trying to integrate it with it with this page transform animation as well. Again, the page transform works fine. http://codepen.io/jstafford/pen/dGmMPG However, when integrating the two here: http://codepen.io/jstafford/pen/yevGzv, I run into problems with the html, body layer masking pointer events on the submenu. Really not sure how to solve this and keep the page transform and inter menu animation effects both working together.

http://codepen.io/jstafford/pen/yevGzv ; z-index to layer each menu proved to be the solution on last part

doh! closing tags on my submenus were off. http://codepen.io/jstafford/pen/adqPWP Last question, I am switching my autoalpha to 0 when things stagger off screen. Shouldn't he new stuff take up the top left most space when it comes in? Do I need to go to a display of "none" . Autoalpha deals with display: "hidden" and opacity: 0 . So, things still take up space. I would like it to be so that things enter and leave at the top, not where they are introduced in the DOM.

thanks PointC. Yes, I am still new to the x and y . Intuition would tell me the x:200 would move it positive 200 relative to the right of where it is (in the case -200). I guess it is more absolute. Not sure why I didn't find the .container you just mentioned. Thanks again. http://codepen.io/jstafford/pen/bELOEw The above codepen takes into account what you told me but I still don't understand a few things. Why is an interMenuLink element getting inside both conditional blocks and triggering both submenus to appear? I am trying to gain as much javascript knowledge as I can, but I don't understand what is going on here? There are two elements with class interMenuLink, one with #mainCategory1 id and the other with #mainCategory2 id. Selecting one should cause only one submenu to appear?

Also, don't worry about the backlink part yet. I am doing that next. I am just focused on the mainMenu --> submenu1 and mainMenu --> submenu2 animations right now. Pretty sure this last question is a real Greensock question b/c my javascript code is being hit as expected but the TweenMax is not doing what I expect? I initially set each submenu offscreen with the following init() function : TweenMax.set($("#submenuCategory1"), { autoAlpha: 0, x: -200 }); TweenMax.set($("#submenuCategory2"), { autoAlpha: 0, x: -200 }); To bring them back in when their dropdownLink is clicked I do the following, but nothing is happening. TweenMax.staggerTo($("#submenuCategory1 .container"), 0.5, { autoAlpha: 1, x: 200, ease: Back.easeOut }, 0.125); } TweenMax.staggerTo($("#submenuCategory2 .container"), 0.5, { autoAlpha: 1, x: 200, ease: Back.easeOut }, 0.125); }

http://codepen.io/jstafford/pen/GoQwMe ; new codepen here. Got it working to where the main menu staggers out to the left, but neither submenu staggers in from left when their respective dropdownLink is clicked in the main menu?

Hmm....I may be dealing with a click event happenning on the container element and not on the ".interMenuLink" element like I was expecting.

Hi, I greatly reduced my last codepen and I am reaching out for your help on this. Pretty straight forward problem here. 1) #mainMenu is the main menu and has two dropdownLinks 2) #submenuCategory1 - first submenu that is triggered to come into view by the #mainMenuCategory1 dropdownLink in the #mainMenu 3) #submenuCategory2- second submenu that is triggered to come into view by the #mainMenuCategory2 dropdownLink in the #mainMenu #mainMenuCategory1 (red color) triggers the staggering in from the left of the #submenuCategory1 (matching red); main menu staggers back to the left #mainMenuCategory2 (blue color) triggers the staggering in of the #submenuCategory2 (mathcing blue); main menu staggers back to the left I initially set the #submenuCategory1 and #submenuCategory2 off screen and stagger the mainMenu in when the page loads I expect when you click either #mainMenuCategory1 or #mainMenuCategory2 it would trigger my callback to initiate this animation, but nothing happens

Hmm...I may have a confusing question. I am going to try and further reduce this codepen. Using one timeline, if menu element has class "selected", it staggers into view and if menu element does not have class "selected" it staggers out of view. I am going to use one timeline that works with class "menu" and "selected" to stagger in and out the menu containers based on whether backLink (top most container of either dropdown menu; ushers current dropdown menu out and main menu back in) or dropdownLink (2nd and 3rd container of main menu; click of either one ushers main menu out and ushers in respective dropdown menu) is clicked . I will give this new one timeline version a shot in a few hours. By the way, the red and blue background color of the dropdown link containers of the main menu corresponds to the respective dropdown menu container colors that will stagger in from left when a dropdownLink is clicked.

Hi, Really struggling to get this working. If there is a simpler way of doing it, I am all ears. My aim here is that when dropdownLink category is the selected the original working animation on the main menu reverses itself and the dropdown menu items stagger in from left to take their place. When a backLink (topmost choice on submenu) is selected, the submenu items reverse again and the main menu comes back . Struggling , to get the dropdownLink to respond to my click to reverse the mainMenu beginning animation to reveal the dropdown submenu. I am very aware now of multiple timelines having the possibility of acting on the same property, but not sure this is the case.

I understand Carl. I tried to make this initial codepen as reduced as possible because I know you guys deal with a lot of analysis of other people's code. Not one of my forte's. I moved the external script to the end of the DOM and it worked fine.

it was fixed when I put the external javascript into my window.load in the index.html. Now this is not necessarily where I want to keep it, but I am trying to understand my the script.js wasn't fully processed by the time it got inside the following: $(window).load(function() { init(); function init() { initMenuRevealAnimation(); } });

variable scope problem? something that is recognized while in codpen but not in in local?

Admittedly, I am not a JQuery or JavaScript expert, but would like to become one eventually. Why is it that when I break up this solution into index.html, script.js, style.css files it stops working. Feeling very helpless right now. //index.html <!DOCTYPE html> <html> <head> <!-- dependencies --> <script src="dependencies/jquery-2.1.4.min.js"></script> <script src="dependencies/jquery.gsap.min.js"></script> <script src="dependencies/TweenMax.min.js"></script> <script src="dependencies/DrawSVGPlugin.min.js"></script> <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"/> <link href="http://fonts.googleapis.com/css?family=Playfair+Display:400italic" rel="stylesheet"/> <script src="script.js"></script> <link href="style.css" rel="stylesheet"/> </head> <body><!-- load imgs via ajax with src below --> <div id="mainMenu" class="menu"> <div id="closeMenuContainer"> <div id="closeMenu"> </div> </div> <div class="navLinkContainer"><a id="mainCategoryHome" class="navLink"></a></div> <div class="navLinkContainer"><a id="mainCategoryInsuranceProducts" class="navLink"></a></div> <div class="navLinkContainer"><a id="mainCategoryFinancialProducts" class="navLink"></a></div> <div class="navLinkContainer"><a id="mainCategoryClaims" class="navLink"></a></div> <div class="navLinkContainer"><a id="mainCategoryContact" class="navLink"></a></div> </div> <div class="site"> <div class="pageContentContainer"> <div id="homePageContent" class="pageContent"> <div id="openMenuContainer"> <div id="openMenu"> </div> </div> <p><strong>GSAP</strong> Page Transform<br></p> </div> </div> </div> <script> $(document).ready(function() { $(window).load(function() { init(); function init() { initMenuRevealAnimation(); } }); }); </script> </body> </html> //script.js initMenuRevealAnimation(); function initMenuRevealAnimation() { menuRevealHideAnimation($("#closeMenuContainer")); menuRevealHideAnimation($("#openMenuContainer")); } var tl = new TimelineMax({paused:true}); tl.set('.pageContentContainer', { perspective: "1200px" }); tl.set('#homePageContent', { transformOrigin: "100% 50%"}); tl.set(".site", {pointerEvents: "auto"}); tl.to('.pageContent', 0.5, {opacity: 0.5, scale: 0.7, rotationY: -60, ease: Back.easeInOut },0) .to('.pageContent', 0.25, {scale: 1}, 0.5) .to(".site", 0.01, {pointerEvents:"none"}, 0.5); function menuRevealHideAnimation(el) { $(el).on("click", function() { if(!$("#mainMenu").hasClass("open")) { openMenu(); $("#mainMenu").addClass("open"); } else { closeMenu(); $("#mainMenu").removeClass("open"); } }) function openMenu() { tl.play(); } function closeMenu() { tl.reverse(); } } //style.css #closeMenuContainer { width: 50px; height: 50px; z-index: 0; left: 24%; top: 1.5%; border: 1px solid red; } #openMenuContainer { position: absolute; width: 50px; height: 50px; right: 1%; top: 1.5%; border: 1px solid blue; } .menu { position: absolute; z-index: 0; width: 35%; height:auto; } html, body { height: 100%; background: #B8B6B4; -webkit-font-smoothing: antialiased; } .site { margin: -7px -7px; height: 100%; overflow: hidden; } .pageContentContainer { position: relative; z-index: 2; width: 100%; height: 100%; overflow: hidden; } .pageContent { position: absolute; top: 0; left: 0; overflow: hidden; z-index: 0; width: 100%; height: 100%; background: #e74c3c; box-shadow: 20px 20px 15px 0px #939290; } .pageContent p { position: absolute; top: 50%; width: 100%; text-align: center; font-family: Montserrat, sans-serif; font-size: 75px; text-transform: uppercase; color: #fff; font-weight: 400; margin: 0; line-height: 1; } .pageContentt p strong { font-weight: 700; } .pageContent p em { font-family: 'Playfair Display', serif; text-transform: none; font-style: italic; font-weight: normal; font-size: 25px; margin-top: 7px; display: block; }

Thanks Carl.

Hi, so here is the idea for what I want to do. - Click on the blue square in upper right and the page transform occurs revealing menu underneath. - Click on the red square when the menu is open, and another page transform occurs closing the menu and revealing page again I am having difficulty understanding what is going on here. I am only using one timeline and when I click on the red square the timeline stalls out . Not sure why? Here is an example of the open and close effect occuring automatically without the click triggering the event. http://codepen.io/jstafford/pen/zrzEoj

Going with ui-router, thanks for the angular and greensock examples Blake.

option + optimizing = "optioptimizing" Ha, not sure what happend there.

This is good to know. I am relying on outside people to do my SEO, but will of course focus on optioptimizing content and images so it is optimally crawled. I have to believe the Google, Bing, and other modern search engine algorithms are sophisticated enough not to ding you for loading svgs via ajax. It sure does allow me to keep html and svg changes seperate and give me a cleaner workflow.

Well, here is a much cleaner and simpler solution using a combination of Blake and PointC's stuff they have helped me out with along the way on this. http://codepen.io/jstafford/pen/rxmoLW Now for dropdowns... : O

And yes Blake, I did miss the hover object you returned in my rewritten hover function before PointC's one timeline clean and simple example. I understand now, but think PointC's scrap of my 2 timeline overcomplicated design makes a lot of sense. I'll keep you guys posted.

You guys are awesome. Thank you PointC and Blake. This is a lot to chew on. I will be working through this for weekend learning. PointC , while I am trying to keep my svg code seperate from html and relying on ajax to load my svg, your simple design is very much appreciated! One timeline sounds a lot better with fewer headaches. I am very much an imitator of design at this point and very much in need of people like you and Blake with more experience in writing this stuff. I was originally a Java developer who is at the moment learning and wiring a angular js front end to a REST Java Spring framework back end. Thanks for this example Blake. I use Tomcat as my local server during development but will definately try this angular page ushering setup.

Anyone have time for more suggestions on this?