Variable inside timeline dependen on media query

[tomektomczuk]

Hi I have a timeline where "to" left position is different depending on widows size (mobile: -37px, ipad: -49px, ipad pro: -74px)

 

tl.xxxxxx

.fromTo(hamburgerWrapper.children[1], 1, {left: '0'}, {left: '-37px'}

.yyyy

 

how can I make it work? 

 

[mikel]

Hey @tomektomczuk,

 

Welcome to the Greensock forum.

 

You could create a MediaQuery or more:

 

See the Pen LwyVdY by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[tomektomczuk]

Thank you Mikel, so basically I need to create a three timelines and a three eventlisteners to make it works. I have something like that 

 

function hamburgerMenu() {

    const hamburgerButton = document.getElementById('hamburger_menu');
    const mobileMenu = document.querySelector('.main_mobile_menu');
    const hamburgerWrapper = document.querySelector('.hamburger_wrapper');
    const menuLinks = document.querySelectorAll('.main_mobile_menu_list_wrapper a');
    const twelveBackground = document.querySelector('.main_menu_background svg');
    const leftIcons = document.querySelectorAll('.leftside_menu_icon_wrapper');
    const leftMenu = document.querySelector('.leftside_menu_background');
    const tlHamburger = gsap.timeline({paused: true, reversed: true});


    // Based on _flexboxgrid.scss values
    const small = window.matchMedia("(min-width: 320px) and (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)");
    const xlarge = window.matchMedia("(min-width: 1280px) and (max-width: 1919px)");
    const xxlarge = window.matchMedia("(min-width: 1920px)");


    var smallListener = function(e){
        if(e.matches){

            tlHamburger.staggerFromTo(leftIcons, 0.5, {autoAlpha:1, scale: 1, y: 0, ease: 'Power4.easeIn'}, {autoAlpha:0, scale: 1.2, y: -10}, -0.15)
                .fromTo(hamburgerWrapper.children[0], 0.3, {top: '0px', rotation: 0}, {top: '7px', rotation: -45})
                .fromTo(hamburgerWrapper.children[2], 0.3, {bottom: '0px', rotation: 0}, {bottom: '7px', rotation: 45},"-=0.3")
                .fromTo(hamburgerWrapper.children[1], 1, {left: '0', backgroundColor: '#302d2c', rotation: 0, ease: 'Power2.easeOut'}, {left: '-37px', backgroundColor: '#F5D9C6', rotation: 90},"-=0.3")
                .to(mobileMenu, 1, {visibility: 'visible', width: '100vw', ease: 'Power1.easeOut'})
                .fromTo(menuLinks, 0.5, {opacity: 0, y: 100}, {opacity: 1, y: 0, onComplete: function () {
                        mobileMenu.style.pointerEvents = "auto";
                    }})
                .fromTo(twelveBackground, 0.3,{autoAlpha: 0}, {autoAlpha: 0.2},"-=0.5");
        }
    };

    var mediumListener = function(e){
        if(e.matches){

            tlHamburger.staggerFromTo(leftIcons, 0.5, {autoAlpha:1, scale: 1, y: 0, ease: 'Power4.easeIn'}, {autoAlpha:0, scale: 1.2, y: -10}, -0.15)
                .fromTo(hamburgerWrapper.children[0], 0.3, {top: '0px', rotation: 0}, {top: '7px', rotation: -45})
                .fromTo(hamburgerWrapper.children[2], 0.3, {bottom: '0px', rotation: 0}, {bottom: '7px', rotation: 45},"-=0.3")
                .fromTo(hamburgerWrapper.children[1], 1, {left: '0', backgroundColor: '#302d2c', rotation: 0, ease: 'Power2.easeOut'}, {left: '-49px', backgroundColor: '#F5D9C6', rotation: 90},"-=0.3")
                .to(mobileMenu, 1, {visibility: 'visible', width: '100vw', ease: 'Power1.easeOut'})
                .fromTo(menuLinks, 0.5, {opacity: 0, y: 100}, {opacity: 1, y: 0, onComplete: function () {
                        mobileMenu.style.pointerEvents = "auto";
                    }})
                .fromTo(twelveBackground, 0.3,{autoAlpha: 0}, {autoAlpha: 0.2},"-=0.5");
        }
    };

    var largeListener = function(e){
        if(e.matches){

            tlHamburger.staggerFromTo(leftIcons, 0.5, {autoAlpha:1, scale: 1, y: 0, ease: 'Power4.easeIn'}, {autoAlpha:0, scale: 1.2, y: -10}, -0.15)
                .fromTo(hamburgerWrapper.children[0], 0.3, {top: '0px', rotation: 0}, {top: '10px', rotation: -45})
                .fromTo(hamburgerWrapper.children[2], 0.3, {bottom: '0px', rotation: 0}, {bottom: '10px', rotation: 45},"-=0.3")
                .fromTo(hamburgerWrapper.children[1], 1, {left: '0', backgroundColor: '#302d2c', rotation: 0, ease: 'Power2.easeOut'}, {left: '-73.5px', backgroundColor: '#F5D9C6', rotation: 90},"-=0.3")
                .to(mobileMenu, 1, {visibility: 'visible', width: '100vw', ease: 'Power1.easeOut'})
                .fromTo(menuLinks, 0.5, {opacity: 0, y: 100}, {opacity: 1, y: 0, onComplete: function () {
                        mobileMenu.style.pointerEvents = "auto";
                    }})
                .fromTo(twelveBackground, 0.3,{autoAlpha: 0}, {autoAlpha: 0.2},"-=0.5");
        }
    };

    //Add the listener to MediaQueryList
    small.addListener(smallListener);
    medium.addListener(mediumListener);
    large.addListener(largeListener);

    // Initialise onload
    smallListener(small);
    mediumListener(medium);
    largeListener(large);




    // Allow Hamburger Button to run animation in full
    hamburgerButton.addEventListener('click', (e) =>{
        if(tlHamburger.isActive()) {
            e.preventDefault();
            e.stopImmediatePropagation();
            return false;
        } else {
            toggleMenu(tlHamburger);
        }

    });

    // Allow animation to play reverse
    function toggleMenu(tween) {
        tween.reversed() ? tween.play() : tween.reverse() ;
    };

};