2

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.

fiza khan
  • 1,280
  • 13
  • 24
N. Thompson
  • 85
  • 1
  • 8
  • 3
    Possible duplicate of [JavaScript window resize event](https://stackoverflow.com/questions/641857/javascript-window-resize-event) – SuperDJ Feb 01 '19 at 21:11

2 Answers2

5

You are looking for window.onresize

window.addEventListener("resize", function() {
  triggerOffset = document.documentElement.clientHeight / 2 + 44;
});
ControlAltDel
  • 33,923
  • 10
  • 53
  • 80
2

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(...);
});
MaieonBrix
  • 1,584
  • 2
  • 14
  • 25
  • This seems to be closer to what I'm looking for and also doesn't break my current code. The issue is it still doesn't do what I'm hoping for. I need to refresh for it to calculate. Maybe I need to paste more code for a better understanding. – N. Thompson Feb 01 '19 at 21:33
  • ahhhh Waiiit, you need to update your TweenLite.set things where your triggerOffset is needed I totally missed the point – MaieonBrix Feb 01 '19 at 21:42
  • try my updated example, tell me if the comments are not clear enough I will update them but basically, in my previous example we were just recalculating the triggerOffset value but since this value is used when you are setting the top attribute onto the .contain and .timeligne-trigger we must, each time we are resizing the window, reset the top attributes onto the .contain and .timeline-trigger so that we can ensure that every where the triggerOffset value is need, it got the recalculated value also – MaieonBrix Feb 01 '19 at 21:46
  • follow up question... I have two of these divs and therefore two similar scripts with slightly modified variable names (I added a 2). When I add this code in the first one only, it works fine for the first one. When I add it to the second, it works on the second div and not the first. Do I need to give the resize function two different names? Apologies if that is a novice question... – N. Thompson Feb 01 '19 at 22:11
  • you can put all of your logic in one file and it will work, the issue you are experiencing is that the last script that loads erases the previous window.onresize assignment (window.resize = ...). Or, if you want to keep things separated try using the addEventListener method provided by @ControlAltDel, and put the logic in the callback I will edit my answer but please update your question explaining your current problem – MaieonBrix Feb 01 '19 at 22:14
  • I'd also like the matchMedia if to be a part of the resize. I've tried just copy/pasting that section into the resize section but it doesn't function. any chance you could help again or should I post a new question? – N. Thompson Feb 04 '19 at 19:52