Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Daria Vishnyakova

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

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

Hi there, welcome to the forums.

 

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

Quote

Now I faced with a strange behaviour of animation when scrolling

 

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

https://greensock.com/st-demos

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

I'm sorry I don't quite understand. Scrolling seems ok to me,

Are you talking about snapping behaviour? Are you trying to snap to each section?

Link to comment
Share on other sites

Yes, exactly about snapping. I am trying to snap from section to section and for horizontal sections from item to item, but all time it goes further then on 1 item

Link to comment
Share on other sites

  • Solution

I assume you're looking for something like this?:

See the Pen GRQxMQO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I'm just calculating the normalized progress value for each item based on the overall distance traveled and feeding in an Array of those to the snap feature.

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