[Add class with different screen size and assign an animation to this particular class]

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.

[Add class with different screen size and assign an animation to this particular class]

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

[Add class with different screen size and assign an animation to this particular class]

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

See the Pen NXOJdE by visualcode (@visualcode) on CodePen