Intro to Interactions and Triggers

to take your design to the next level you'll not only need to utilize animations but also interactions and triggers now interactions are basically anything a user can do through a series of actions either clicking hovering or scrolling all of which can be set by using our animation tool to cover the basics we're going to go over how to add interactions like click hover and scroll using the animation tool and lastly how to set triggers using those same interactions to start let's go over interactions when a user clicks on an element here we have an image and we want an animation to occur once the user clicks on it so to do this we first select the element in this case the image now we're going to add an animation through our add menu and then open up the customization menu now before we were just doing on load animations but now we can send an interaction like on click we will click here and again you will see presets just like in our animation lesson we have slide in pulsate change background color scale up and custom for this i'm actually going to select custom and come down to here to our effects drop down this will give you even more options to set up your interactions and animations i'm going to select border radius and we can already see the animation occur great now i'm going to go preview our work and when i click on the image we can see that interaction you'll notice by clicking it again it resets and that's how we set up a click interaction now that we've covered interactions on click you'll be able to grasp interactions on hover more quickly for this i want to make a custom menu button with this icon here when the user hovers i want it to rotate in place to do this we're going to go add an animation once again then open up the customization menu and this time select hover now depending on the animation you'd like to set up you'll need to do your own settings but for this particular one i'm going to choose custom and go down to the effects drop down again and choose rotate for rotation i'm going to set it at 180 degrees and for duration i'm going to set it to be 10 seconds so it'll rotate in place for a while let's check it out nice that works perfect the last option we have for interactions is on scroll for this we've created this text box here and set the width to be 5000 pixels and we've repeated the text welcome now what we want to happen is to have it move horizontal as the user scrolls down the page to do this like always we're going to add an animation open the customization menu and choose scroll now here we have some new options we have position offset start and offset end and of course presets first let's cover presets we have some default ones but for this interaction i'm going to select custom go to the effects drop down and select move horizontal you can already see a preview of the animation i'm going to set it to be negative 1000 pixels so that it moves in the opposite direction you will need to preview the work to actually see it on scroll now for position you can set it to be either center bottom or top and this will indicate when the scroll interaction should start either when the section is at the center bottom or top of the browser window now offset start and offset end both help to customize the position if you want it to start a bit later you can add values like 100 pixels or 200 pixels in offset start if you wanted to end a bit earlier you can enter those same values into the offset end and now we can go back to the top of the page and preview our work and as we scroll we can see that it moves horizontal now this is where things get interesting with triggers you can set up more complex interactions between elements in simple terms this just means when a user clicks or hovers element a you can trigger an animation or interaction to occur with element b a perfect example of this is completing our already rotating custom menu button you'll remember that we already set up the icon here to rotate if the user hovers but sometimes you need a little bit more to let the user know that this is a menu button in order to do this we've already created a text element that says menu and now we want to set up the trigger so that if someone hovers over the icon the text then appears so going back to our earlier example we are actually adding an animation to element b while element a is the trigger so now we will first select the element we want triggered in this case the menu text then we're going to add an animation like always and then choose hover and since we want it to appear we'll choose custom and in the effects select opacity we can then change the opacity to start from 0 to 1 which it is now now for the magic we can add a new trigger by clicking here and when we select trigger on widget a drop down will appear and let us select from any custom name element in our page content panel because we want this to be triggered when someone hovers over the logo or icon we're going to select the logo element that we gave a custom name to here now let's check it out perfect so now we've gone through how to add interactions and how to set up triggers but the options don't just stop there you can browse through the add menu to find elements and add-ons that come with pre-built interactivity things like sticky positioning scroll speed or show and hide put this all together and the options are truly limitless

Channel: Vev

Views: 170

Keywords: web design, web design tutorial, no code, web builder, website design, vev, vev design, no code tool

Id: eHDHNdE3_Xc

Length: 6min 29sec (389 seconds)

Published: Thu Oct 14 2021