Jump to content
Search Community

Making GSAP Slider Responsive

ainsley_clark test
Moderator Tag

Recommended Posts

Hi there,

 

I'm struggling to put together a responsive slider for a site and wondering if you can help.

 

When the button is clicked, the whole slider should move to the left and the first one should fade out, the first one is then appended to the end so theres an infinite loop.

I have tried doing this using transform x and setting it to the index of the slide, however, when resizing the window, the newly transformed cards come out of sync.

 

Please feel free to suggest something that I'm missing, or how you would approach this.

Codepen attached, appreciate it in advance!

 

 

See the Pen oNgPPNW?editors=1111 by ainsleyclark (@ainsleyclark) on CodePen

Link to comment
Share on other sites

Hey Ainsley.

 

I would use a different approach. Instead of trying to keep track of which slide is next and previous, just make use of how the document select elements by removing and appending the elements. It's best to use clones of the elements so that there's no jumps perceived. I also recommend animating a container instead of each individual element.

 

Take a look at my implementation and let me know if you have any questions!

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

  • Like 2
Link to comment
Share on other sites

@ZachSaucier first of all, thank you so much. I was struggling with that all day! I originally removed the element from the DOM and used append child to add it to the end but I was constantly getting that jump.

I would be really, greatful if you could answer these questions so I can wrap my head around what you did:

  • How is it that cloning then appending doesn't create a jump?
  • Ive never seen overwrite: true before, Ive read that:
    Quote

    If true, all tweens of the same targets will be killed immediately regardless of what properties they affect.

    What's it doing in this tween?

  • You've added a !tweenAnim.isActive() statement, which I presume is to set the container back to the starting position? How is it that you can click repeatedly and the tween still run smoothly?

 

Again thank you so much.

Link to comment
Share on other sites

Good questions! :) 

 

A key to my demo is widthSoFar. Perhaps I should have named it something more appropriate for what it does, like offsetAmount. But naming things is hard and it's just a demo so I didn't think about it too hard. Anyway, its a variable used to keep track of the total amount of offset that accrues when users click the button and moves the "slides". Notice that it's the only thing that's being added to. All the tweens I create use it as a reference point. The purpose for this is that if someone clicks the button multiple times in a row (i.e. before the previous animation ends) you need to keep track of the remaining distance that hasn't been covered until that point. 

 

The reason why overwrite: true is required is because we want the old animations to be killed. We can't have the container being controlled by two tweens at once and the newer tween has the correct end point because it compensates for both the previous tween(s) and the new tween. Does that make sense? 

 

One other note, I included this bit

if(!tweenAnim.isActive()) {
  widthSoFar = 0;
  gsap.set(container, {x: widthSoFar}); 
}

Because I found that there was a small error in the offset if the user clicks a lot of times in direct succession. Evidently there's some error due to the small amount of processing time it takes to update variables (meaning the time between the click event and when the amount is actually stored in widthSoFar). So I corrected that by resetting once the animation is no longer active.

 

I hope that helps! I'm happy to clarify anything that's confusing.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Hi @ZachSaucier

 

Wondering if you could help me with a problem Im facing with the slider going in the other direction.

For mobile a previous button would appear allowing the user to go right, but I'm having difficulty with it.

 

I originally thought that I could prepend the container with the removed item, but I think it's a bit tricker than that because I need to transform the whole container so that last one is being removed.

 

Anyway, any help would be greatly appreciated!

 

See the Pen KKwjyEP?editors=1111 by ainsleyclark (@ainsleyclark) on CodePen

Link to comment
Share on other sites

I keep forgetting that you're not using jQuery, you're just using $ similarly to jQuery :) It's good, but I just keep defaulting to jQuery methods like .eq()

 

Anyway, you have to change the approach a little and use a .from(). The way it's currently set up, there can be a little bit of a jump if the previous button is clicked before it stops animating because it jumps to the start state. You could prevent that by checking if it's active or not if you want. 

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

  • Thanks 1
Link to comment
Share on other sites

2 minutes ago, ainsley_clark said:

Best place to check to see if its still animating is onComplete right (going right)?

It depends what you're trying to accomplish. What I meant above was you could surround most of your click logic by an if statement checking if there's an active tween:

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

 

Note that I only applied it to the "Previous" button to prevent any jumps but you could apply it to both listeners if you wanted to.

Link to comment
Share on other sites

2 minutes ago, ainsley_clark said:

I was trying to figure out a way to have it so that it would still continue animating but not jump? Just like the next button as its very fluid,

do you have any advice?

It's possible but you'd have to switch the methodology. The reason being is that since the element is positioned from the left side, you have to compensate for the additional element at the beginning by setting the position -= the width of the prepended element.

 

To get around that, you could animate each of the boxes themselves instead of the container. I don't have time to apply that approach for you but you can reference this thread because it's the same approach:

 

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.
×
×
  • Create New...