Jump to content
Search Community

Media Queries and GSAP

MZBS test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I have this animation that is working perfectly when the window has a width over 1900.

if ($(window).width() > 1900) { 
  var controller = new ScrollMagic.Controller();

  $(".facebook").each(function() {
    var tl = new TimelineMax();
    var child = $(this).find(".facebook-doble-mockup .facebook-mockup:last-of-type");
    tl.to(child, 1, { y: -250, ease: Linear.easeNone });

    var scene = new ScrollMagic.Scene({
      triggerElement: this,
      triggerHook: 0.4,
      duration: "100%"
    })
      .setTween(tl)
      .addTo(controller);

$(window).resize(function() {
  if ($(window).width() < 1900) {
     tl.kill();
  }
 else {
 }
});
  });
}

What i want is that if the window is resized on bigger screens less than 1900 to delete the animation and if is again over 1900 to play again the animation. I tried with the tl.kill but is not doing anything.

 

I see in this forums different questions regarding this but I can't find the right way to do this with this animation.

 

Thank you! 

MZ.

 

 

 

Link to comment
Share on other sites

14 hours ago, mikel said:

Hey @MZBS,

 

ScrollMagic is not a GreenSock product nor is it officially supported here, but GSAP and ScrollMagic work well together.

 

And it is not magical, if you study the docs of scrollMagic e.g. remove

 

 

 

 

Happy tweening ...

Mikel

 

 

Thank you Mikel,

this is working perfectly !!

 

MZ.

 

  • Like 1
Link to comment
Share on other sites

  • 6 months later...
const tl = gsap.timeline();
const leftBackground = document.querySelector('.leftside_menu_background');
const leftIcons = document.querySelectorAll('.leftside_menu_icon_wrapper');

function leftMenuReversed() {
        if (jQuery('body').hasClass('home') || jQuery('body').hasClass('page-template-portfolio') ) {
            tl.staggerFromTo(leftIcons, 0.5, {autoAlpha:1, scale: 1, y: 0, ease: 'Power4.easeIn'}, {autoAlpha: 0, scale: 1.2, y: -20}, 0.15)
            .fromTo(leftBackground, 0.5, {width: leftMenuWidth, ease: 'Power2.easeOut'}, {width: '0px'}, "-=0.15");
        } else {
            // do nothing
        }
};

I would like to set different mediaQuery values for leftMenuWidth. For example 75px for mobiles 100px for ipad and 150px for desktop. How could I do that? 

Link to comment
Share on other sites

const small = window.matchMedia("(max-width: 767px)");
const medium = window.matchMedia("(min-width: 768px) and (max-width: 991px)");
const large = window.matchMedia("(min-width: 992px) and (max-width: 1279px)");

let leftMenuWidth = function mediaQ(media) {
    if(small.matches) {
        return "37px";
    } else if (medium.matches) {
        return "49px";
    } else if (large.matches) {
        return "74px";
    } else {
        // do nothing
    }
};

I've done something like it and it's working

  • Like 2
  • Thanks 1
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.
×
×
  • Create New...