A proper look at @pinegrow ‘s no code interactions editor which uses Greensock’s GSAP library.
The correct way to hide on load (12:00)
JavaScript vs CSS animations: https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript
Greensock study: https://youtu.be/1ZWugkJV5Ks
Transcript
I realized, I haven’t done a proper video on Pinegrow interactions. I did a first look uh episode but after a good probably year of using Pinegrow. Now on many many projects, I think, I’m in a good place to do kind of a quick tutorial and taking you through Pinegrow interactions which by the way I think are absolutely incredible.
So, Pinegrow interactions use GSAP animations which is fantastic, um I think again in my previous video, I was more inclined to use CSS to do transitions and and things like that but having looked more into GSAP they have been great in actually doing a lot of performance testing and I’m kind of now sold more on the idea of JavaScript animations over CSS animations. I do think there’s a time and place for both, but I’m leaning much more into green sock doing a lot more of the transitional stuff.
It’s a great no code tool for writing and creating g-suck animations so let’s dive into the example and we can kind of run through.
So, we’ve got a full stack agency website here and to enable interactions you just go up to the top right here um and you should be able to either enable interactions by adding the library and it’ll give you the option to do that because, I’ve already got it here um it’s asking me to select on an element so, let’s decide on a chronic animation that we want to do here let’s fade in these sections and kind of give them a bit more character as we as we scroll down the page.
Let’s do a scroll scene so based on the scroll position of the of the window we’re going to do a certain animation. Let’s let’s get straight into the animation and define it and then we can kind of play around with how things go so first of all you can name the animation you don’t need to name the animation certainly becomes more more powerful if you do, where you can reference the name of animations when triggering them with JavaScript which I actually have an episode lined up or has come out I don’t know but um you can trigger…trigger animations within JavaScript from from within Pinegrow.
So, let’s give it a name of scroll into view animation, and the target here is going to be if you want to effect another element on the..this page so an easier example of this would be something like, this menu button here so um I click on this button but I want to affect another element on the on the page. I’m happy to leave this target here that means I can kind of affect all of these elements within that target which the default is the actual scene element itself you can see that.
And then, we’ve got these pre-set animations I prefer just jumping right in and doing the edit animations and then, you’re presented with a timeline here again a mistake I made on my first video you can think of each of these timelines as an element what you want to do with that element. So, let’s say for example when this scrolls into view I kind of want to just animate this text kind of coming down. So, let’s start by selecting this trigger now you can select which element you want to affect here and you can see on the left hand side there the green you can see a green box appearing which will confirm the element you’re using um.. alternatively you can actually edit the selector here now there’s a few options here that you can go through obviously they are all encapsulated within the parent so when I say when it says h2 here it’s not every single h2 on the page it is every single h2 within this div element um..
Alternatively you can use jcrew like syntax to select any element on the page so if I wanted to select every single um h2 then I can put a dollar in front of it or if I want to select the I don’t know main uh menu um the dollar enables you to actually select any…any element on the page there’s a few different things you can play with here um to get the element that you want but in our case we just want to select that h2, if I had a class on it we could target that class and all the rest of it so what I want to do is probably first of all I probably want to set the…let’s just demonstrate this because, I want to set the opacity to zero from the offset probably going to end up doing this in CSS depending on the the smoothness of the transition and we’re probably going to transform the Y property.
We’ll just go up 10 pixels for now so when the page load will move that and the way to start viewing your animation is by selecting this “JS selector” at the top here so what I would expect this to actually disappear um and move up minus 10 pixels so you can see that that’s happened there and then the other aspect of it is setting a tween now you can select the position here which we want to put be at zero you can set the duration so, I’m probably going to leave well we’ll see how it goes and whatever um and the easing my personal favorite has to be um…probably quad so I’m going to do that one.
Now, these are the properties that we want to animate so the first thing we want to do is set the opacity and we also want to set the “Y Position” to zero so if we save that and just view it here looks like it fades in from the side which is not really what I want um we can do that or we can just scrub through here and actually see what it’s doing there which is great, um.. or we can play the animation here but you need JavaScript enabled at the top here to be able to play all these animations and see how they’re doing so that looks great.
So, what what I could do is add timelines and select the different elements and kind of go through them and add the same animation to all these things but again I like things clean, I like things simple, I think the better solution in this scenario is to actually stagger the animation so what I want to do is select the direct child, every single direct child of this div so that’s the h2, that’s the paragraph here, that’s the next paragraph there and then the link there.
So, what this is going to do is going to select all of these and if I go into my tween here and stagger these I actually do think “zero two five zero” is a great um….let’s double check that is a is a great stagger method here and so what you can see now is that these are all fading in just on the one um thing so GSAP actually has stagger if you’re familiar with GSAP this…this can actually help you make the most of Pinegrow.
And then, the second thing I probably want to do is animate this in so let’s set up another timeline let’s select um an editor and what you can do here is actually just select the on the page itself now, once again I want to set the opacity to “zero” and I also want to transform the “X” to let’s say “minus 10” again and once again we want to tween the opacity to one and transform it the “X” to “Zero” and we’ll set that to “Zero”
Now, in fact actually I kind of want to probably delay that just a little bit so that we’ve got a bit of fluidity going on here and if we you can see that animation playing there, if we prove that in the browser what’s going to happen now because we’ve set a scroll animation that’s actually just going to play along with the scroll which is looks pretty cool but it’s not exactly what I want to do so let’s head back into our GSAP options here.
Now, I can set this, if I go to advanced options down the bottom here I can actually play it independently of the scroll so if we preview this in the browser you can see that it’s actually playing but what’s happening is it’s going off the screen here. So, what I want to do now is actually time it so that when it gets to a certain position on the screen then play the animation so that’s where the start and end comes into play. Now um… I want to describe and when the scene element start reaches the let’s say center then play the animation you re-preview that, so it is playing the setting of the transparency in the “X” and “Y” positions of the elements is…is not playing because that’s part of the animation which again doesn’t start playing until we get to that central point.
So, how do we fix that? So, what I’ll do in this scenario is actually hide the whole thing and what this is going to do is going to hide it within JavaScript so we’re still able to see it in the editor, but it’s through JavaScript that’s just going to hide it on page load…and then what we want to do here is we’ve got our div selected here’s where we want to set that opacity to “One” So, let’s quickly add another kind of animation I’ve got here, that I’ve set up on the menu.
Clicking of this menu button, so within here I’ve just got a standard interaction. It’s not a scroll based interaction next you can select the trigger which you can obviously set as many many different things you could be on keyboard timings when…when the page loads of course I just want to click animation uh there and I’m targeting an element elsewhere on the page so, I’ve set my target as a UL that’s kind of elsewhere and then selecting my custom animations. So, if we take a look at that what you can see is and this is the thing that I really love about the interactions in Pinegrow over Webflow is that I can actually set um..html attributes uh in the animation itself or the interaction itself.
So, I’m setting a custom attribute here of open to true and I’m using that in my style to show and hide the menu or set some styles on the menu so then if we hit JavaScript here and play this animation you can see that the actual menu itself here.
Well the first of all the button goes off a hundred percent to the right so here you can see that kind of swoop off there and then we’ve kind of got a cross over here of the menu popping out and bouncing um on the open so I’m setting the “X” twining the “X” to “Zero” and I put a bounce ease out there so it’s a just a fun little animation that I’m able to do there and clicking on the “X” here what we’ve got is basically the same thing in reverse. So, I’ve got the menu going in and then the button popping out and bouncing and again setting that actually open to false this time finally.
Let’s just take a quick look at this hero animation that I’ve got here once again. I’ve got a normal interaction here and I’ve named it hero book load and I’ve got it to load immediately when it’s created on page load and looking at the animation. So, we’re setting everything to what have..we got here we’re setting everything to hide at start and then using auto opacity to bring them in. So, we’ve got some..we’ve got a staggered effect there as we’ve seen uh on our first animation that we created and then the actual books themselves are fading into a kind of similar feel as to the scroll based animations, but in this instance they’re on page load.
So there’s a quick look at GSAP animations using no code in Pinegrow if you enjoyed this episode give it a like or if you had any questions or wanted to know a little bit more about it then, I’ll be happy to answer them down in the comments. That’ll be all for this week and I’ll see you in the next one.