Jump to content


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

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



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();

    // 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
    .staggerTo(topBlockStagger, .75, {transformOrigin: "0 0", scaleY:1, ease: Power2.easeIn}, -.15)
    .to([menuButton, logoContainer], 0, {visibility: "visible"})
    // **** THIS IS THE BIT I MEAN
    .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) {


Link to comment
Share on other sites

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: 

... "-=.85"

... (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.

  • Like 4
Link to comment
Share on other sites

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.



  • Like 2
Link to comment
Share on other sites

No problem! Happy to help. 

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.