Skip to content

Commit

Permalink
Fade screen in on scroll and shift image up
Browse files Browse the repository at this point in the history
  • Loading branch information
magadanskiuchen committed Oct 20, 2019
1 parent cf33481 commit 0564715
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 0 deletions.
8 changes: 8 additions & 0 deletions js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,12 @@ screens.forEach(screen => {
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);

new ScrollMagic.Scene({ triggerElement: screen, triggerHook: 0.9, duration: 50 * vh })
.setTween(new TweenLite.fromTo(screen, 1, { opacity: 0 }, { opacity: 1, ease: Power3.easeInOut }))
.addTo(controller);

new ScrollMagic.Scene({ triggerElement: screen, triggerHook: 0.75, duration: 50 * vh })
.setTween(new TweenLite.to(screen.querySelector('.content__image'), 1, { y: 0, ease: Power1.easeOut }))
.addTo(controller);
});
1 change: 1 addition & 0 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ img {
width: 33%;
height: auto;
margin-right: 3em;
transform: translateY(30%);
}

.screen--html .content__image img {
Expand Down

0 comments on commit 0564715

Please sign in to comment.