I have two variables that calculate the clientHeight, divide by 2 and add 44. It is currently working as intended except if the window is resized, the page needs to be refreshed for it to recalculate clientHeight. Once it is refreshed, it repositions the div correctly. How can I recalculate the clientHeight for each upon window resize so the page doesn't need to be refreshed for it to run the script again and grab the new height?

This is part of an animation that animates based on scroll position. As you scroll down the page, the div animates.

var triggerOffset = document.documentElement.clientHeight / 2 + 44;
var cardHeight = $('#card').outerHeight(true) / 2 + 22;
var duration = 1000;
var requestId = null;

var sceneStart;
if (window.matchMedia("(max-width: 1080px)").matches) {
    sceneStart = 4000
} else {
    sceneStart = 4000
}
console.log(sceneStart); 

TweenLite.set(".contain", {
    top: triggerOffset - cardHeight
});

TweenLite.set(".timeline-trigger", {
    top: triggerOffset
});

TweenLite.set(".start-trigger", {
    top: sceneStart
});

TweenLite.set(".end-trigger", {
    top: sceneStart + duration
});

// SCROLL MAGIC!!!
var tl = new TimelineMax({ paused: true })
.set(".card", {  }, sceneStart)
.to(".card", duration, { rotationY: 180 }, sceneStart)
.set(".card", {  })

// Only update on animation frames
window.addEventListener("scroll", function() {
    if (!requestId) {
        requestId = requestAnimationFrame(update);
    }
});

update();

// Set timeline time to scrollTop
function update() {
    tl.time(window.pageYOffset + triggerOffset);
    requestId = null;
}

I'm hoping to have the position of the card adjust when the window is resized. Currently, the window needs to be refreshed for it to recalculate.

I have two variables that calculate the clientHeight, divide by 2 and add 44. It is currently working as intended except if the window is resized, the page needs to be refreshed for it to recalculate clientHeight. Once it is refreshed, it repositions the div correctly. How can I recalculate the clientHeight for each upon window resize so the page doesn't need to be refreshed for it to run the script again and grab the new height?

This is part of an animation that animates based on scroll position. As you scroll down the page, the div animates.

var triggerOffset = document.documentElement.clientHeight / 2 + 44;
var cardHeight = $('#card').outerHeight(true) / 2 + 22;
var duration = 1000;
var requestId = null;

var sceneStart;
if (window.matchMedia("(max-width: 1080px)").matches) {
    sceneStart = 4000
} else {
    sceneStart = 4000
}
console.log(sceneStart); 

TweenLite.set(".contain", {
    top: triggerOffset - cardHeight
});

TweenLite.set(".timeline-trigger", {
    top: triggerOffset
});

TweenLite.set(".start-trigger", {
    top: sceneStart
});

TweenLite.set(".end-trigger", {
    top: sceneStart + duration
});

// SCROLL MAGIC!!!
var tl = new TimelineMax({ paused: true })
.set(".card", {  }, sceneStart)
.to(".card", duration, { rotationY: 180 }, sceneStart)
.set(".card", {  })

// Only update on animation frames
window.addEventListener("scroll", function() {
    if (!requestId) {
        requestId = requestAnimationFrame(update);
    }
});

update();

// Set timeline time to scrollTop
function update() {
    tl.time(window.pageYOffset + triggerOffset);
    requestId = null;
}

I'm hoping to have the position of the card adjust when the window is resized. Currently, the window needs to be refreshed for it to recalculate.

• javascript
• html
• css

• 3 Possible duplicate of JavaScript window resize event – SuperDJ Commented Feb 1, 2019 at 21:11

2 Answers 2

You are looking for window.onresize

window.addEventListener("resize", function() {
  triggerOffset = document.documentElement.clientHeight / 2 + 44;
});

You can use the window.onresize global event listeners be providing it a function that will simply recalculate your triggerOffset :

// THIS IS THE VARIABLE I WANT TO CHANGE ON RESIZE
var triggerOffset = document.documentElement.clientHeight / 2 + 44;

window.onresize = function() { 
// each time the window will resize this code will trigger

// we re cacalculate the triggerOffset value
    triggerOffset =  document.documentElement.clientHeight / 2 + 44;

// we also need to se reset the top value onto the .contain dom element
// basically since we recalculated the triggerOffset you must also update where this value was needed
    TweenLite.set(".contain", {
        top: triggerOffset - cardHeight

    });

    TweenLite.set(".timeline-trigger", {
        top: triggerOffset
    });
}

    TweenLite.set(".contain", {
        top: triggerOffset - cardHeight

    });

    TweenLite.set(".timeline-trigger", {
        top: triggerOffset
    });

    TweenLite.set(".start-trigger", {
        top: sceneStart
    });

    TweenLite.set(".end-trigger", {
        top: sceneStart + duration
    });

UPDATE :

A better solution if you are using multiple scripts file where you are doing the same logic is using the 'resize' event provided by @ControlAltDel.

In each script file you will add en event listener and put your logic in the callback :

window.addEventListener("resize", function() {
  triggerOffset = document.documentElement.clientHeight / 2 + 44;

  TweenLit.set(...);
  TweenLit.set(...);
});