Skip to content

Commit

Permalink
Animate headings
Browse files Browse the repository at this point in the history
  • Loading branch information
magadanskiuchen committed Oct 20, 2019
1 parent 2b31ef2 commit cf33481
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 2 deletions.
16 changes: 15 additions & 1 deletion js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
8 changes: 7 additions & 1 deletion style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit cf33481

Please sign in to comment.