Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Image Transition On Scroll(GSAP)
<div class="container">
<div class="scroll-indicator"></div>
<div class="scroll">scroll</div>
<div class="close">
<span class="lin1"></span>
<span class="lin2"></span>
</div>
<div class="button-left"><span class="view">View</span></div>
<div class="button-right"><span class="view">View</span></div>
<div class="child-left-1">
<div class="left1 left"></div>
<div class="left2 left"></div>
<div class="left3 left"></div>
<div class="left4 left"></div>
<div class="left5 left"></div>
</div>
<div class="child-right-1">
<div class="right1 right"></div>
<div class="right2 right"></div>
<div class="right3 right"></div>
<div class="right4 right"></div>
<div class="right5 right"></div>
</div>
<div class="child-left-2">
<div class="left1 left"></div>
<div class="left2 left"></div>
<div class="left3 left"></div>
<div class="left4 left"></div>
<div class="left5 left"></div>
</div>
<div class="child-right-2">
<div class="right1 right"></div>
<div class="right2 right"></div>
<div class="right3 right"></div>
<div class="right4 right"></div>
<div class="right5 right"></div>
</div>
<div class="child-left-3">
<div class="left1 left"></div>
<div class="left2 left"></div>
<div class="left3 left"></div>
<div class="left4 left"></div>
<div class="left5 left"></div>
</div>
<div class="child-right-3">
<div class="right1 right"></div>
<div class="right2 right"></div>
<div class="right3 right"></div>
<div class="right4 right"></div>
<div class="right5 right"></div>
</div>
<div class="child-left-4">
<div class="left1 left"></div>
<div class="left2 left"></div>
<div class="left3 left"></div>
<div class="left4 left"></div>
<div class="left5 left"></div>
</div>
<div class="child-right-4">
<div class="right1 right"></div>
<div class="right2 right"></div>
<div class="right3 right"></div>
<div class="right4 right"></div>
<div class="right5 right"></div>
</div>
</div>
//there qre still some transition bugs are left...
let curPage = 1;
let scrolling = true;
let viewscroll = false;
let hoverr = true;
let animationTime = 1;
let lbutton = false;
let tl = new TimelineMax({repeat: 0});
const left = $('.child-left-2>.left');
const right = $('.child-right-2>.right');
const scrollIn = $('.scroll-indicator');
const scrollIn2 = $('.scroll');
const close = $('.close');
const lb = $('.button-left');
const rb = $('.button-right');
for (let i = 2; i <= 4; i++) {
for (let j = 1; j <= 5; j++) {
tl.set($('.child-left-' + i + '>.left' + j), {x: '+=100%'});
tl.set($('.child-right-' + i + '>.right' + j), {x: '-=100%'});
}
}
tl.set(close, {
scaleX: 0,
transformOrigin: 'center'
});
function navigateDown() {
if (scrolling && !viewscroll) {
console.log('ww');
scrolling = false;
let tl = new TimelineMax({repeat: 0});
for (let i = 1; i <= 5; i++) {
if (i === 1 || i === 5) {
tl.to([
$('.child-left-' + curPage + '>.left' + i),
$('.child-left-' + (curPage + 1) + '>.left' + i)
], animationTime, {
x: '-=100%',
ease: Power3.easeInOut
}, .3).to([
$('.child-right-' + curPage + '>.right' + i),
$('.child-right-' + (curPage + 1) + '>.right' + i)
], animationTime, {
x: '+=100%',
ease: Power3.easeInOut
}, .3);
} else if (i === 3) {
tl.to([
$('.child-left-' + curPage + '>.left' + i),
$('.child-left-' + (curPage + 1) + '>.left' + i)
], animationTime, {
x: '-=100%',
ease: Power3.easeInOut
}, .15).to([
$('.child-right-' + curPage + '>.right' + i),
$('.child-right-' + (curPage + 1) + '>.right' + i)
], animationTime, {
x: '+=100%',
ease: Power3.easeInOut
}, .15);
} else {
tl.to([
$('.child-left-' + curPage + '>.left' + i),
$('.child-left-' + (curPage + 1) + '>.left' + i)
], animationTime, {
x: '-=100%',
ease: Power3.easeInOut
}, .25).to([
$('.child-right-' + curPage + '>.right' + i),
$('.child-right-' + (curPage + 1) + '>.right' + i)
], animationTime, {
x: '+=100%',
ease: Power3.easeInOut
}, .25);
}
}
curPage++;
if (curPage == 4) {
scrollIn.addClass('opa');
scrollIn2.addClass('opa');
} else if (curPage != 4) {
scrollIn.removeClass('opa');
scrollIn2.removeClass('opa');
}
setTimeout(() => {
scrolling = true
}, 1300);
}
}
function navigateUp() {
if (scrolling && !viewscroll) {
scrolling = false;
let tl = new TimelineMax({repeat: 0});
for (let i = 1; i <= 5; i++) {
if (i === 1 || i === 5) {
tl.to([
$('.child-left-' + curPage + '>.left' + i),
$('.child-left-' + (curPage - 1) + '>.left' + i)
], animationTime, {
x: '+=100%',
ease: Power3.easeInOut
}, .4).to([
$('.child-right-' + curPage + '>.right' + i),
$('.child-right-' + (curPage - 1) + '>.right' + i)
], animationTime, {
x: '-=100%',
ease: Power3.easeInOut
}, .4);
} else if (i === 3) {
tl.to([
$('.child-left-' + curPage + '>.left' + i),
$('.child-left-' + (curPage - 1) + '>.left' + i)
], animationTime, {
x: '+=100%',
ease: Power3.easeInOut
}, .11).to([
$('.child-right-' + curPage + '>.right' + i),
$('.child-right-' + (curPage - 1) + '>.right' + i)
], animationTime, {
x: '-=100%',
ease: Power3.easeInOut
}, .11);
} else {
tl.to([
$('.child-left-' + curPage + '>.left' + i),
$('.child-left-' + (curPage - 1) + '>.left' + i)
], animationTime, {
x: '+=100%',
ease: Power3.easeInOut
}, .25).to([
$('.child-right-' + curPage + '>.right' + i),
$('.child-right-' + (curPage - 1) + '>.right' + i)
], animationTime, {
x: '-=100%',
ease: Power3.easeInOut
}, .25);
}
}
curPage--;
if (curPage == 4) {
scrollIn.addClass('opa');
scrollIn2.addClass('opa');
} else if (curPage != 4) {
scrollIn.removeClass('opa');
scrollIn2.removeClass('opa');
}
setTimeout(() => {
scrolling = true
}, 1300);
}
}
$(document).on("keydown", function(e) {
if (e.which === 38) {
if (curPage === 1)
return;
navigateUp();
} else if (e.which === 40) {
if (curPage === 4)
return;
navigateDown();
}
});
$(document).on("mousewheel DOMMouseScroll", function(e) {
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
if (curPage === 1)
return;
navigateUp();
} else {
if (curPage === 4)
return;
navigateDown();
}
});
lb.mouseenter(function() {
if (scrolling) {
scrolling = false;
let tl = new TimelineMax({repeat: 0});
tl.to($('.child-left-' + curPage), 1, {
className: '+=l1',
ease: Power4.easeOut
}, 0).to($('.child-right-' + curPage), 1, {
className: '+=r1',
ease: Power4.easeOut
}, 0);
for (j = 0; j <= 5; j++) {
tl.to($('.child-left-' + curPage + '>.left' + j), 1, {
className: '+=l1',
ease: Power4.easeOut
}, 0);
}
}
});
lb.mouseleave(function() {
scrolling = true;
let tl = new TimelineMax({repeat: 0});
tl.to($('.child-left-' + curPage), 1, {
className: '-=l1',
ease: Power4.easeOut
}, 0).to($('.child-right-' + curPage), 1, {
className: '-=r1',
ease: Power4.easeOut
}, 0);
for (let j = 0; j <= 5; j++) {
tl.to($('.child-left-' + curPage + '>.left' + j), 1, {
className: '-=l1',
ease: Power4.easeOut
}, 0);
}
});
rb.mouseenter(function() {
if (scrolling) {
scrolling = false;
let tl = new TimelineMax({repeat: 0});
tl.to($('.child-left-' + curPage), 1, {
className: '+=l2',
ease: Power4.easeOut
}, 0).to($('.child-right-' + curPage), 1, {
className: '+=r2',
ease: Power4.easeOut
}, 0);
for (let j = 0; j <= 5; j++) {
tl.to($('.child-right-' + curPage + '>.right' + j), 1, {
className: '+=rr',
ease: Power4.easeOut
}, 0);
}
}
});
rb.mouseleave(function() {
scrolling = true;
let tl = new TimelineMax({repeat: 0});
tl.to($('.child-left-' + curPage), 1, {
className: '-=l2',
ease: Power4.easeOut
}, 0).to($('.child-right-' + curPage), 1, {
className: '-=r2',
ease: Power4.easeOut
}, 0);
for (let j = 0; j <= 5; j++) {
tl.to($('.child-right-' + curPage + '>.right' + j), 1, {
className: '-=rr',
ease: Power4.easeOut
}, 0);
}
});
lb.click(function() {
if (!scrolling) {
console.log(scrolling);
viewscroll = true;
let tl = new TimelineMax({repeat: 0});
lbutton = true;
tl.to(close, .5, {
scaleX: 1,
transformOrigin: 'center',
autoAlpha: 1
}, 0);
tl.to($('.child-left-' + curPage), 1, {
className: '+=cl1',
ease: Power4.easeOut
}, 0).to($('.child-right-' + curPage), 1, {
className: '+=cr1',
ease: Power4.easeOut
}, 0);
for (j = 0; j <= 5; j++) {
tl.to($('.child-left-' + curPage + '>.left' + j), 1, {
className: '+=cl1',
ease: Power4.easeOut
}, 0);
}
tl.to(lb, .4, {
width: '0px'
}, 0);
tl.to(rb, .4, {
width: '0px'
}, 0);
scrolling = false;
if (curPage <= 3) {
scrollIn.addClass('opa');
scrollIn2.addClass('opa');
}
}
setTimeout(() => {
scrolling = false
console.log(scrolling);
}, 100);
});
rb.click(function() {
if (!scrolling) {
viewscroll = true;
let tl = new TimelineMax({repeat: 0});
tl.to(close, .5, {
scaleX: 1,
transformOrigin: 'center',
ease: Power4.easeOut
}, 0);
tl.to($('.child-left-' + curPage), 1, {
className: '+=cl2',
ease: Power4.easeOut
}, 0).to($('.child-right-' + curPage), 1, {
className: '+=cr2',
ease: Power4.easeOut
}, 0);
for (j = 0; j <= 5; j++) {
tl.to($('.child-right-' + curPage + '>.right' + j), 1, {
className: '+=crr',
ease: Power4.easeOut
}, 0);
}
tl.to(lb, .4, {
width: '0px'
}, 0);
tl.to(rb, .4, {
width: '0px'
}, 0);
scrolling = false;
if (curPage <= 3) {
scrollIn.addClass('opa');
scrollIn2.addClass('opa');
}
}
setTimeout(() => {
scrolling = false
}, 100);
});
close.click(function() {
scrolling = true;
viewscroll = false;
if (curPage <= 3) {
scrollIn.removeClass('opa');
scrollIn2.removeClass('opa');
}
let tl = new TimelineMax({repeat: 0});
if (lbutton) {
tl.to(close, .5, {
scaleX: 0,
transformOrigin: 'center',
ease: Power4.easeOut
}, 0).to($('.child-left-' + curPage), 1, {
className: '-=cl1',
ease: Power4.easeOut
}, 0).to($('.child-right-' + curPage), 1, {
className: '-=cr1',
ease: Power4.easeOut
}, 0)
for (j = 0; j <= 5; j++) {
tl.to($('.child-left-' + curPage + '>.left' + j), 1, {
className: '-=cl1',
ease: Power4.easeOut
}, 0);
};
lbutton = false;
tl.to(lb, .4, {
width: '100px'
}, 0).to(rb, .4, {
width: '100px'
}, 0);
} else {
tl.to(close, .5, {
scaleX: 0,
transformOrigin: 'center',
ease: Power4.easeOut
}, 0);
tl.to($('.child-left-' + curPage), 1, {
className: '-=cl2',
ease: Power4.easeOut
}, 0).to($('.child-right-' + curPage), 1, {
className: '-=cr2',
ease: Power4.easeOut
}, 0);
for (j = 0; j <= 5; j++) {
tl.to($('.child-right-' + curPage + '>.right' + j), 1, {
className: '-=crr',
ease: Power4.easeOut
}, 0);
}
tl.to(lb, .4, {
width: '100px'
}, 0).to(rb, .4, {
width: '100px'
}, 0);
}
});
setTimeout(()=>{
navigateDown();
},500)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
overflow: hidden;
}
@import url( 'https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400');
.container {
width: 100vw;
height: 100vh;
position: fixed;
overflow: hidden;
}
.child-left-1,
.child-left-2,
.child-left-3,
.child-left-4,
.child-right-1,
.child-right-2,
.child-right-3,
.child-right-4 {
position: absolute;
width: 50vw;
height: 100vh;
overflow: hidden;
}
.child-right-1,
.child-right-2,
.child-right-3,
.child-right-4 {
margin-left: 50vw;
}
.left,
.right {
position: relative;
width: 50vw;
height: 20vh;
background-attachment: fixed;
background-size: cover;
overflow: hidden;
}
.child-left-1,
.child-right-1 {
z-index: 2;
.left {
background-image: url('https://images.unsplash.com/photo-1482625974755-1fccd66c1ceb?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=');
}
.right {
background-image: url('https://images.unsplash.com/photo-1497380297067-185ce1f97bf9?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=');
}
}
.child-left-2,
.child-right-2 {
z-index: 4;
.left {
background-image: url('https://images.unsplash.com/photo-1497380297067-185ce1f97bf9?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=');
}
.right {
background-image: url('https://images.unsplash.com/photo-1492762075047-0ef7e7a7816e?dpr=2&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=&bg=');
}
}
.child-left-3,
.child-right-3 {
z-index: 8;
.left {
background-image: url('https://images.unsplash.com/photo-1492762075047-0ef7e7a7816e?dpr=2&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=&bg=');
}
.right {
background-image: url('https://images.unsplash.com/photo-1456610981819-586798dc53e2?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=');
}
}
.child-left-4,
.child-right-4 {
z-index: 10;
.left {
background-image: url('https://images.unsplash.com/photo-1456610981819-586798dc53e2?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=');
}
.right {
background-image: url('https://images.unsplash.com/photo-1489395023347-f154a1b4a54e?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=');
}
}
.button-left,
.button-right {
width: 100px;
height: 50px;
background: #1b1b1b;
z-index: 20;
overflow: hidden;
font-family: 'Roboto', sans-serif;
font-weight: 100;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: skewX(-6deg);
margin-top: auto;
margin-bottom: auto;
text-align: center;
padding-top: 14px;
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
cursor: pointer;
// -webkit-box-shadow: 0 0 25px 0 rgba(0,0,0,0.75);
// -moz-box-shadow: 0 0 25px 0 rgba(0,0,0,0.75);
// box-shadow: 0 0 25px 0 rgba(0,0,0,0.75);
&:before {
content: '';
position: absolute;
overflow: hidden;
top: 25px;
bottom: 0;
left: 0;
right: 0;
width: 100px;
z-index: -1;
height: 0;
background: #fff;
color: #1b1b1b;
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
&:hover {
&:before {
top: 0;
height: 50px;
padding-top: 14px;
}
}
.view {
color: #fff;
mix-blend-mode: difference;
z-index: 20;
}
}
.button-left {
margin-left: 19vw;
}
.button-right {
margin-left: 69vw;
}
.l1{
width: 60vw;
}
.r1{
width: 40vw ;
margin-left: 60vw;
}
.l2{
width: 40vw;
}
.r2{
width: 60vw ;
margin-left: 40vw;
}
.rr{
width: 60vw;
}
.cl1{
width: 100vw;
}
.cr1{
width: 0vw ;
margin-left: 100vw;
}
.cl2{
width: 0vw;
}
.cr2{
width: 100vw ;
margin-left: 0vw;
}
.crr{
width: 100vw;
}
.close{
position: absolute;
z-index: 30;
width: 80px;
height: 80px;
background: #1b1b1b;
top:0;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
cursor: pointer;
span{
display: block;
position: absolute;
width: 60px;
height: 1px;
background: #fff;
top:0;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
cursor: pointer;
}
.lin1{
transform-origin: center;
transform: rotate(45deg);
}
.lin2{
transform-origin: center;
transform: rotate(-45deg);
}
&:hover{
background: #fff;
span{
background: #000;
}
}
}
.scroll-indicator{
width: 2px;
position: absolute;
height: 85px;
background: #fff;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin-top: 95vh;
margin-left: auto;
margin-right: auto;
z-index: 50;
opacity: 1;
transition: .4s;
animation: ani 1s linear infinite;
}
@keyframes ani {
0%{
height: 0px;
}
25%{
height: 85px;
}
55%{
height: 85px;
}
100%{
transform-origin: bottom;
transform: scaleY(0);
}
}
.scroll{
font-family: 'Roboto', sans-serif;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
color: #fff;
text-align: center;
margin-top: 91vh;
font-weight: 300;
font-style: oblique;
z-index: 50;
opacity: 1;
transition: .4s;
}
.opa{
opacity: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.