Greensock Swipe Slides

Developer
Rodrigo Hernando
Size
4,201 Kb
Views
62,744
  1. Greensock Swipe Slides Previews
  2. Greensock Swipe Slides HTML Codes
  3. Greensock Swipe Slides CSS Codes
  4. Greensock Swipe Slides JS Codes

How do I make an greensock swipe slides?

Greensock Forums:http://forums.greensock.com/topic/8338-swipe-comic-pages-startstop-animation-if-slidepage-is-visible/. What is a greensock swipe slides? How do you make a greensock swipe slides? This script and codes were developed by Rodrigo Hernando on 16 November 2022, Wednesday.

Greensock Swipe Slides Previews
IQ Test

Greensock Swipe Slides - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Greensock Swipe Slides</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="dragText">Drag Now</div>
<div id="wrapper">	<div id="slide-container"> <!-- FIRST SLIDE --> <div class="slide"> <div class="slide-child">	This is the first slide </div> <div class="slide-child">	When the animations of the slide childrens are over you can drag again </div> <div class="slide-child">	Once the text above the container appears you can drag again. </div> </div> <!-- SECOND SLIDE --> <div class="slide">	<div class="slide-child2">	Some text here </div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/aurora-borealis-1.jpg" width="300" height="225" /> <div class="slide-child2">	More text here </div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/Aurora-Borealis-2.jpg" width="300" height="225" /> </div> <!-- THIRD SLIDE --> <div class="slide">	<div class="slide-child2">	Some text here </div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/aurora-borealis-3.jpg" width="300" height="225" /> <div class="slide-child2">	More text here </div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/aurora-borealis-4.jpg" width="300" height="225" /> </div> <!-- FOURTH SLIDE --> <div class="slide">	<div class="slide-child2">	Now some kittens </div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/kittens1.jpg" width="300" height="225"> <div class="slide-child2">	Everybody loves kittens and puppies... </div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/kittens2.jpg" width="300" height="225"> </div> <!-- FIFTH SLIDE --> <div class="slide">	<div class="slide-child2">	More kittens </div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/kittens3.jpg" width="300" height="225"> <div class="slide-child2">	What's up Pup??!! </div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/kittens4_2.jpg" width="300" height="225"> </div> <!-- SIXTH SLIDE --> <div class="slide"> <div class="slide-child2">	Special thanks to <a href="https://forums.greensock.com/user/7401-jamiejefferson/">Jamie Jefferson</a> for his help and great input in <a href="https://forums.greensock.com/topic/8349-get-throwprops-end-value-before-snap-triggers/">this post</a> from the Greensock forums and this <a href="https://codepen.io/jamiejefferson/pen/FnKba">great codepen</a>. </div> <div class="slide-child2">	This sample has been created using Greensock's Draggable tool and ThrowProps Plugin, for more information go to <a href="https://www.greensock.com">Greensock.com</a> </div> </div>	</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js'></script>
<script src='https://www.greensock.com/js/src/plugins/ThrowPropsPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Greensock Swipe Slides - Script Codes CSS Codes

html
{	height:100%;
}
body
{	margin:0;	padding:0;	height:100%;
}
#wrapper
{	border:solid 1px;	padding:10px;	width:1024px;	height:600px;	position:relative;	margin:auto;	margin-top:-300px;	top:50%;	overflow:hidden;
}
#slide-container
{	position:relative;	height:600px;
}
.slide
{	width:960px;	background:#00F;	height:600px;	position:relative;	margin:0 32px;	text-align:center;	float:left;	overflow:hidden;
}
.slide-child, .slide-child2
{	width:80%;	padding:20px 0;	position:relative;	margin:20px 10% 0 10%;	background:#eee;	font:20px "Trebuchet MS", Arial, Helvetica, sans-serif;	line-height:20px;	color:#000;
}
.slide-child2
{	margin-top:10px;	padding:10px 0;
}
.slide img
{	margin:10px;
}
#dragText
{	position:absolute;	top:0;	width:200px;	text-align:center;	margin-left:-100px;	left:50%;	font:25px bold "Trebuchet MS", Arial, Helvetica, sans-serif;
}

Greensock Swipe Slides - Script Codes JS Codes

