So i have this animation where there is this a h1 and when i scroll down the image zoom out and the h1 follow the image animation, my problem is that when im on mobile or i resize the screen to tablet or mobile i want the animation on scroll to not activate.
i already tried to use the resize function or if screen is > than but it doesn’t work i’m using scrollMagic cdn.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./Css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js" integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll+4ViUFv+XOIr/xaIK96soMj6s5jVszd7I97a0H+WhgFwTEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body class="contenet">
<div class="overflow-wrap">
<header id="header">
<img src="./Asset/Img/1.png" loading="lazy" alt="" id="hero-ui">
<div class="container container--hero">
<div class="hero__header">
<h1 class="hero-heading">The Webflow Expert.</h1>
</div>
</div>
</header>
</div>
<section class="section section--manifest">
<div class="section-header section-header--intro">
<h2 class="fluid-gradient-heading fluid-gradient-heading--hero cc-en">World-class Webflow<br>sites for ambitious<br>companies.</h2>
</div>
</section>
<script src="./JS/app.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
*::-webkit-scrollbar {
display: none;
}
body {
background-color: #1d1d1f;
color: white;
font-family: Inter, sans-serif;
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
#header {
display: flex;
height: 100vh;
align-items: center;
position: sticky;
backface-visibility: hidden;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform-style: preserve-3d;
}
.overflow-wrap {
overflow: hidden;
height: 100%;
}
#hero-ui {
position: relative;
left: 50%;
z-index: 1;
width: 16.9em;
max-width: none;
margin-top: 3.2em;
margin-left: -8.45em;
font-size: 10vw;
opacity: 0;
}
.hero-heading {
will-change: transform, opacity;
animation: fadeIn 0.8s ease;
animation-iteration-count: 1;
animation-fill-mode: backwards;
animation-delay: 0.5s;
font-size: 92px;
}
.container.container--hero {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: auto;
display: flex;
height: 100vh;
max-width: none;
padding-top: 100px;
padding-bottom: 100px;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
z-index: 2;
}
.section.section--manifest {
padding-top: 100px;
padding-bottom: 160px;
}
.section-header.section-header--intro {
position: relative;
max-width: 1050px;
margin-bottom: 0;
}
.section-header {
width: 90%;
max-width: 980px;
margin-right: auto;
margin-bottom: 142px;
margin-left: auto;
text-align: left;
}
.fluid-gradient-heading.fluid-gradient-heading--hero.cc-en {
font-size: 103px;
}
.fluid-gradient-heading.fluid-gradient-heading--hero {
margin-right: auto;
margin-left: auto;
line-height: 1.05;
text-align: center;
}
.fluid-gradient-heading {
background: linear-gradient(91.36deg, #ECA658 0%, #F391A6 13.02%, #E188C3 25.52%, #A58DE3 37.5%, #56ABEC 49.48%, #737EB7 63.02%, #C8638C 72.92%, #DD5D57 84.38%, #DF6C51 97.92%);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-moz-background-clip: text;
-webkit-animation: intro-gradient 10s infinite ease both;
-moz-animation: intro-gradient 10s infinite ease both;
animation: intro-gradient 10s infinite ease both;
}
.fluid-gradient-heading {
margin-top: 0;
padding-top: 8px;
padding-bottom: 8px;
font-size: 92px;
line-height: 1.1;
letter-spacing: -.045em;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
margin-top: 20px;
margin-bottom: 10px;
font-size: 32px;
line-height: 36px;
font-weight: 600;
}
JAVASCRIPT
/*==================== zoom out image ====================*/
let controller = new ScrollMagic.Controller();
let zoomHeader = TweenMax.to("#header", 0.9, { opacity: 1, scale: 0.35, ease: Circ.EaseIn });
let headerZoom = new ScrollMagic.Scene({
triggerElement: "#header",
triggerHook: 0,
duration: "3000ms"
})
.setPin('#header')
.setClassToggle('#header')
.setTween(zoomHeader)
.addTo(controller);
/*==================== smooth link scrooling====================*/
let $root = $('html, body');
$('a[href^="#"]').click(function() {
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
/*==================== Change opacity image ====================*/
$(window).scroll(function() {
let scrollTop = $(this).scrollTop();
$('#hero-ui').css({
opacity: function() {
let elementHeight = $(this).height();
return 1 - (elementHeight - scrollTop) / elementHeight;
}
});
});