Jump to content
GreenSock

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

endless gsap slider

Recommended Posts

Hi! I have a vanilla js slider. I want to convert it to Gsap. 

I need to create slider never ends. 

like in  that topic. 

Thanksss

 

See the Pen WNZyRyY by azadsarxanli (@azadsarxanli) on CodePen

Link to comment
Share on other sites

Hello there.

 

I'm afraid, asking others to convert something for you is not how these free support forums work (see the forum guidelines).

 

That thread you linked should give you a good starting point to trying things yourself.

 

There is a super awesome helper function in the docs that should also come in very helpful when it comes to creating an infinitely animating loop.

 

I'm not sure what exactly it is, you're going for as that pen of yours does not appear to do much for me visually, but to get you started, here's an example of that helper function pen I mentioned, repeating infinitel,y and with a ScrollTrigger added that makes it change direction depending on the direction of scroll.

 

Give it a shot to tweak it to your liking. We will be glad to help more with any GSAP specific questions.

 

See the Pen dyVKvKj by akapowl (@akapowl) on CodePen

 

  • Like 5
Link to comment
Share on other sites

Yes, @akapowl, you're right. Thank you for your reply.  My purpose wasn't, actually, asking somebody convert that for me. I just need example that shows it with an easy way. ^^ The post I mentioned is confusing a bit.  Your js code is really hard to understand for me... 

Link to comment
Share on other sites

Ok, excuse my assumption then.

 

I understand that the code is kind of hard to understand - I added some comments, maybe that will help a bit.

 

The hardest part really is the helper function there (everything below the dashed line) - but I don't think you need to worry about that too much if you just want things to loop infinitely. Technically it can be reduced down to what Blake showed in this other recent post. It looks so complicated here because it takes care of a whole lot of things/quirks for you and makes this horizontal looping very flexible adding in some convenient functions.

 

 

  • Like 3
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.
×