var wrapper = $("div#wrapper"),	dragText = $("div#dragText"),	slides = $("div.slide"),	dragTextTween = TweenMax.to(dragText, .25, {opacity:0, paused:true}),	count = 0,	limit = slides.length - 1,	snapping = false,	snapPoints = [],	//slides timelines vars	linesArrays = [],	allLinesComplete = false;//all the slides animations are completed
$("#slide-container").css('width', 1024 * slides.length);
//add points to the snap array
for(var i = 0; i < slides.length; i++)
{	snapPoints.push(-1024 * i);
}
var containerDraggable = Draggable.create($("#slide-container"),
{	type:'left',	throwProps:true,	maxDuration:1.25,	minDuration:.75,	edgeResistance:.8,	onDragStart:function()	{	dragTextTween.play();	},	onThrowComplete:function()	{	//we allow the snapping again	snapping = false;	startAnimations(count);	//if all the slides animations are completed show the drag indicator	if(allLinesComplete)	{	dragTextTween.reverse();	}	},	snap:	{	left:	function(endValue)	{	if(!snapping)	{	snapping = true;	//the las value to be used as a snap point	var lastEndValue = snapPoints[count];	//going forward	if(endValue < lastEndValue + 560 && count < limit)	{	count++;	}	if(endValue > lastEndValue - 560 && count > 0)	{	count--;	}	}	return snapPoints[count];	}//function end	}//snap variable end
});//draggable end
/*
-------------------------------------------------------------	FIRST SLIDE ANIMATIONS
-------------------------------------------------------------
*/
var slideOneChildren = slides.eq(0).children('*'),//this selector is only for the child animations	slideLine0;
//we name it 0 to use the number of the index as reference to start the slides tweens
slideLine0 = new TimelineMax(
{	onStart:disableDrag,	onComplete:enableDrag,	paused:true
});
//add the tween instances to
slideLine0.staggerFrom(slideOneChildren, 1, {left:1000, opacity:0, ease:Back.easeOut}, 1.5);
linesArrays.push(slideLine0);
/*
-------------------------------------------------------------	SECOND SLIDE ANIMATIONS
-------------------------------------------------------------
*/
var slideTwoDivs = slides.eq(1).children('div'),//this selector is only for the child animations	slideTwoImages = slides.eq(1).children('img'),	slideLine1;
slideLine1 = new TimelineMax(
{	onStart:disableDrag,	onComplete:enableDrag,	paused:true
});
slideLine1	.from(slideTwoDivs, 1, {height:0, opacity:0})	.staggerFrom(slideTwoImages, 1, {opacity:0}, .5, '+=.5');
linesArrays.push(slideLine1);
/*
-------------------------------------------------------------	THIRD SLIDE ANIMATIONS
-------------------------------------------------------------
*/
var slideThreeDivs = slides.eq(2).children('div'),//this selector is only for the child animations	slideThreeImages = slides.eq(2).children('img'),	slideLine2;
slideLine2 = new TimelineMax(
{	onStart:disableDrag,	onComplete:enableDrag,	paused:true
});
slideLine2	.staggerFrom(slideThreeDivs, 1, {top:'+=200', opacity:0, scale:2}, .5)	.staggerFrom(slideThreeImages, 1, {opacity:0}, .5, '+=.5');
linesArrays.push(slideLine2);
/*
-------------------------------------------------------------	FOURTH SLIDE ANIMATIONS
-------------------------------------------------------------
*/
var slideFourDivs = slides.eq(3).children('div'),//this selector is only for the child animations	slideFourImages = slides.eq(3).children('img'),	slideLine3;
slideLine3 = new TimelineMax(
{	onStart:disableDrag,	onComplete:enableDrag,	paused:true
});
slideLine3	.staggerFrom(slideFourDivs, 1, {rotation:720, opacity:0, scale:.1}, .5)	.staggerFrom(slideFourImages, 1, {opacity:0}, .5, '+=.5');
linesArrays.push(slideLine3);
/*
-------------------------------------------------------------	FIFTH SLIDE ANIMATIONS
-------------------------------------------------------------
*/
var slideFiveDivs = slides.eq(4).children('div'),//this selector is only for the child animations	slideFiveImages = slides.eq(4).children('img'),	slideLine4;
slideLine4 = new TimelineMax(
{	onStart:disableDrag,	onComplete:enableDrag,	paused:true
});
slideLine4	.from(slideFiveDivs, 1, {width:0, opacity:0})	.staggerFrom(slideFiveImages, 1, {opacity:0}, .5, '+=.5');
linesArrays.push(slideLine4);
/*
-------------------------------------------------------------	SIXTH SLIDE ANIMATIONS
-------------------------------------------------------------
*/
var slideSixDivs = slides.eq(5).children('div'),//this selector is only for the child animations	slideSixImages = slides.eq(5).children('img'),	slideLine5;
TweenMax.set(slideSixDivs, {top:'+=200'});
slideLine5 = new TimelineMax(
{	onStart:disableDrag,	onComplete:enableDrag,	paused:true
});
slideLine5	.staggerFrom(slideSixDivs, 1, {opacity:0}, 1);
linesArrays.push(slideLine5);
/*
-------------------------------------------------------------	FUNCTIONS TO ENABLE AND DISABLE DRAG
-------------------------------------------------------------
*/
function disableDrag()
{	containerDraggable[0].disable();
}
function enableDrag()
{	containerDraggable[0].enable();	dragTextTween.reverse();	//if all slides animations are completed the drag indicator animation control goes to the throw complete event	if(count == limit)	{	allLinesComplete = true;	}
}
/*
-------------------------------------------------------------	FUNCTIONS TO START THE ANIMATIONS
-------------------------------------------------------------
*/
function startAnimations(slideIndex)
{	var targetLine = linesArrays[slideIndex];	//console.log(targetLine);	targetLine.play();
}
//since the first slide is visible we start playing it
startAnimations(count);
//hide the drag text indicator
dragTextTween.seek(.25);
Greensock Swipe Slides - Script Codes
Greensock Swipe Slides - Script Codes
Home Page Home
Developer Rodrigo Hernando
Username rhernando
Uploaded November 16, 2022
Rating 3.5
Size 4,201 Kb
Views 62,744
Do you need developer help for Greensock Swipe Slides?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rodrigo Hernando (rhernando) Script Codes
Name
Cross-Browser Flip Card
Update tween progress with Draggable
Draggable add element
Greensock Bezier Morph
Auto scroll to element offset
Toggle Tween Direction
Greensock Draggable latest update
GSAP Scramble Text Plugin
Circular Bezier
Animate SVG Gradient
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!