Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mannycode

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

Recommended Posts

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

Link to comment
Share on other sites

Hello @mannycode and welcome to the GreenSock Forum!

 

Looks like you were missing the jQuery JS and the TweenMax JS. You can add those by going to the JS panel. Click on the Gear icon and use the dropdown in codepen to add a JS library.

 

This video tut by the mighty @Carl can help on how to add JS GSAP to your codepen:

 

 

Happy Tweening! :)

 

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Sorry, I don't really understand the effect you want. 

You have like 800 lines of css and I don't understand what the nav should do when you apply the mobile class. It looks to me that its being hidden of screen somewhere. In cases like this the simpler you can make the demo the better.

 

I think in general what you need to do is create the animations that you need when the resize event meets the condition you are testing for, not before.

I think you were getting at this with your question. You can't create an animation on page load for something with class of mobile BEFORE that class has been applied. 

 

you can do something like this

 

function resize() {
  if ($window.width() < 768) {
    mainNav.addClass("mobile");
    TweenLite.to("body", 1, {backgroundColor:"white"})
    return;
  }
}

 

Or instead of creating a tween or timeline in the resize() function you can call another function that creates the animation

function resize() {
  if ($window.width() < 768) {
    mainNav.addClass("mobile");
    animateNewThings();
    return;
  }
}



function animateNewThings() {

  TweenLite.to("body", 1, {backgroundColor:"white"})
  TweenLite.to(".mobile", 1, {color:"green})

}

 

If you need more help please describe more of what you need to happen. Thx.

  • Like 2
Link to comment
Share on other sites

Hi @mannycode,


The code, the CSS and especially the concept of mediaqueries are indeed too complicated. I can only agree with Carl.

 

Here is just a rough implementation of my view of things in the sense of KISS: Keep it simple and stupid!

 

 

See the Pen 80ed6d45b7549547392b879caeb20421 by mikeK (@mikeK) on CodePen

 

In this sense
Mikel

 

 

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×