Some users of Blocksy theme asked me how to make this kind of line-connected parallax effect in Greenshift. So, here is my explanation from which you can study many interesting features of GS plugin.
So, first of all, we need to create a gallery grid. And there are many ways to do this. I prefer to use CSS grid but in our case, we need to animate blocks related to each other so we need to know the exact position of each item. CSS grid will be not predictable in this case so we need to use an Absolute position panel and add a definite absolute position for each image. Also, it’s important to place everything inside the Section block and add Overflow Hidden in the spacing panel. This will fix any kind of issues when the position of the element is bigger than our window.
Also, I put one container above all others, I use z-index option for this and put it more than z-index of other layers.
Next part is adding points to our connected blocks. For this purpose, we need to wrap our image in Container. Quick way – click on icon of block and choose to convert to container. Now, we can place items inside container. I will use block SVG Shape and one of option of this block is Circle shape. I set width and height and add position Absolute. Each point will be placed in each corner, for this, I choose top=0 and left=0 to place it in left top corner, bottom=0 and right=0 to place in right bottom corner and so on.
Now, it’s time to draw the lines between two connected containers. But it’s not real lines, it’s just rectangle between points, check image below.
For building rectangles, we still use universal Container block and put inside it svg shape block with enabled Custom SVG code option where I put svg code of dashed line
Now, for each of containers with lines I add special class with unique names via our Class system. I will use Local classes because I need to add static initial height and width. I will add “animate_left_top”, “animate_left_bottom”, “animate_right_top” and “topcontainer”
How to calculate width and height for each rectangle? It’s easy, you need to know only position of each point + width/height of two blocks. For this, I also set static width and height for our images.
So, for the first, left top rectangle, the width will be the Position of top left point (left option) of the first container – The position of top left point of the second container (left point). The same is for height.
The width and height of the left bottom rectangle are the same because both images have the same height.
The width and height of the top right rectangle will be the Width of our top container – the difference between points.
By the way, you can use also the Interaction layer feature to calculate the width of height for containers dynamically. For example, you can use on load trigger and “set CSS property” action with dynamic placeholders. You can enable all math operations in Interaction layers, but in my case, I will set all properties manually, this is because my section is in first view and if you use scripts to calculate height and width, then it will make layout shifting on loading. But if your section is below first screen, maybe interaction layer calculation will be a bit better
Animation
Let’s continue. Now it’s the easiest part – animation. It’s because Greenshift has a lot of animation features and custom parallax effect is really easy to make. Just enable GSAP in animation section, set value for animation, select animate “TO” as direction and enable scroll interpolation. On this video, I also set 0 for the scroll trigger but you can leave it blank if you want to have auto-detection at the start of the animation.
Now, you need to do the same for all our containers. But there are few important things. First, we will animate height and for this, we will use a custom property
See how I added height as -=200. It’s relative syntax, it means that height will be animated from current value when page is loaded till it takes as height-200px.
200px is the value that I set also to animate our main container for Translate Y. It means that when the main block moves to 200 above, our container height reduces also to 200px. This way we got effect of connections
Also, very important to set a selector for custom triggers in the animations of containers. It must be our main container “.topcontainer”. In this way, our containers will be animated synchronously with main container
Mobile animations
Our area is too big to be in mobile view. On Blocksy theme site they scale down images to show them all, but I am a bit lazy to do this + this destroys the whole cool effect and this makes images too small. So, I will simply disable unwanted containers in Advanced – Responsive tab. And click on Mobile icon on our animated blocks to change the position of items so they will be proper visible on mobiles. But you can do better and set mobile options for height, width, positions to scale down everything. By the way, animation can be set different for Mobile view. There is a special option for this
