Jump to content
Search Community

Fullscreen sliders horizontal and vertical

PointC test
Moderator Tag

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
  • Thanks 1
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...
  • 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

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...
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

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

  • 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

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

    • No registered users viewing this page.
×
×
  • Create New...