Jump to content
GreenSock

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 @keith101 and welcome to the GreenSock forums!

 

First off, the GSAP version that you're using is pretty old. We highly recommend using GSAP 3!

 

ScrollMagic is not a GreenSock product and we don't really recommend using it. In fact, GreenSock is currently developing its own scroll plugin and it can do this sort of effect very easily! Currently it's in private beta but hopefully it should be released in the next few weeks.

 

In terms of your question, you could implement previous and next buttons by making use of the fact that you can calculate how much space is before this section and how far this section has scrolled. Then when someone clicks a button you move to the correct position based on that information. The position for the first slide would simply be the distance from the top of the page. The second slide would be the distance from the top of the page plus its left offset. And so on.

 

Side note: you probably want an ease of none on your horizontal tween. That way it is consistent in how fast it scrolls to the side.

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

Hi  @PointC
First of all thanks for this awesome Slider.

I have left private message to you, but after reading the complete thread I feel I should Ask it here , so it will maybe useful for someone else too.

So using the example of yours, which is a full page slider, I am trying to create a slider which is not full page and shows 5 items at a time, 
I have forked the pen and create this, with a small function which will run this on keyboard up and down arrow key too.

See the Pen yLewvZe by atulraj89 (@atulraj89) on CodePen



So my problem is,
related to dragging, Everything is working as expected, but while dragging, after item-15, I am not able to drag it further, Because of height,
I can see item 16 and 17, but not 18, is it possible to drag it to the end like its working with Mouse wheel and keyboard?

and same thing happening while dragging back to upwards, I am not able to drag it before item 3.

So how drag function working here, how you calculating the drag area? I have tried to find the code related to it but  not able to, need your expertise on this. 

Link to comment
Share on other sites

I'm not quite sure what you're creating here and my sliders might be overkill for what you're doing, but the Dragger is bound by the #masterWrap. That was for the full screen version though. In your case, I'd set the bounds by calculating how many of the 61px tall sections you have. Set the y max limit to that value minus 1 panel and you should be all set.

 

  bounds: {
    minY: 0,
    maxY: -1037
  }

That is hard coded. You can also calculate it dynamically in one of the functions too. I also removed the 122px padding on the top of the master wrap as I have no idea why it was needed. Here's a fork of your pen with those changes.

 

See the Pen 4ae9bae161a9e8e77e90a43917cd0849 by PointC (@PointC) on CodePen

 

Happy tweening.

 

  • Like 3
Link to comment
Share on other sites

Hello @PointC,

Thanks for the solution, awesome it is,

Actually initially I want to show only first 3 items, that's why that padding was there, but its messing with the drag.
One more question: is it possible to loop it, like infinite scroll?
Thanks Again

Link to comment
Share on other sites

9 hours ago, atulraj89 said:

One more question: is it possible to loop it, like infinite scroll?

Not the way I designed it, no. You can modify it for that functionality if you like. There are also numerous threads around the forum with infinite looping carousels that can get you started too.

  • Like 2
Link to comment
Share on other sites

@PointC, Thanks Craig,

Its awesome and helped me a lot, 
but after modification it has a small problem, I should't say this a problem but a small UX issue, Just mentioning here, so that you will suggest some solution of that as well.

So once you are using it in a window sized 100vh or less, or body's overflow hidden, then with mouse wheel scroll its working superb as expected,
but when you use it within a page which has scroll or more content in body, then with mouse wheel scroll its scrolling the items and page too.
ideally if we have mouse over the #masterWrap, then only carousels should move not the body, 

But its completely understood as this is not a normal slider and a full page slider, so its working a expected.

Link to comment
Share on other sites

I think you'd just want to add this to the slideAnim() function.

e.preventDefault()

 

  • Like 2
Link to comment
Share on other sites

13 hours ago, PointC said:

 


e.preventDefault()

 

I have already tried this, but its not working , check this latest example, I have did some modifications and made it as I needed, but that problem of window scroll while the mouse on the masterWrap is still there, Can you please have a look.

See the Pen ExPMoqj by atulraj89 (@atulraj89) on CodePen



So the need is, when I am using mouseWheel to run slider and my Mouse is over the slider, its should not scroll the window, olny slider needs to run.

Link to comment
Share on other sites

7 hours ago, atulraj89 said:

when I am using mouseWheel to run slider and my Mouse is over the slider, its should not scroll the window, olny slider needs to run.

It sounds like you need to prevent the default behavior of the wheel event then?

 

Do you have a question specific to GSAP? Unfortunately we don't have the capacity to help with every non-GSAP issue posted. But if you have a GSAP question we're happy to answer it :) 

  • Like 2
Link to comment
Share on other sites

You still have the wheel listener on the window. You don't need that in your case.

const masterWrap = document.querySelector("#masterWrap");
masterWrap.addEventListener("wheel", slideAnim);

 

  • Like 2
Link to comment
Share on other sites

I'm closing this thread for now.

 

If anyone wants to tinker with my sliders or modify them for a project, that is perfectly fine. Have fun.

 

We don't have the capacity to answer general coding and logic questions, but if you have any GSAP related questions about the sliders as you use them, please post a simplified demo in a new thread and we'll be happy to help. Thanks and happy tweening.

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