Jump to content
Search Community

Fake horizontal scroll with snap on sections and on items by scroll

Daria Vishnyakova test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello Green Sock community.

I have an issue with scroll behaviour, and I hope that you can help me to handle it.
 


Here is just a simple example of scroll, I was trying to give a user possibility  to scroll only with his wheel (in one direction). The main idea was: when user scroll - the page must scrolls by sections, and when it is a horizontal scroll page must be scrolled by items (not partially, but fully).

Now I faced with a strange behaviour of animation when scrolling, I think that something is wrong with my code, but can't get what exactly. 

See the Pen NWyYqBE by Dasha_Vi (@Dasha_Vi) on CodePen

Link to comment
Share on other sites

39 minutes ago, Cassie said:

Hi there, welcome to the forums.

 

Can you elaborate more on this please? What is the strange behaviour?

 

Also - it may be helpful to look at the scrollTrigger demos.

https://greensock.com/st-demos


Hello, Cassie.
Strange behaviour of scroll is: when you scrolling sections go further. Screen can be scrolled to the middle of horizontal section, or just to the middle of the blank section (just one with text). When you scrolling horizontally it must appears new item from the right side, then next item from the right side, but now onScroll screen goes to the middle of horizontal section... this is strange :)

Link to comment
Share on other sites

hello, Jack. Thank you very much for help!!
Your decision looks so accurate.
 

var availableWidth = window.innerWidth, 
          hidenWidth = thisAnimWrap.scrollWidth - window.innerWidth;

const snapArray = items.reduce((acc, item, index) => {
  const sum = acc[index - 1] ? acc[index - 1] : 0,
        multiplier = 1000;

  availableWidth = availableWidth - item.scrollWidth;
          
  if ((availableWidth) > 0)  return [...acc, 0];
  else if (availableWidth < 0 && availableWidth > -item.scrollWidth) return [...acc, 	Math.round((Math.abs(availableWidth)/hidenWidth) * multiplier) / multiplier];

  availableWidth = item.scrollWidth;
  var newValue =  Math.round((sum + (availableWidth / hidenWidth)) * multiplier) / multiplier;

  return [...acc, newValue];
}, [])

My thoughts was enough only for this solution, and then pass an array to snap object 

snap: {
    snapTo: snapArray,
    inertia: true,
    duration: 0.5,
    delay: 0,
},
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...