Here we’re using the mouse move interaction and the ‘Animate X/Y’ actions in order to create a parallax effect inside of Pinegrow.
Pinegrow uses GSAP under the hood which results in smooth and performant animations.
So, I recently added this interaction on my website where if you move the mouse around it kind of creates this parallax effect on the background. So, I thought I’d share my process and how I would achieve this in Pinegrow.
[Music] So, if you’re new around here I make content all on front-end development and websites in particular no code tools like Webflow and Pinegrow so if that sounds of interest to you then don’t hesitate to subscribe.
So, taking a quick look at our layout here before we get going we have our picture element which if you watch last week’s episode we go into the various different formats on how we can choose those using the picture element and that contains our kind of space background image and then over the top of that I have another image element which is just linking to an svg of…of our grid basically so we have those two layers that we that we get to play with. So, the first thing we’re going to do is actually because we’re going to be moving this image up and down.
I don’t want to see the bottom of this image kind of like reveal itself so the first thing we need to do is actually scale up this image so if I come here select my image and go to the transform area change the scale property and add it about 1.1 should be fine for this but your your scaling might vary on your project but in my instance scaling 1.1 is absolutely fine.
So, then we’re going to click on the wrapping element that’s going to receive the mouse events and then at the top here clicking on the interactions tab will enable us to add interactions. We can add a series of interactions here and we’ll we’ll go through them in another episode but in this particular one I’m going to click on interaction so in this example we’re going to be actually adding two interactions to our to our elements so the first one is going to be the x axis and then the second one is going to be the y axis so just for just for simplicity and for ease of um sort of recognizing and editing, I’m going to name this first one “X Position” but it really doesn’t matter what you name it it’s just for your convenience here.
Next is the trigger and we’re going to go to mouse only and we’re going to go mouse move on that wrapping hero element and then lastly we’re going to hit the action now if I hit animate “X Position” what this is going to do is read it’s going to play an animation from depending on the “X Position” of my mouse so at the far left of the screen here it’s going to be at the beginning of the animation and as I move it to the right hand side of the screen it’s going to play to the end of the animation.
So, let’s now handle the “Y Position” so heading back to our element that’s going to be receiving the interaction we can hit add interaction and now we’re going to do “Y Position” so same again the trigger is going to be mouse only and mouse move, and then the action is going to be animate the “Y Position”
And this is going to be exactly the same as the animate “X Position” in the at the top of the page it will be the beginning of the animation and then the bottom of the page will be the end of the animation, so if I hit edit animation here…target my image and then same…principle as before…10 vertical height.
So, heading back into Pinegrow turning those off all I need to do here is put a minus in front of our animation and the same again for the vertical uh…”horizontal animation” here so if I hit save preview in the browser and now you see the image moves away from my mouse which gives the user the impression that they’re able to look a bit further in the direction that their their mouse is in.
So, there we go that was a quick tutorial on the interaction and the mouse move events if you’d like me to go over anything that I’ve gone here if something’s not explained too clearly then please do leave a comment below and if you want to learn more about Pinegrow’s interactions feature then do let me know and I can do my best to offer more of that content. So, I’ll do it for today so remember to like and subscribe and I’ll see you soon [Music]