Unity UI Scroll Snaps new Version 1!

Unity UI Scroll Snaps Version 1

Unity UI Scroll Snaps is an open source project focused on creating robust components for all of your scrolling and snapping needs.

Haven't Heard of This Before?

If you haven't seen this project before, it had an old Version 0 which is still (for now) the most fully-featured version. You can find more information about it here .

Why is it Moving to a New Version?

The reason that the project is moving to a new version, is that the old code was getting hard to maintain. Plus when I looked at it I kept thinking "I could do this so much better now smh" so I decided to go ahead and do that! The new version is rewritten from scratch with:

  • Better Object Oriented practices.
  • Better structure.
  • And unit tests! Lots and lots of unit tests!

The new version is also more robust, whereas before the items' RectTransforms had certain properties you couldn't modify, this is no longer the case! The project now uses the latest in... math... to allow you to setup your items (as well as the content and scroll snap) however you like! See the Initialization Demo for some examples.

Want to Check it Out?

If you want to give the new version a shot, here's the latest download. You can also check out the source code here.

List of All the Things

Examples of "all the things" in action are part of the asset package. Check out this for the Version 0 List of All the Things.

Components

[spoiler]

Directional Scroll Snap

The Directional Scroll Snap is based on the idea of the scrollable item menu. Items are "snapped to" (aligned with the pivot of the Directional Scroll Snap) along one axis so that it either scrolls vertically or horizontally. The Directional Scroll Snap also snaps to items pivots not their centers (although you can set it to their center) to give you more options in how you animate & organize your items.

Options Include:

  • Moving Horizontally or Vertically.
  • Making your items appear to loop! Works with any configuration you can think of (yes this includes different margins steve).
  • Programmatic Population. Add an remove items at runtime. Includes bonus efficiency if you modify it before the scroll snap is enabled, for no extra charge!
  • Supports configuring items in anyway you want! Weird pivots? Scroll snap doesn't care. Want to scale things? Scroll snap thinks that's cool. Want every item to have a different anchor point? Scroll snap throws you a pool party.
  • Also supports layout groups like: Horiztonal Layout Group, Vertical Layout Group, and Grid Layout Group, because we all have those days.

[/spoiler]

Helper Classes

[spoiler]

Scroller

The Scroller is based on the Android Open Source Project's Scroller. It makes it easy to move something from point A to point B in way that's cleaner and more robust than simple lerping.

Options Include:

  • Animations based on velocity (Flings).
  • Functions for calculating where a Fling will land before it has been flung.

Item

The item class is used to store data about the Items controlled by the Scroll Snap. This allows data to be moved out of the Scroll Snap into somewhere that makes more sense. This class is also very important when it comes to arranging the items of the Scroll Snap because it handles margins.

Options Include:

  • rectTransform property.
  • snapPosition property.
  • Functions for setting the margins. It can do this programmatically based on where the item is in relation to its neighbors, or it can be be set artisanally by passing a float.
  • Functions for getting the margins. Margins work similarly to CSS, meaning that margins overlap and whichever margin is the larger margin is the one you will see.

ScrollSnapUtilities

Holds those persnickety functions that don't really belong on an object.

Options Include:

  • WorldPointToLocalPointInRectangle function.
  • WorldPointToRelativeToAnchorPoint function.
  • CalculateMinimumMargin function. (Used by the item!)
  • And others (ooo so mysterious)
  • Also lots of documentation comments (which goes for all of the other scripts as well!)

[/spoiler]

Want to Have Input on What Gets Added?

I have created a super-short 5-question survey about how you used the previous Version 0. Your answers to those questions will help inform what gets added to Version 1 and especially what gets added first!

You can also reply below if you have comments, questions, or suggestions for the new version.

DISCLAIMER: Neither survey answers nor replies are in any way binding and just because you ask for something does not mean it will happen.

But I do really appreciate the input! And I will be looking at the survey to see the results!

Thanks!

Thank you for taking the time to check out the new version. If you find any bugs please post an issue on le bitbucket, or reply below. Please try to keep questions/comments about Version 0 on the other thread , and questions/comments about Version 1 here.

Thank you again!
BeksOmega

2 Likes

Added a new List of All the Things to the OP. Now you can try before you buy*! Or read the info before you download anyway... hehe.

--BeksOmega

*No buying is actually included in this project

Does the directional snap work in a nested fashion? As in I want the horizontal scroll to snap but the vertical one not to?

[quote=“Cypras”, post:3, topic: 729707]
Does the directional snap work in a nested fashion?
[/quote]

Currently it only does this in a limited way.

The above is a gif of two vertical scroll snaps nested inside a horizontal scroll snap. As you can see if you drag on the yellow areas the vertical scroll snaps will move (the yellow areas are the content objects of the vertical scroll snaps), and if you drag on the blue area the horizontal scroll snap will move (the blue area is the content of the horizontal scroll snap).

I’ll definitely look into some sort of input-passing system for the scroll snaps, so hopefully this can have better behavior in the future.

I hope that helps! If you have any more questions please reply!
BeksOmega

It's really impossible to get 1 canvas to become bigger, like when doing a slideshow.
Can't even get canvas elements to work
sigh..

[quote=“Wolk”, post:5, topic: 729707]
It’s really impossible to get 1 canvas to become bigger, like when doing a slideshow.
Can’t even get canvas elements to work
sigh…
[/quote]

Hello,

Could you send me some more information about the problem you’re experiencing? A picture would be super helpful!

I might have a recommendation, and if not the information will help me file a bug report :smile:

Thank you!
BeksOmega

Well i can't really post a picture. But just imagine having a timeline or a slideshow where you want to pop out / lerp the size of middle element to highlight it!

[quote=“Wolk”, post:7, topic: 729707]
Well i can’t really post a picture. But just imagine having a timeline or a slideshow where you want to pop out / lerp the size of middle element to highlight it!
[/quote]

Ah ok! There will be a “closestItem” attribute in the next update that should help you find the middle element. And events (such as ones that will tell you when the scroll snap moves) are planned.

For now you can hack it by modifying the Directional Scroll Snap component. First add code like this (using an IEnumberable will future-proof it):

public IEnumerable<Item> items { get { return m_Items; } }

Then you can create a component that works something like this:

using UnityEngine;
using ScrollSnaps;
public class ScrollBasedOnDistance : MonoBehaviour
{
    public DirectionalScrollSnap scrollSnap;
    public RectTransform scrollSnapRectTransform;
    public AnimationCurve scaleCurve;
    // Change this to 1 if you have a vertical scroll snap (it allows you to access the x/y
    // components of a vector).
    public int axis = 0;
    public void Update()
    {
        Item closestItem = null;
        var minDistance = float.MaxValue;
        foreach (var item in scrollSnap.items)
        {
            var itemPosRelativeToScrollSnapPivot = ScrollSnapUtilities
                .WorldPointToLocalPointInRectangle(scrollSnapRectTransform, item.rectTransform.position);
            // This works because the position of an object is the same as the distance from the
            // origin, and the last function made the origin of this vector the scroll snap's pivot.
            var distanceFromPivot = Mathf.Abs(itemPosRelativeToScrollSnapPivot[axis]);
            if (distanceFromPivot < minDistance)
            {
                closestItem = item;
                minDistance = distanceFromPivot;
            }
        }
        var scale = scaleCurve.Evaluate(minDistance);
        closestItem.rectTransform.localScale = new Vector3(scale, scale);
    }
}

Which looks like this when it’s running:

Note: The animation curve should start at 0 on the x-axis and the end should be less than or equal to the distance between the items’ /pivots/. If you make it bigger your item’s won’t get scaled back to 1 by the time the other item is closer. (In this example the items’ pivots are 100 units apart and the animation curve goes from 0-50)

I hope that helps! If you have another questions please reply!
BeksOmega

Could you perhaps share the project, i can't seem to get it right

[quote=“Wolk”, post:9, topic: 729707]
Could you perhaps share the project?
[/quote]

Sure thing! The download below has the modified DirectionalScrollSnap, ScaleBasedOnDistance script, and is stripped of tests & demos. To view it:

  1. Create a new project.
  2. Go to Assets > Import Package > Custom Package
  3. Select the ScaledBasedOnDistanceExample.unitypackage you downloaded.
  4. Open the ExampleScene.
  5. Hit Play and scroll the Scroll Snap.

