I made this slider with jquery and greensock and I need to know how I can use the scroll, I think I need to use the event mousewheel, but I do not understand how to configure it to use it in the slider since I end up breaking all the animations, someone could give me a hand to set this problem
(function($) {
// Variables
var sectionFrom,
$slide = $('.slide'),
$slideActive = $('.slide.active'),
$navLink = $('.nav a'),
$navLi = $('.nav li'),
$body = $('body');
// Init function
function init(){
// Set active slide visible
TweenLite.set($slideActive, {x: '0%'});
// Fade slides in
TweenLite.set($body, {className: '-=loading'});
}
init();
// Navigation click
$navLink.on('click', function(e){
if(e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
// prevent animation when animating
if(!$body.hasClass('is-animating')){
var sectionFrom = $('.slide.active'),
sectionToID = $(e.target).attr('href'),
sectionTo = $('div'+sectionToID);
if(sectionFrom.attr('id') !== sectionTo.attr('id')){
scrollToSection(sectionFrom, sectionTo);
}
}
});
function scrollToSection(sectionFrom, sectionTo){
var heading = sectionTo.find('h1'),
subheading = sectionTo.find('p'),
bcg = sectionTo.find('.bcg'),
bcgFrom = sectionFrom.find('.bcg'),
tlDown = new TimelineLite({onComplete: setActiveSection(sectionFrom, sectionTo)}),
tlUp = new TimelineLite();
if(sectionFrom.index() < sectionTo.index()){
//console.log('going down');
tlDown
.set($body, {className: '+=is-animating'})
.to(sectionFrom, 1.2, {x: '-=100%', ease:Power4.easeInOut, clearProps: 'all'}, '0')
.to(sectionTo, 1.2, {x: '0%', ease:Power4.easeInOut}, '0')
.to(bcgFrom, 1.2, {x: '30%', ease:Power4.easeInOut, clearProps: 'all'}, '0')
.from(bcg, 1.2, {x: '-30%', ease:Power4.easeInOut, clearProps: 'all'}, '0')
.from(heading, 0.7, {autoAlpha: 0, x: 40, ease:Power4.easeInOut}, '-=1')
.from(subheading, 0.7, {autoAlpha: 0, x: 40, ease:Power4.easeInOut}, '-=0.6')
.set($body, {className: '-=is-animating'});
} else {
//console.log('going up');
tlUp
.set($body, {className: '+=is-animating'})
.set(sectionTo, {x: '-100%'})
.to(sectionFrom, 1.2, {x: '100%', ease:Power4.easeInOut, clearProps: 'all'}, '0')
.to(sectionTo, 1.2, {x: '0%', ease:Power4.easeInOut}, '0')
.to(bcgFrom, 1.2, {x: '-30%', ease:Power4.easeInOut, clearProps: 'all'}, '0')
.from(bcg, 1.2, {x: '30%', ease:Power4.easeInOut, clearProps: 'all'}, '0')
.from(heading, 0.7, {autoAlpha: 0, x: 40, ease:Power4.easeInOut}, '-=1')
.from(subheading, 0.7, {autoAlpha: 0, x: 40, ease:Power4.easeInOut}, '-=0.6')
.set($body, {className: '-=is-animating'});
}
}
function setActiveSection(sectionFrom, sectionTo){
// Add active class to the current slide
sectionFrom.removeClass('active');
sectionTo.addClass('active');
// Add a body class highlighting the current slide
$body.removeAttr('class').addClass($(sectionTo).attr('id')+'-active');
// Highlight current slide in the navigation
var currentSlideIndex = parseInt($(sectionTo).attr('id').slice(-2)) -1;
$navLi.removeAttr('class');
$navLi.eq(currentSlideIndex).addClass('active');
}
})(jQuery);body {
font: 16px/1.5 'Open Sans', Helvetica, Helvetica Neue, Arial, sans-serif;
background-color: #2e2e30;
color: #fff;
}
h1, h2, h3, h4 {
font-weight: 700;
}
.slidesContainer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
.slideContent {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.slideContent h1 {
font-size: 24px;
margin-bottom: 5px;
line-height: 1em;
}
.slideContent p {
font-size: 14px;
color: rgba(255,255,255,0.7);
margin: 0;
}
/* =Project Slides */
.slide {
height: 100%;
text-align: center;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transform: translateX(100%);
transition: opacity 0.3s linear, visibility 0.3s linear;
opacity: 1;
visibility: visible;
}
.loading {
opacity: 0;
visibility: hidden;
}
.bcg {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0.9;
z-index: 1;
}
.slide01 .bcg {
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/80/91/f9/8091f9dceb2ea55fa7b57bb7295e1824--hd-iphone--wallpapers-backgrounds-wallpapers.jpg');
}
.slide02 .bcg {
background-image: url(https://www.planwallpaper.com/static/images/880665-road-wallpapers.jpg);
}
.slide03 .bcg {
background-image: url(https://s-media-cache-ak0.pinimg.com/736x/80/91/f9/8091f9dceb2ea55fa7b57bb7295e1824--hd-iphone--wallpapers-backgrounds-wallpapers.jpg');
}
.slide04 .bcg {
background-image: url(https://www.planwallpaper.com/static/images/880665-road-wallpapers.jpg);
}
.slide04 .slideContent h1 {
color: #222;
}
.slide04 .slideContent p {
color: rgba(0,0,0,0.7);
}
/* =Navigation */
.nav {
position: fixed;
bottom: 40px;
right: 40px;
left: 40px;
list-style: none;
z-index: 3;
margin: 0;
padding: 0;
}
.nav li {
float: left;
list-style: none;
width: 25%;
text-align: center;
}
.nav a {
color: #222;
display: block;
text-decoration: none;
padding: 8px 16px;
font-size: 12px;
border: 1px rgba(255,255,255,0.7) solid;
border-width: 1px 0 1px 1px;
background-color: rgba(255,255,255, 0.2);
transition: all 0.3s linear;
}
.nav li:last-child a {
border-width: 1px
}
.nav li.active a {
background-color: rgba(255,255,255, 0.8);
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div class="slidesContainer">
<div id="slide01" class="slide slide01 active">
<div class="bcg"></div>
<div class="slideContent">
<h1>Slide 1 Title</h1>
<p>This is a short description.</p>
</div>
</div>
<div id="slide02" class="slide slide02">
<div class="bcg"></div>
<div class="slideContent">
<h1>Slide 2 Title</h1>
<p>This is a short description.</p>
</div>
</div>
<div id="slide03" class="slide slide03">
<div class="bcg"></div>
<div class="slideContent">
<h1>Slide 3 Title</h1>
<p>This is a short description.</p>
</div>
</div>
<div id="slide04" class="slide slide04">
<div class="bcg"></div>
<div class="slideContent">
<h1>Slide 4 Title</h1>
<p>This is a short description.</p>
</div>
</div>
<ul class="nav">
<li class="active"><a href="#slide01">Slide 1</a></li>
<li><a href="#slide02">Slide 2</a></li>
<li><a href="#slide03">Slide 3</a></li>
<li><a href="#slide04">Slide 4</a></li>
</ul>
</div>