Search the Community
Showing results for tags 'screensize'.
Found 1 result
-
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