Skip to content
Permalink
Browse files

Fade screen in on scroll and shift image up

  • Loading branch information
magadanskiuchen committed Oct 20, 2019
1 parent cf33481 commit 056471581c217c51acbf988d464e264f583051fb
Showing with 9 additions and 0 deletions.
  1. +8 −0 js/main.js
  2. +1 −0 style.css
@@ -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);
});
@@ -58,6 +58,7 @@ img {
width: 33%;
height: auto;
margin-right: 3em;
transform: translateY(30%);
}

.screen--html .content__image img {

0 comments on commit 0564715

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