my Javascript knowledge is very limited. I've followed this tutorial: https://www.youtube.com/watch?v=wLUJ9VNzZXo
and all is working as described in video. He cuts off at the "add more text animations" at the end and this is where I'm struggling. I can't get the extra text animations to work. Here is what I have: (the piece I've added is contained between the //Added By Me comment:
const intro = document.querySelector('.intro');
const video = intro.querySelector('video');
const text = intro.querySelector('h1');
const section = document.querySelector('section');
const end = section.querySelector('h1');
const controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
duration: 8000,
triggerElement: intro,
triggerHook: 0
})
//.addIndicators() <-- add this in if you want to see the Animation triggers on the screen
.setPin(intro)
.addTo(controller);
//text Animation
const textAnim = TweenMax.fromTo(text, 2, { opacity: 1 }, { opacity: 0 });
const textAnim2 = TweenMax.fromTo(end, 4, { opacity: 1 }, { opacity: 0 });
let scene2 = new ScrollMagic.Scene({
duration: 3000,
triggerElement: intro,
triggerHook: 0
})
.setTween(textAnim)
.addTo(controller);
//Added by Me
let scene3 = new ScrollMagic.Scene({
duration: 3000,
triggerElement: intro,
triggerHook: 0
})
.setTween(textAnim2)
.addTo(controller);
//End Added By Me
//video animation
let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;
scene.on('update', e => {
scrollpos = e.scrollPos/50;
})
setInterval(() => {
delay = (scrollpos - delay) * accelamount;
video.currentTime = delay;
}, 40
);* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Comic Sans MS'
}
.intro {
height: 100vh;
}
.intro video {
height: 100%;
width: 100%;
object-fit: cover;
}
.intro h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4em;
color: white;
}
section h1 {
padding-top: 300px;
height: 100vh;
font-size: 4em;
color: black;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie-edge" />
<link rel="stylesheet" href="assets/css/ssMainVid.css" />
<title>Document</title>
</head>
<body>
<div class="intro">
<h1>Revolutionary Socks</h1>
<video src="images/SampleVid.mp4"></video>
</div>
<section>
<h1>Another Heading</h1>
</section>
<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/animation.gsap.min.js" integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js" integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps+MHGLWZ6Byz0BqQzrP+3GIgYL+KvLaWgpL8XgDVbIRYQeLa3Vqu6A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="assets/js/app.js"></script>
</body>
</html>What I want to do is add text will display/ hide based on the scroll position on the screen. The first ones works fine but not the subsequent one.