Snap effect in scroll area: in-depth tutorial

This tutorial is part of a series on how to construct an awesome-looking scroll gallery, with inertia, snap effect, zoom and other stuff. Now we will add a snap effect to it, or as I call it, a magnetic behaviour. When the scrolling gallery is left somewhere between two images, the behaviour will move the one closest to the center towards the middle by scrolling all the sliding gallery. Easier done than said, actually:

snap to center effect
The snap effect will look like this. Magnetic, isn’t it?

Let’s get on the snap effect parameters!

Let’s start with the parameters we’ll need to add to our script this time:

    [Header("Magnetizaiton Parameters")]
    public bool doMagnetize = true;
    public float magnetizationMaxForceFactor = 0.09f;
    public float magnetizationRangeAlphaStepFraction = 0.5f;
    protected float magneticForce;

The first one is just to be able to disable the whole behaviour in one click. The variable magneticForce, instead, will be used to pass the actual per-frame movement to perform, as caused by the snap behaviour, to our updateAlpha function (that will change accordingly).
As for magnetizationMaxForceFactor it will be a factor that defines the maximum movement that can be done in a single frame. And last but not least we have magnetizationRangeAlphaStepFraction, a variable that represents which range of the intermediate positions between two images should be a valid starting point for our snapping behaviour (0.5 being just everywhere and less will leave some resting areas in the middle of two images).

To the bat-functions!

We won’t need to change the start function, but our Update will need a fix:

    protected virtual void Update()
    {
        updateAlpha();
        updateMagnetization();
        if (Mathf.Abs(lastFrameAlpha - alpha) > 0.001f)
        {
            refreshImages();
        }
        lastFrameAlpha = alpha;
    }

We’ll have to make a call to update the magneticForce parameter we introduced before and it must to be done at every frame.

As for our UpdateAlpha we’ll check for input and use the magneticForce if and only if there is no ongoing action

    protected virtual void updateAlpha()
    {
        alpha = Mathf.Clamp(
                alpha + (Mathf.Abs(inputSource.NetSwipe.x) > 0 ?
                    inputSource.NetSwipe.x * rotationSensibility
                    :
                    magneticForce),
                0,
                1
                );
    }

See? Only when the absolute value of the horizontal swipe is exactly zero we’ll add our magneticForce instead of the input-driven value. And now let’s go for the main dish:

    protected virtual void updateMagnetization()
    {
        if ((Mathf.Abs(inputSource.NetSwipe.x) <= 0.001) && (doMagnetize))
        {
            float rest = alpha % alphaStep;
            if (rest < magnetizationRangeAlphaStepFraction * alphaStep)
            {
                if (rest < rotationSensibility)
                    magneticForce = -rest;
                else
                    magneticForce = -rest * magnetizationMaxForceFactor;

            }
            else if (rest > alphaStep * (1 - magnetizationRangeAlphaStepFraction))
            {
                if (rest < rotationSensibility)
                    magneticForce = rest;
                else
                    magneticForce = (alphaStep - rest) * magnetizationMaxForceFactor;
            }
        }
    }

First we check that there’s no input and that the magnetization flag is set to true, otherwise we’d only be wasting our CPU cycles. Then we get the difference between the current position and the nearest image thanks to the module operator and the alphaStep variable that gives us the distance between images.

Implementing the actual snap effect

Now we can distinguish two cases: either we need to snap to left, or we need to snap to right. But we also could be in the case that magnetizationRangeAlphaStepFraction is small enough to allow for a resting position between images and that shall be checked too. Once we decided this we’ll see if we’re so close that it’s better to just skip to the final destination (by using the whole rest value as our next magneticForce ) or if we should go move of a fraction of it (by multiplying for magnetizationMaxForceFactor ).

Well, now the slider looks way nicer but it still lacks an inertia option and the abilty to select stuff. You’ll have to wait a bit for that, until next part is ready. Join my newsletter, I’ll link it there! [edit: next part is here]

Here’s a copy-paste friendly recap of all the changes we made to the base script in last article

    [Header("Magnetizaiton Parameters")]
    public bool doMagnetize = true;
    public float magnetizationMaxForceFactor = 0.09f;
    public float magnetizationRangeAlphaStepFraction = 0.5f;
    protected float magneticForce;

    protected virtual void Update()
    {
        updateAlpha();
        updateMagnetization();
        if (Mathf.Abs(lastFrameAlpha - alpha) > 0.001f)
        {
            refreshImages();
        }
        lastFrameAlpha = alpha;
    }

    protected virtual void updateAlpha()
    {
        alpha = Mathf.Clamp(
                alpha + (Mathf.Abs(inputSource.NetSwipe.x) > 0 ?
                    inputSource.NetSwipe.x * rotationSensibility
                    :
                    magneticForce),
                0,
                1
                );
    }

    protected virtual void updateMagnetization()
    {
        if ((Mathf.Abs(inputSource.NetSwipe.x) <= 0.001) && (doMagnetize))
        {
            float rest = alpha % alphaStep;
            if (rest < magnetizationRangeAlphaStepFraction * alphaStep)
            {
                if (rest < rotationSensibility)
                    magneticForce = -rest;
                else
                    magneticForce = -rest * magnetizationMaxForceFactor;

            }
            else if (rest > alphaStep * (1 - magnetizationRangeAlphaStepFraction))
            {
                if (rest < rotationSensibility)
                    magneticForce = rest;
                else
                    magneticForce = (alphaStep - rest) * magnetizationMaxForceFactor;
            }
        }
    }

 

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •