User interactions
It is easy to set up buttons, links & roll-overs in Quest. You can add a link or interaction to any layer or group in your page design. To get started, simply pick a layer and go to the right-side panel and add a feature.
Features are divided by interaction types at the top and layer attributes & effects at the bottom. When creating links and buttons, you’ll most likely want to start with a URL feature.
You can use the URL feature to launch a URL whenever a user clicks or taps on that layer. Because this is a native HTML URL, you have several options for what that can be. You can launch a new webpage on your site using a relative path, launch a webpage on some other website, launch the default email client like Outlook or Mail and pre-populate it with an email address and/or subject and message, or launch the native phone app on a phone to make a call to a number you provide. In Quest, we set up 5 of the most popular options as buttons to help you get started but you can literally use any standard HTML URL that exists.
External Site:
Page / Relative Link: (Link to another page you have in your site on Quest) /contact
Send Email: (This will launch the default email client and pre-populate a new email)[email protected]
Or with a CC, BCC, Subject & Body Message all pre-populated:
Phone call: (Launches the phone app, usually mobile only) tel:+1-201-555-5555
SMS: sms:+1-201-555-5555
Or with a message sms:+18664504185&body=Hi%2520there!
For a full list of examples you can check out this wikipedia page here: List of URI schemes
However, you can do more than simply launch URLs. You can also do things like triggering animations, hiding/showing elements on the page such as pop-ups or scroll down the page to other sections with anchor links.
You can choose the action you like by first choosing the interaction feature of “Click / Tap”. From here you can experiment with how you’d like the button or link to setup the interaction.
Last, you can also give the user feedback that they are on a button or link with some color or movement. Quest will also automatically convert the cursor to a hand icon when users roll-over interactive content.
For instance, you can setup a “While Hovering” feature with Animate Out and Scale Out to a button. This will scale the button up a little as the user rolls over it and back down to its original scale when they roll off. This just gives a nice subtle cue that the button can be clicked. You can always adjust the settings and amount of scale for the animation in the pop-up.
Another common button and link feature is changing the color of the button when you rollover it. To do this, again choose the “While Hovering” feature and this time choose Set Color. This will allow you to change the color of text or vector button layers when they are rolled over. “Set Color” is just a quick on and off option but you can always choose Animate Out > To Color to smoothly transition colors as well.
Lesson XX

Setting up scroll effects

To really make your page look and feel fresh, you’ll want to add scroll effects like parallax scrolling or animations that are based on scroll triggers. Even though both are based on scrolling, they work pretty differently so we’ll detail them below.
Scroll Trigger
Scroll Trigger works a lot like Click / Tap in that it is triggering things based on the interaction. Scroll works the same for all devices so there’s no need to set it up differently.
In this example, we want to have a section animate up into palace while fading in. This is a great way to have things build and gently reveal themselves as a user scrolls through the page.
When you add a Scroll Trigger there are some unique options you have to keep in mind.
The first being “Trigger when seen” which allows you to control roughly when you want the trigger to happen. For instance, when the slider is set to 0 (px) it will trigger the action the moment it is seen on the screen. If you have a quick animation, this might get lost and not easily seen by the user. A good idea is to set when it is seen to 100 - 200px after it first enters the view to be sure users don’t miss anything.
The second option is the “Play only once” or “Reset trigger on hide” toggle. This is purely up to you how you’d prefer to handle you interactions and animation on the page. Do you want them to play only the first time or again if the user scrolls past it but moves back up and down the page?
Parallax Scrolling
Parallax Scrolling is a fun way to give your layers in your design a different scroll speed than the rest of the page. You can choose to either slow the element down or speed it up based on user scroll speed.
By using the slider, you can adjust the speed of th layer relative to page. It’s a great way to slow down background elements or speed up foreground elements really make things pop. A great way to add an additional level of polish to your page design with very little setup.