Synced pin items are advanced effects that can be made in different ways. Mostly, you will need to have a trigger that changes pinned items. Most of the time, the trigger will be the item’s title that goes to a specific scrolling point; when you continue to scroll, another connected pinned item is changed.
First of all, we need to consider the mobile view. Because we can’t pin big areas on mobile, we must use a regular stacked view.
Ok, let’s start. First, create Row and set right column to be sticked in Advanced – Position. Don’t forget to set also a value for top option.
Now, in the left part, put elements (text, buttons, or whatever you want) and images at the end of each section. Now, we need to hide these images for desktop and show them for mobiles. At the same time, we want to keep the space of these images. For this reason, we can’t just use responsive hide/show; we will use the Visibility option. We will have the same styles for all such images, so using a local class from our class system is better. So I created a special local class on the first image and enabled visibility hidden option (and set it to be visible for mobiles)
Now, I selected the same class for all images that I want to hide
Let’s do right column. Well, for this task, I will use the usual block – Slider. Greenshift has a very powerful and flexible slider block, sometimes you can’t even imagine how many complex tasks you can do with this block.
In the Slider block, I add images in the Slider image panel and enable the option to show full images In Slide effects. Then, I enable Custom effect for sliding and simply experiment with options. I will use Shift Z to make 3d effect
Now, we must connect the left part and the right part. For this, I will use Interaction Layers. Now, I need to add actions to my titles that I will use as triggers. As trigger type, I will use On Enter Viewport and for action, I will use Slide change. Take attention to fact that index for slider is starting from 0. So, first title will Slide to Index 0, second to 1, etc.
Usually, we don’t need to set interaction layers to all our titles, because we can use TRIGGERINDEX, but our situation is different because we have many elements in left column, so we can’t use index. This is why we must set Interaction layers to each title. Also, it’s important to put selector where you have slider. For this, I added class “sliderwrapper” to our column and I used this class for Interaction Layers. This is example of settings for Interaction Layers
Also, I set custom root margin as -25% 0% -75% 0%, this means that trigger will work when element reaches 25% from top of browser window.
As always, you can import this item from Fancy Library