Scroll Snapping


#1

Has anyone had success with creating a snapping-like behavior with parallax scrolling? I’m trying to mimic a “3 page” android desktop scenario where I have three grids of icons. I’d like the scroll to return to a position location if the scrolling movement is less than a certain number, and I’d like for it to jump to the next cluster and stop at a position location if the scrolling movement exceeds a certain number. This would work both ways, from right to left and left to right, ideally.


#2

Hi @cullenb,

If you use a scroll collection as the main manipulated collection, you can use its Is manipulated trigger in combination with a condition on the scroll offset. Depending on the value, you can call the proper action to scroll it to the desired offset.

Please keep us informed when you test this solution.

Seb


#3

Yes, I have a scroll collection set as “main” that moves a scroll collection below it with an offset. Let’s call that Scroll-Front. I can add this trigger: WHEN > Scroll-Left > Is being scrolled > Left moved right > Condition.

Now I have a question: I’m guessing I’d have to set this up for both directions, for “Left moved Right” and “Right moved Left”. Is this correct?

From here I want small swipes to have a “return to center” movement and larger swipes to have a “jump to X coordinate” behavior.

For small swipes returning to center, my Condition 1 can be: X of Scroll-Front Is less than 200 > THEN > Scroll to a point: Offset % 0 (let’s say Animated, Duration 0.25, Ease out).

For larger swipes, WHEN > Scroll-Front > Is being scrolled > Left moved Right > Condition 1: X of Scroll-Front Is more than 200 > THEN > Scroll to a point: Offset px 1920. [Quick note: I have 3 “screens” that I’m moving through, much like having a 3-wide homescreen in Android.]

Am I on the right track? And if so, would Right moved Left have a negative Offset px for larger swipes going from left to right?

Thanks in advance. Any information nudging me in the right direction is greatly appreciated. I’m not wanting to come off as someone who needs hand-holding through this. Just trying to wrap my head around this great application; I couldn’t be creating content like this without it.


#4

To keep going on this discussion, I’ll need to have something visual in front of me :slight_smile:
I’ll send you a pm so that you can share your experience with me so I can have a look at it in my Composer.


#5

Take a look at the 3 value converter. It’ll allow you to set an action when your scroll lands “between” two values. I think I was trying to do something similar in a previous project some time ago. Good luck.


#6

Thanks, Sebastien. I really appreciate it.


#7

Thanks, Alex. I will look into that. Definitely describes what I’m after.


#8

Hi @cullenb,

I had a look at your project and would go with the following:

  • use the scroll is completed trigger with a condition on the horizontal direction + conditions on the horizontal offset to define your 3 areas.
  • use LeftMovedRight and RightMovedLeft for the direction values.
  • that should result in 6 triggers (3 per direction) for which you can adjust the thresholds.

Seb


#9

Thanks, Seb. I really appreciate you taking the time to look at this project. Sorry it’s taken me so long to reply. I got pulled onto other projects over the last two weeks and haven’t been able to work on this one in a while. I’m looking forward to getting back into this next week and implementing your suggestions. Thanks again!


#10

Hi Seb,

I’ve finally gotten back on this project, which has been completely rebuilt from square one going in a new direction. With this version, I now have a vertical scrolling area that does not use parallax visually, but does use vertical offset binding for the vertical movement of the “Scroll-Back” image to the “Scroll-Front” layer.

I’m making 4 areas where I’d like snapping to occur, and I’ve defined those areas with four empty rectangles, each 1920 x 1080 stacked on top of each other and positioned over a 1920 x 4320 background image.

As soon as I got to Get Value From: Source item: Scroll is completed, and clicked on Vertical Direction the program crashed with a fatal error message, and then I hit the button for sending an error report. This has happened twice, so your team will probably receive two of those.

I have published the file if you are able to look at it, would like to and have the time, I would really appreciate it.

Many thanks!


#11

Thanks, Alex! I am finally getting back around to this project and a new start, so we’ll see how it goes.


#12

I realize it’s going on 2 months since you had replied to this discussion, and that is unfortunately the nature of my work where I’m juggling many projects simultaneously with various timelines and deadlines. I would like to send over my Composer file so that you can take a look at what’s going on. Tomorrow is good for me, though I understand if you’re busy. Please let me know what you’re able to accommodate given your schedule.


#13

Hi @cullenb,

I saw that you also posted on our support website, so the team will help you there from now on.

Thanks

Seb


#14

I’ve got the experience shared with reader status on the share and deploy page now. Thanks again to you and your team for your assistance with this project — it is much appreciated.