mannycode

Thanks guys, @mikel your code is clean and with more easy logic. You understood my issue, but the only thing I wanted to do is use the same "main-navigation" nav, without create another div with another nav. Basically I want to create only one nav tag (to improve S.E.O.) and write less html code. Does it make sense for you? @Carl I hope you get it too. Thank you again for your support.

Thanks guys, sorry it was my first time ... now I've followed the instructions and my pen is more tidy. Any suggestions on my issue? Thanks, Manny

Hello guys, I'm finding my code too complicated at this point. What I want to achive is add another class to a div when the screen size is < 768px. After that I'd like to assign an animation to this particular double class, in my example is : .main-navigation.mobile Unfortunately nothing works, probably because greensock starts when the page is loaded and not when the screen is resized. What do you think ... the code is above: var $window = $(window); var toggleNav = $('.toggle-nav'); var mainNav = $('.main-navigation'); var mainMenuList = $('.main-navigation.mobile ul li'); // Timeline for the Main Menu var tl_menu = new TimelineLite({ paused: true, reversed: true }); tl_menu .staggerFrom(mainMenuList, 0.3, { autoAlpha: 0, x: 10, ease: Power1.easeOut }, 0.2) // Resize window function resize() { if ($window.width() < 768) { return mainNav.addClass("mobile"); } mainNav.removeClass("mobile"); } $window .resize(resize) .trigger('resize'); $(".toggle-nav").on('click', function () { $('.menu-overlay').toggleClass("open"); tl_menu.reversed() ? tl_menu.play() : tl_menu.pause(0).reversed(true); }); Thanks, Manny