Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jiggy1965

How to create basic slideshow

Recommended Posts

Using Animate and including the GSAP library I've made a basic slideshow containing three slides. I've added two buttons to make the slider go left and right. When pressing the left arrow the slider should go from x=0 to x=-300 and pressing again to x-600 and nor further than that. When pressing the right arrow the slider should go from x-600 to x-300 to x=0 and no further than that.

 

I was faced with two problems.

 

First the arrows should make the slider only tween when it isn't going through a +=300 or -=300 tween. Otherwise, when pressing the button halfway while it's tweening between such a step it would add or substract another 300.

 

Second the tweening should go any more to the left when x=-300 and no higher then when it's x=0. Otherwise it could continue to slide to a blank area.

 

I managed to do it using below code, but was wondering if there was a more elegant sollution. Perhaps using some Math function instead of checking for that integer. Or to use an if statement which checks first if the slides object is between -600 and 0 and has the tween stopped when  those minumum / maximum values have been reached.

 

Below my code and attached the file. Is there a far more elegant en safer method to doing what I wanted?

this.stop();
this.buttonright.addEventListener("click", slideright.bind(this));
this.buttonleft.addEventListener("click", slideleft.bind(this));

function slideright() {
	tl = new TimelineMax();
	if (Number.isInteger(this.slides.x / 300) && (this.slides.x > -600)) {
		tl.to(this.slides, 2, {
			x: "-=300",
			ease: Power2.easeOut
		})
	}
}

function slideleft() {
	tl = new TimelineMax();
	if (Number.isInteger(this.slides.x / 300) && (this.slides.x < 0)) {
		tl.to(this.slides, 2, {
			x: "+=300",
			ease: Power2.easeOut
		})
	}
}

 

slider.zip

Share this post


Link to post
Share on other sites

What I also was wondering about was, instead of checking if the tween is running before doing a -=300 or +=300, if it would also be possible to do a -= or += but have it stop at certain locations.

 

So for example, if the slider was at x=300 and I would click the right button it would do its x:"+=300". If I were to click again when it's at x=400 it should do another x:"+=300", but it should nonetheless stop moving when x=600 has been reached. Otherwise it would continue to x=700. Would there be a way to do that as well? 

Share this post


Link to post
Share on other sites

Already developed a better looking code. I can now also start a tween the other way around when it has already started tweening. Here it is.

 

this.stop();
this.buttonright.addEventListener("click", slideright.bind(this));
this.buttonleft.addEventListener("click", slideleft.bind(this));

function slideright() {
	tl = new TimelineMax();
	var distancepoint = this.slides.x;
	var distance = Math.abs(Math.round(distancepoint / 300));
	if ((distance >= 0) && (distance < 2)) {
		tl.to(this.slides, 1, {
			x: -(distance * 300) - 300,
			ease: Power2.easeOut
		})
	}
}

function slideleft() {
	tl = new TimelineMax();
	var distancepoint = this.slides.x;
	var distance = Math.abs(Math.round(distancepoint / 300));
	if ((distance > 0) && (distance <= 2)) {
		tl.to(this.slides, 1, {
			x: -(distance * 300) + 300,
			ease: Power2.easeOut
		})
	}
}

 

slider.fla

Share this post


Link to post
Share on other sites
11 hours ago, jiggy1965 said:

What I also was wondering about was, instead of checking if the tween is running before doing a -=300 or +=300, if it would also be possible to do a -= or += but have it stop at certain locations.

 

Unfortunately, no. Using += or -= is just a shortcut. You can, however, use the ModifiersPlugin to do something similar to that.

https://greensock.com/docs/Plugins/ModifiersPlugin

 

 

Here's a simple example.

 

See the Pen QEdpLe by GreenSock (@GreenSock) on CodePen

 

And a couple advanced demos using Draggable and the ThrowPropsPlugin.

 

See the Pen veyxyQ by osublake (@osublake) on CodePen

 

 

See the Pen ZOgGXB by osublake (@osublake) on CodePen

 

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Well, as you can see in my previous post, I kinda developed a workaround. My slideshow has 3 squares of 300x300 next to each other. They will be moving from 0 to -300 to -600 and back again to -300 to 0. Those are three x locations it will go to. I simplified those to 0, 1 and 2 and used either of those values to calculate which x location the slider should move to during a click. Even when it's already sliding, so I could click when it's e.g. on -450 and it would either move to -600 or -300. And by using 0, 1 and 2 I'm making sure the slider doesn't slide past -600 or higher than 0 which would lead to empty slides. It does exactly what I was after now. See below example:

 

See the Pen zYOBLoV by jiggywiggy1965 (@jiggywiggy1965) on CodePen

  • Like 1

Share this post


Link to post
Share on other sites
59 minutes ago, jiggy1965 said:

Well, as you can see in my previous post, I kinda developed a workaround.

 

There are many ways to solve a problem, but what you have looks good!!!

 

And thanks for the CodePen demo. It will be very helpful to Animate users who come across this post in the future. 🙌  

  • Like 3

Share this post


Link to post
Share on other sites

Thanks! :-) I actually started to develop this cause I wanted to make a slideshow just like it in Animate. But I found that process cumbersome. It involved reversing the timeline and such a thing isn't 'easy' to do in Animate. It involved using the 'tick' eventlistener and although I managed to code that, I found the result not as smooth as I wanted it to be and it involved too much code to my taste. So I started thinking about using GSAP inside my Animate document. Then it would be ease to create timelines for that slider which would make the slides go in both directions, forwards and reverse. The result I coded is now exactly how I wanted it. Slides going in both directions and smoothly with a little ease.

 

I updated my code for it a bit so that the slides can be in various positions but using an offset variable. And added a mask to have only the slides individually visible while they are sliding.

 

this.stop();
this.buttonright.addEventListener("click", slideright.bind(this));
this.buttonleft.addEventListener("click", slideleft.bind(this));
var offsetpoint = this.slides.x;

function slideright() {
	tl = new TimelineMax();
	var distancepoint = this.slides.x - offsetpoint;
	var distance = Math.abs(Math.round(distancepoint / 300));
	if ((distance >= 0) && (distance < 2)) {
		tl.to(this.slides, 1, {
			x: offsetpoint + (-(distance * 300) - 300),
			ease: Power2.easeOut
		})
	}
}

function slideleft() {
	tl = new TimelineMax();
	var distancepoint = this.slides.x - offsetpoint;
	var distance = Math.abs(Math.round(distancepoint / 300));
	if ((distance > 0) && (distance <= 2)) {
		tl.to(this.slides, 1, {
			x: offsetpoint + (-(distance * 300) + 300),
			ease: Power2.easeOut
		})
	}
}

As you can see first the clip's position is stored in 'offsetpoint. The rest is more or less the same. It calculates how far a slide should move left/right and no further than the total amount of slides.

 

You can see the example in below Codepen.

 

See the Pen vYBXjqV by jiggywiggy1965 (@jiggywiggy1965) on CodePen

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×