Code-Free Scrolling Animations and Micro-Interactions with Webydo

This article was sponsored by Webydo. Thank you for supporting the sponsors who make SitePoint possible.

Webydo is a professional web-based application for designers who want to create web and mobile sites for their clients, without writing code. We’ve written about Webydo before on SitePoint, but a lot has changed in the product since then. Last week, Webydo announced their new platform which includes an all-new interface, improved stability and performance, and all the tools needed to create fast and responsive websites without the need for prototyping and wireframing.

I knew of Webydo long before I tried it out for myself because I follow their customer’s web experiments on Behance, but when I saw this Game Of Thrones -inspired website by Sarit Evrani - a well known Israeli digital artist - which tests the capabilities of Webydo’s parallax tools, I had to try it for myself.

Parallax scrolling is when a background (either the whole website body, or a specific section) is moving at a slower rate than the foreground elements, creating a 3D effect as you scroll down the page. Despite a degree of backlash from critics regarding its user experience, it looks wonderful when executed correctly.

Getting Started

Head over to the Webydo website and start a free trial. You’ll be asked to either start from scratch, start with an already-defined structure of your choosing, or else choose an entire template (with minimal faffing around!).

Choose Design, and then select the Maddog Sound “Parallax” theme . Parallax has already been activated in this template, and we’ll use it to quickly understand how it works before trying out our own example. Right away you’ll notice the rulers and floating Layers interface. If you’ve used any kind of design tool before, then Webydo will feel familiar to you.

When you select the knob image in the layout, two things will happen. A box will surround it, signalling that you’ve selected it, and the Properties Panel will open up. Under “Parallax Scrolling Animation”; the first setting is Target, which is where the image will end up at the end of the scroll.

You can change the top and left offset values to customise the animation’s direction, but I find it easier to simply drag the blue-bordered box (adjacent to our selection) instead. We won’t change anything here - simply click “Publish” in the top-right corner to see the animation in action. From A to B, easy right?

Here’s a gif showing off this method:

Continue reading %Code-Free Scrolling Animations and Micro-Interactions with Webydo%

by Daniel Schwarz via SitePoint