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.
Transcript
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, we’re going to hit edit animation here I can then select my target which is going to be my image, and then once I create a timeline here add the property, I’m going to transform my x and we’re not going to move it by too much we’re going to just do 10 viewport width not too much, and so when I hit the JavaScript button here you’ll see that when I’m at the beginning or the left hand side of the screen my play head is at the beginning and as I move across the page here, you’ll see that the image will animate so I’m looking on the right left hand side there you can see that my image is now is moving too much so, I think that 1.1 is probably a little bit too subtle but um for now we’ve got the interaction working which is great let’s bump that up to something like 1.5
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.
You can now see that with my JavaScript turned on we’re getting that animation actually think we’re probably a bit too extreme there so what I’m going to do is actually make this 5 as opposed to 10 and the same again here so it’s a bit more subtle. Yeah that’s a bit better for me so, the issue is when I preview this in the browser the image actually just follows my mouse which doesn’t really give the kind of sense that I’m trying to go for I want it I want the user to feel like they’re looking in that direction so we need to reverse the movement of the image.
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]