Animate headings

Author: magadanskiuchen

js/main.js

@@ -8,4 +8,18 @@ const introTitlePin = new ScrollMagic.Scene({ triggerElement: '.intro__title', t
 
 const titleSwipe = new ScrollMagic.Scene({ triggerElement: '.intro__title', triggerHook: 0, duration: 50 * vh })
 	.setTween(new TweenLite.fromTo('.intro__title', 1, { x: 0 }, { x: '100%' }))
-	.addTo(controller);
+	.addTo(controller);
+
+const screens = document.querySelectorAll('.screen:not(.screen--intro)');
+
+screens.forEach(screen => {
+	const heading = screen.querySelector('.screen__title');
+	
+	new ScrollMagic.Scene({ triggerElement: screen, triggerHook: 0 })
+		.setPin(heading)
+		.addTo(controller);
+	
+	new ScrollMagic.Scene({ triggerElement: screen, triggerHook: 0.55, duration: 90 * vh })
+		.setTween(new TweenLite.fromTo(heading, 1, { x: '-100%', y: 0 }, { x: '100%', y: 0 }))
+		.addTo(controller);
+});

style.css

@@ -40,10 +40,16 @@ img {
 	font-size: 64px;
 }
 
+.screen__title:not(.intro__title) {
+	position: fixed;
+	top: 0;
+	width: 100%;
+}
+
 .content {
 	display: flex;
 	max-width: 60vw;
-	margin: 0 auto 3em;
+	margin: 4em auto;
 	padding: 5em;
 	background: #FFF;
 }