Jump to content
GreenSock

jiggy1965

How to create basic slideshow

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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? 

Link to comment
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

Link to comment
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 5
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

  • 7 months later...

This slider by Blake Bowen has and if statement like this:

if (draggable.isPressed || draggable.isDragging || draggable.isThrowing) {

It looks like the .isPressed and .isDragging no longer works in the V2 of Draggable. Is there an alternative I can use? 

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

Link to comment
Share on other sites

Are you still working on that slider? I thought I'd get to see something by now. ;)

 

I believe those checks should work fine in Draggable 3. Do you have a demo of them not working?

  • Like 1
Link to comment
Share on other sites

Hi! My fault I did not add the objects into the Config object properties vars (I'm combining two examples into one with this slider). Actually, I have not seen the vars list (in middle of this page: https://greensock.com/docs/v2/Utilities/Draggable) until now which makes things so much easier 😅. @PointC I'm actually creating 3 different versions of your slider now. They are all still in development but very close to being done. As soon as I get them finished I'll create a simple version of them for CodePen 👍

Link to comment
Share on other sites

  • 1 year later...
On 3/27/2020 at 9:32 AM, GreenSock said:

Nice one, @PointC

 

Also, here's a fork of Blake's codepen, updated to GSAP 3: 

 

 

 

Seems to work fine for me. Did I miss something @InTheOne?

if last one,
How to stop last one?

Link to comment
Share on other sites

29 minutes ago, Achi said:

if last one,
How to stop last one?

Are you asking how to stop it from looping? 

 

It's typically best to start a new thread rather than posting in a very old one, just so you know. 

 

Thanks or being a club member! 🙌

Link to comment
Share on other sites

4 minutes ago, GreenSock said:

Are you asking how to stop it from looping? 

 

It's typically best to start a new thread rather than posting in a very old one, just so you know. 

 

Thanks or being a club member! 🙌

Thank you for your reply, I am a beginner
Can I stop the loop?

Link to comment
Share on other sites

Sure, here's a fork of that CodePen that uses a different strategy altogether and doesn't loop: 

See the Pen yLbOwOa?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I also implemented directional snapping so that it always goes in the direction of the drag even if technically the closest snapping point is in the opposite direction. 

 

Enjoy!

  • Like 1
Link to comment
Share on other sites

10 hours ago, GreenSock said:

Sure, here's a fork of that CodePen that uses a different strategy altogether and doesn't loop: 

 

 

 

I also implemented directional snapping so that it always goes in the direction of the drag even if technically the closest snapping point is in the opposite direction. 

 

Enjoy!

Hello jack,
Your program example is based on my two days of research,
Really helped me a lot,
Also save my job,
Thank you so much for your selfless dedication,
Thank you so much~
GSAP is really amazing magic~
thanks again....👍

Link to comment
Share on other sites

1 hour ago, Achi said:

Really helped me a lot,
Also save my job,
Thank you so much for your selfless dedication,
Thank you so much~
GSAP is really amazing magic~

Aw, that's nice to hear. Glad you found it so helpful. And thanks for being a Club GreenSock member!

 

Enjoy the tools!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×