Hey everyone I made a JavaScript with ScrollMagic and GSAP what is resizing the font-size on scroll. As soon the JavaScript is fired by scroll the media-queries of my CSS don’t work anymore. One need to reload the page. I additionally tried to check media queries with another javascript but it don´t work.
Here is the JavaScript, HTML and CSS:
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
duration: '100%',
triggerHook: 0,
})
.setTween(".wm",
{
fontSize: '39pt',
padding: '0.3em 0 0 0.2em',
margin: '-0.05em'
})
.addTo(controller);body, html {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
max-width: 100vw;
overflow-x: hidden;
font-size: 18px;
background: red;
}
.box {
position: fixed;
background: yellow;
width: 100vw;
height: 15vh;
z-index: 999;
text-align: left;
}
main {
border-top: 2px solid red;
margin-top: 100vh;
width: 100vw;
height: 100vh;
font-size: 10vw;
display: inline-block;
height: auto;
line-height: 1em;
text-align: center;
}
.wm {
font-size: 60pt;
font-weight: 600;
color: #004c3f;
padding-top: 0.1em;
letter-spacing: -0.055em;
line-height: 0.8em;
padding-left: 0.075em;
margin-left: 0;
}
@media (max-width: 575px) {
.wm {
font-size: 60pt;
font-weight: 600;
color: #004c3f;
padding-top: 0.1em;
letter-spacing: -0.055em;
line-height: 0.8em;
padding-left: 0.075em;
margin-left: 0;
}
}
@media (max-width: 575px) {
.wm {
font-size: 90pt;
}
}
@media (min-width: 576px) {
.wm {
font-size: 12em;
/*margin-left: 0;*/
}
}
@media (min-width: 768px) {
.wm {
font-size: 15em;
/*margin-left: 0;*/
}
}
@media (min-width: 1200px) {
.wm {
font-size: 20em;
margin-left: 0;
}
}<!DOCTYPE html>
<html data-bs-theme="light" lang="de">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>ScrollMagic</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<div class="box">
<p class="wm">Head</p>
</div>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ullamcorper velit. Quisque luctus molestie nibh id ultricies. Nam convallis, sapien ac aliquet finibus, risus nibh aliquam augue, in scelerisque felis ante quis ante. Aliquam pharetra in tortor quis ultrices. Cras ut lacus semper, scelerisque tortor eu, imperdiet leo. Fusce id ante felis. Duis vel faucibus metus, sit amet lacinia quam. Aenean scelerisque enim eu venenatis pharetra.<br><br> Morbi tempus elit id lorem viverra, et iaculis magna egestas. Nulla sed interdum magna. Nullam laoreet lacinia nibh, ac pretium odio molestie nec. Nullam facilisis semper lacus, non pulvinar nisl fringilla ac. Phasellus enim odio, posuere sit amet risus vel, venenatis gravida dui. Proin mollis nec velit id malesuada. Quisque lacinia, enim sit amet semper facilisis, purus nibh ullamcorper ipsum, id tristique justo tortor id nisi. Nullam mattis tincidunt mauris non porta. Ut vel finibus orci. Nunc eu mattis nisi, eget condimentum lacus. Aenean turpis orci, mollis quis metus ut, mattis sollicitudin quam. Fusce urna enim, ornare nec ullamcorper eu, hendrerit at neque. Aenean gravida convallis mauris, eget faucibus massa. Cras consequat ipsum velit, et feugiat est posuere nec. Praesent porta felis vel dui pellentesque, lacinia dignissim odio varius.<br><br> Curabitur non molestie enim. Donec sollicitudin, odio a tempor facilisis, magna quam auctor nisi, vel varius lectus sapien sit amet augue. Vestibulum in ante nec arcu hendrerit facilisis in sit amet orci. Aenean id vulputate massa. Quisque eu dapibus nisi. Mauris lorem nisl, condimentum a lorem et, posuere porta tortor. Mauris dictum purus tristique, mollis dui non, rhoncus metus. Integer metus risus, porta vitae rhoncus nec, auctor sit amet lacus. Pellentesque laoreet tristique quam, ut sodales tellus interdum sed.<br><br> Etiam efficitur arcu sit amet diam tincidunt, eget euismod neque fermentum. Vivamus faucibus eros in mi vulputate dictum. Praesent ligula quam, posuere sed euismod id, egestas vel metus. Aliquam mollis tincidunt viverra. Suspendisse potenti. Pellentesque placerat mi nec convallis faucibus. Ut nisi sapien, interdum sed varius ac, venenatis vel nisi. Sed nec odio ut diam mattis convallis. Ut facilisis dui dolor. Praesent varius sit amet lorem sed sagittis. Mauris convallis neque mollis eros fermentum, in molestie mauris tristique. Sed vel mollis neque, vitae mattis tortor.<br><br> Nullam egestas finibus venenatis. Mauris lacinia semper ante, eu congue massa ultrices ut. Integer fermentum mattis odio. Ut in semper diam, ullamcorper hendrerit augue. Nullam facilisis, lacus vel varius scelerisque, lorem odio bibendum ante, sed faucibus felis metus ut tortor. Ut volutpat varius placerat. Sed accumsan molestie laoreet. In nisl ante, ullamcorper nec nisl a, feugiat varius tellus. Maecenas tristique imperdiet ultrices. Donec quis est sapien. Etiam sit amet tellus vel sem lobortis commodo. Donec pulvinar consequat fringilla. Morbi sed orci massa. Sed egestas libero vel condimentum egestas. Pellentesque aliquam lectus sit amet neque accumsan sagittis. </p>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
</body>
</html>