Transcript
Hello and welcome to my channel my name is Samuel Gregory and on this channel we talk about all things frontend and accessibility.
If you’re a fan of the channel, then you’ll obviously notice this isn’t my normal location I’m actually traveling right now and I’m sort of in a mobile setup around my parents’ house.
This week I’ve been streaming my progress on putting together my agency’s website over on twitch.tv/fakesamgregory and in the stream I actually encountered interactions within Pinegrow which I hadn’t encountered before and I sort of fumbled my way through it and sort of learnt what it takes to actually create interactions in Pinegrow and I actually think a very very powerful and I think the Webflow have really got something to learn from Pinegrow, when it comes to actually creating interactions.
Unfortunately that episode didn’t come out at the quality that I want so I thought I’d do a quick episode kind of running you through the interactions in Pinegrow and we’re going to make my menu just kind of appear on the page as you might expect it to but we’re going to do it in an accessible way [Music]
You’ll see on my website that this isn’t the final website by any stretch of the imagination it’s just I’ve been streaming my progress and we’re just on us creating the style guide at the moment so what I want to do is essentially when we hit this button here that we have the menu kind of pop up and fade in as I would kind of expect it.
I’m not sure if this is going to be the final implementation but it’s a good case study for us to look at Pinegrow interaction, so first of all you want to click on this button up here and you should be able to enable interactions there if you don’t then you’re probably not subscribed to the Pinegrow interactions so if you have it enabled then you should be able to click enable.
What this does, is essentially adds the JavaScript which is very very light and adds the JavaScript to your page so you can actually progress on with animations, so I’ve actually created the HTML already for this page, you can see I’ve got the header there and actually if we look here we have my mobile navigation which is simply position fixed and it’s kind of um, just kind of taking up the whole screen, and I’ve used transform to position it 100 to the left so if I make this zero you’ll see the the menu kind of comes in here.
The other thing I want to do is set the opacity which okay, capacity we set that to zero essentially what I want to do is have the menu kind of fade in and then fade out and there’s a few little tricks that we need to encounter here but most importantly we actually need to um set the area HTML attribute to true and false depending on whether we can see the menu or not.
So, the first thing I want to do now is click on our menu and we’ve got our interactions enabled and we want to um add an interaction now we first of all we just want to name the interaction so this is just going to be open menu and then we need to set what the trigger is which is currently a click on this element here which is a button of course you can have a few different elements here but we’re only interested in clicking on it.
Now, the target one is nice and interesting and I think a lot better than Webflow is that you click on the target and then we just want to select it on the page then we just go to our mobile menu here and click done, now here’s where we add the animation so we want to add a custom animation there’s some pre-sets here, which we can play around with and I’d like to explore those in more detail but I want to go with something a bit more manual for now just like I have control over it and you’ll see down the bottom of the page that this kind of timeline here has popped up.
Now, this is the element here and on this menu we can sort of add multiple um multiple transitions uh on this simple animation here so you see I’ve accidentally just clicked into the timeline there and what that, if I just actually remove this um, and do it properly so if when I click add here it adds something to the timeline and I can either set tween or set uh tween is something again is something, not we’re not going to touch on in this episode, because we want to keep it quite simple but uh.
What we’re interested in set was so we’re going to set a property and the position is where in this timeline does this property get set and we want it to set right from the beginning and we want to add a property there now the first thing we want to do is kind of move this um this menu uh to to the center of the screen we’ve already demonstrated how we how we’ve done that and that’s using the transform properties so if we type that transform and we want to set that to zero.
Another thing we want to do is actually add another timeline and set the opacity to one we actually want to transition uh between these properties well yeah more specifically transition the opacity so if we knock back into here and scroll down to the transitions you can obviously do all of these through the uh the the timeline um using the tween but I find you get a lot more performance if you just rely on CSS to do the transform uh the transitions rather than JavaScript so that’s why we have the transition here the opacity and what we should find is that when we play the um animation then we’ll get a nice fade in here, here.
We can set some durations and delays and we can enable it on mobile or desktop depending on what your preferences are kind of similar to what you have on Webflow um and the other thing to note here is that, we want the animation to restart on play meaning we want to kind of be infinite as it were we want to keep enabling the we want to be in we want to enable us to keep clicking on this uh open uh open menu so the other thing now is that we have this close button and we need to bind a interaction to that.
So, once again we click on interactions and we can say close menu trigger obviously being click on that and then the target being the select on page the mobile menu and we want another custom animation here so we get a brand new timeline and here’s where we can add our um animations so we need to think about what we want to do here because if we immediately like we immediately set the transform property to zero, if we immediately select that then we won’t see the beautiful fade out.
So, if I create my timeline here and we set the opacity um opacity to um zero to fade it out we know that it takes 0.3 seconds for that to fade out so now we move our timeline to roughly when that’s going to end maybe for good measure set it a little bit afterwards we then want to set a property of um we want to add sorry, we’re going to add a timeline there and set a property of our transform to 100 which moves it and you can see that that hopefully, I mean, I 0.3 is probably around there anyway that’s probably 0.5 here so we can we can just play around with these but hopefully if we um save this and then preview it in the browser you can see that we have that beautiful fading in the biggest thing. the biggest kind of um selling factor.
I think for me on these track of these transitions is we don’t just want to be um affecting a CSS because for an accessible website an interactive JavaScript website to be accessible we need to let those accessibility users know what is happening on the screen so if we knock back into if we take a look at our the way that our menu is set up you’ll see that we’ve added an area hidden attribute here and it’s currently set to true in its default state so when we open the menu we want to say array hidden false so when we knock back into our timeline here we add a new timeline property and what we can do is set and property custom property.
And in here, if we type attr arrear hidden um and click ok then we can set that property to false similarly if we go into our close menu then we can once again add a property here set the attribute area hidden and we want to set this property to true so once again we save that and preview it in our browser but this time I want to inspect the code and we take a look at our mobile menu which is here you can see a rear hidden is true but when we open it.
It sets it to false and vice versa true, false so you can see why now this suddenly is leaps and bounds ahead of something like Webflow because we’re actually, and we’re actually able to manipulate HTML properties and which makes our JavaScript websites more accessible and, so I’m going to be only investigating this more as I build out my, about my timeline if you want to see that journey then, I…I stream fairly regularly on twitch.tv fake Sam Gregory.
If you want to support me over there so that’ll do it for this episode so do let me know in the comments what you think of Pinegrow interactions or whether you think they’re better or worse than Webflow.
If you want to see more of this content then do let me know by liking this episode and if you want to support my teachings on this channel then do head on over to patreon.com fake Sam Gregory where you can support the channel for as little as three pounds a month until next time happy no coding [Music]