Change One Timeline value for Smaller Screen Size (without duplicating the entire timeline)

[pauljohnknight]

Hi

 

I have an animation that is all tickety-boo, but on smaller screens (less than 736px) I have a marginally different layout and I need to tweak one animation value.
 

In the code below,  in the part I've highlighted as // **** THIS IS THE BIT I MEAN, I need to weak the value of "-=.85" which causes the appropriate overlap of the timeline, and change this to "-=.5".
 

My question is, can you only do this by copying and renaming the entire timeline function and putting it inside an if(window.innerWidth < 737){}  if statement, and thus change the single value, or is there a more efficient way of doing it?

 

I'm conscious of duplicating a big chunk of code for such a small tweak.

 

function initialIntro1() {
    var tl = new TimelineMax();

    tl
    // set elements for animations
    .set(topBlockStagger, {scaleY: 0})
    .set(row1, {transformOrigin: "left", scaleX: 0})
    .set(logoContainer, {visibility: "hidden"})
    .set(menuButton, {scaleX: 0, visibility: "hidden"})
    .set([leftBlock], {opacity: 0})


    // animations
    .add("vertical-drop")
    .staggerTo(topBlockStagger, .75, {transformOrigin: "0 0", scaleY:1, ease: Power2.easeIn}, -.15)
    .to([menuButton, logoContainer], 0, {visibility: "visible"})
    
    // **** THIS IS THE BIT I MEAN
    .add("horizontal")
    .to([row1,logoContainer, menuButton], .75, {transformOrigin: "left", scaleX: 1, ease: Power2.easeIn}, "-=.85")

    // covers #menu-button and #row-1
    .to(contract, 1, {transformOrigin: "right", scaleX: 0, ease: Power3.easeOut})
    .to([leftBlock], 3.5, {opacity: 1, ease: Power3.easeOut}, "horizontal")

    return tl

}


// call animation on pages 1 and 3 of the site
var masterTL = new TimelineMax();

if (p1 || p3) {
masterTL
    .add(initialIntro1())
}

 

[GreenSock]

Nah, there's no need to re-do the entire function and have all that repetitive code in there. You could just put a simple ternary operator in there: 

//OLD:
... "-=.85"

//NEW: 
... (window.innerWidth < 737 ? "-=.5" : "-=.85")

 

Is that what you're looking for? 

 

Another option is to use an object for various values that are dependent on the window size, like: 

var config = {};
if (window.innerWidth > 737) {
    config.position = "-=.85";
    // add whatever you want.
} else {
    config.position = "-=.5";
    // add whatever you want.
}

tl.to(..., config.position);

 

Hope that helps.

[pauljohnknight]

God, that didn't ever occur to me to use the ternary operator.  That was also useful to use on the duration value as well on a different timeline.

Thanks ever so much.

 

Paul

[GreenSock]

No problem! Happy to help.