Jump to content
GreenSock

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

Fullscreen sliders horizontal and vertical

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

Hey everyone :)


We’re rolling up on Thanksgiving here in America, so I thought I’d say how thankful I am for this forum. You’re a terrific group of people and one AI. I’m so glad I started participating a few years ago. It’s truly been life changing.

 

As a thank you, I’m gonna drop a couple sliders here for the community. I know there are umpteen ways to make a slider, but this is my take on it. I added multiple control types and linked the nav dots animation to the draggable element for a bit of fun. 

 

We often have questions about sliders so hopefully these will be a good jumping-off point for someone.

 

Happy Tweensgiving

:)

 

 

See the Pen YRzRyM by PointC (@PointC) on CodePen

See the Pen MzWzyv by PointC (@PointC) on CodePen


 

  • Like 12
Link to comment
Share on other sites

Very slick, @PointC. Thanks for sharing and for being such a central part of the GreenSock community. No doubt these demos will serve people well. 

  • Like 7
Link to comment
Share on other sites

  • 1 month later...

@PointC These look really great. I'm a little new to GSAP but this is exactly what I was looking for (and then some).

 

Quick question, since I don't need the drag & throw on desktop (and it relies on premium features, as far as I know) is there some other way to trigger the slider on mobile? Was really inspired by the slider transitions on noformat.com, and was hoping to build something similar :)

Link to comment
Share on other sites

  • 7 months later...

Hey! thank you so much for this, so i´m trying to use the slider, but the draggable feature is not working, can you tell me what am I doing wrong? @PointC

Link to comment
Share on other sites

Are you saying Draggable isn't working for you in my demos? Or do you mean that you forked the demos, made changes and now it's not working?

  • Like 1
Link to comment
Share on other sites

  • 5 months later...

Hey,

@PointCI really like your work on this slider, I am working on same kind of animation and i have used this slider example for my website but i am having two issue with this slider

 

1. when i click on arrow for first time its not working i have to click twice to slide from first slide to second slide

2. when i swipe for one time its jumping 2-3 slides at a time and sometimes its going to end slide

Please help me with this i am working on this for 4-5 days now but i am not able find the solution

Thanks in advance!

Link to comment
Share on other sites

Hi @mikel

Thank you for reply

i solved the arrow issue but i am still facing  swipe issue

This example also has same  issue..if i scroll using mouse wheel its working fine but when i scroll using l
aptop mouse touch-pad its sliding multiple slides at a time

 

I can't find the solution on it i tried to delay it but that's not working

 

Thank you in advance

Link to comment
Share on other sites

53 minutes ago, swatip said:

I can't find the solution on it i tried to delay it but that's not working

There's no way for us to help blindly. Please create a minimal demo of your issue if you're wanting us to help debug.

Link to comment
Share on other sites

I have use this example for my project it have the same problem

 

See the Pen YRzRyM by PointC (@PointC) on CodePen

Please scroll using laptop mouse touchpad if you swipe the slider one time it will slide 2-3 slider at a time

 

Link to comment
Share on other sites

31 minutes ago, swatip said:

Please scroll using laptop mouse touchpad if you swipe the slider one time it will slide 2-3 slider at a time

One way to fix this would be to throttle the wheel event:

function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

// usage
window.addEventListener("wheel", throttle(slideAnim, 1500));

 

Link to comment
Share on other sites

  • 1 month later...

Update to this thread since it sees a lot of action and I get questions about it.

 

I've updated both sliders to GSAP3. I have the old GSAP2 versions in private pens if anyone should need them for some reason. Updated GSAP3 versions are in the 1st post of this thread. 

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

Hey @Ahmed Elabbasy. Please create a new thread including a minimal demo of the issue that you're facing if you'd like our help in figuring out what's going wrong. The thread below can provide more information on how to do so:

 

Link to comment
Share on other sites

 

16 minutes ago, ZachSaucier said:

Hey @Ahmed Elabbasy. Please create a new thread including a minimal demo of the issue that you're facing if you'd like our help in figuring out what's going wrong. The thread below can provide more information on how to do so:

 

See the Pen jObyXmW by ahmedelabbasy007 (@ahmedelabbasy007) on CodePen

Link to comment
Share on other sites

7 minutes ago, ZachSaucier said:

@Ahmed Elabbasy You need to load the IntertiaPlugin: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js?r=1789

 

Keep in mind that the InertiaPlugin is a Club GreenSock plugin, so you'll need at least a Shockingly Green membership to use it on your production site.

thats understood
Can you tell me what I have to use?

Link to comment
Share on other sites

Just now, Ahmed Elabbasy said:

Can you tell me what I have to use?

I did? Include the resource I linked to above in the JS resources section of your pen.

Link to comment
Share on other sites

2 minutes ago, ZachSaucier said:

I did? Include the resource I linked to above in the JS resources section of your pen.

This does not work with reactJS ?

 

(i was  mean what plugin i can use in production)

Link to comment
Share on other sites

1 minute ago, Ahmed Elabbasy said:

This does not work with reactJS ?

It does. You'll have to set things up differently because React is different but you can.

 

1 minute ago, Ahmed Elabbasy said:

what plugin i can use in production

The InertiaPlugin. If you're using React it'd be best to load GSAP and the club plugins via the tgz file. For more information check out the GSAP installation page.

Link to comment
Share on other sites

11 minutes ago, ZachSaucier said:

It does. You'll have to set things up differently because React is different but you can.

 

The InertiaPlugin. If you're using React it'd be best to load GSAP and the club plugins via the tgz file. For more information check out the GSAP installation page.

it's working now 

Link to comment
Share on other sites

  • 3 weeks later...

Hey guys,

 

I'm a little stuck here, i've kinda modified the sliders so that i have a more fluid horizontal scroll and so the next section is just slightly in page view. However i'm stuck with how to implement the Next and Prev buttons, is there a way I can change the variable of my current slide as I am scrolling? I'm super lost 😕
Here's a link to my codepen, any tips would be greatly appreciated!

See the Pen WNQZxyj by KeithPaul (@KeithPaul) on CodePen

Link to comment
Share on other sites

  • PointC locked this topic
Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    No registered users viewing this page.

×