I also created an issue to add a Scale Based on Distance Demo to the official download, please add a comment if you have thoughts! And if anyone is interested in creating that I do accept pull requests :smile:

4311139–387751–ScaleBasedOnDistanceExample.unitypackage (25.7 KB)

Still not as good as i had hoped it would be. What i'm looking for is for the item to enlarge when it hits the purple rectangle, right now it's popping out too fast.

[quote=“Wolk”, post:11, topic: 729707]
Still not as good as i had hoped it would be. What i’m looking for is for the item to enlarge when it hits the purple rectangle, right now it’s popping out too fast.
[/quote]

Well luckily that’s not too tricky :smile: All you need to do is access the ScaleBasedOnDistance component, attached to the Directional Scroll Snap Object. Open the animation curve, and modify it so it gives you the result you desire.

Or you could create a different function for modifying the item size that doesn’t rely on an animation curve. Really anything goes hehe.

I hope that helps! If you have any further questions please reply.
BeksOmega

1 Like

Still doesn't feel right. If i add more elements it goes past the box, and even if modify the animation curve, it starts to curve too late, and only one element curves.I think i'll be using unity's scroll view due to other functions and robustness it offers.
Here's kinda how i wanted it to work:
https://imgur.com/a/Sm5C2pF

Since that's some chinese plugin with lua,
i think i'll have to write it on my own :/

4314190--388273--mv.gif

how about some getting started guide, please? =) can't understand how to use it(

I need to add my buttons to my scroll at runtime. From what I have read in the documentation, I should use “insertChild”. Can you provide a quick scripted example of how to access and use that method?

Actually I figured it out. It's working now.

// DirectionalScrollSnap scrollPanel,
scrollPanel.InsertChild(rt, index, 0f, 50f, 50f, DirectionalScrollSnap.LockMode.After, true);

Two questions:
1. Can you help me understand what the LockMode is?

  1. When I add my buttons to my scroll at runtime, the "Start Item" no longer gets obeyed. Even if I toggle the enable-ness of the ScrollSnap with a script after my buttons have been added.. (Note: When I manually toggle the enable on the ScrollSnap during PLAY, the ScrollSnap successfully snaps to the start item.

New Update 1.1.0 Additions Include:

  • Loopability! Your items can now appear to be in a loop.
  • Programmatic Population. You can now add and remove items at runtime.
  • Gizmos that help you configure your scroll snap.
  • Squished a whole bunch of bugs.

You can see the complete change log here.

[EDIT] Also worth noting that unit tests are no longer included in the unitypackage because most people don't need them. You can still download them off the bitbucket though :smile:

If you have any questions/comments please reply!
--BeksOmega

P.S: @unnanego and @scandell I will be replying to you as soon as possible! Sorry I didn't see your questions sooner!

2 Likes

I started an issue to track this request. Are there any specific things that you have questions about?

@scandell I replied to you in a forum conversation so that this thread doesn’t get filled with Version 0 stuff.

If there are any other comments or questions I’m happy to help :smile:

2 Likes

Hello, im sorry about the noob question(im just starting out with unity) but im using scroll snap in my project and i want to show a different image per scroll page index, i though about something like "if Currentpage = 1, img1.setactive (true) and if Currentpage = 2, img2.setactive (true)..." but i have no idea how to implement that.
so far i only edited Horizontal Scroll Snap so that it logs the current page number

Hello,

So just to clarify, are you using Version 0, or Version 1 of the project? There may be different ways to achieve this depending on which you're using. If you're not sure it should say the version on the folder inside unity.

Second question, are img1 and img2 items inside the scroll snap? or are they objects outside of it?

And last question, would you mind posting the code you created to do the logging? I think it's super cool that you modified it! And seeing your changes will help be give better suggestions of how to hook into it.

Thanks for trying out the project! Once I have a better idea of the situtation hopefully I'll be able to give a better suggestion hehe.
BeksOmega

1 Like

Should I Use those Scripts my project??