Skip to content
Permalink
Browse files

Animate headings

  • Loading branch information
magadanskiuchen committed Oct 20, 2019
1 parent 2b31ef2 commit cf334810e7c543dd3a9388f9a7544173da9d5b74
Showing with 22 additions and 2 deletions.
  1. +15 −1 js/main.js
  2. +7 −1 style.css
@@ -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);
});
@@ -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;
}

0 comments on commit cf33481

Please sign in to comment.
You can’t perform that action at this time.