It’s pretty simple, but it may take some time to experiment with different values’ combinations before you get a smooth result. Here, to create parallax scrolling effects in Adobe Muse, as well as “fade in” and “fade in up” effects for appearing elements, we needed only to play with motion and opacity settings: the former allows to set the initial and the final values of the scrolling and fade effects’ speed, and the latter does the same for the animated elements’ opacity. Setting motion speed in the Scroll Effects toolbar in Muse In Muse, working with scroll transitions is operated via the “Scroll Effects” toolbar that contains motion, opacity, slideshow and animation settings. Next, we had to add scroll transition effects to the page. png files which are fully compatible with Muse. The landing page mockup was created in Sketch. Adding content and working with parallax effects Actually, you can build a whole website from scratch using Adobe Muse, but it can deal with a landing page prototype no worse. Muse allows creating text headlines, paragraphs, buttons, input forms, blocks of media content and more right on the fly. It seemed to be exactly what we were seeking for. “ Create gorgeous HTML5 websites without writing code,” the headline on the Adobe Muse’s homepage was saying. So, we needed a tool designed specially for creating responsive websites and able to preview prototypes right in the browser. InVision, in its turn, doesn’t support parallax scrolling effects, and our prototype had to rely on these effects heavily. Although animating such a page with After Effects would take comparatively little time, we still wouldn’t have got a fully functional website prototype with working transitions and scroll effects.

Why Muse?Īdobe After Effects was simply not the right tool for the task. The page is a long read featuring several scroll transitions (including parallax scrolling effects), a product catalog, and headlines and photos appearing with “fade in” and “fade in up” effects. The team needed to present a fully functional landing page for an elite eyewear company’s website. This time, we decided to explore Muse, a website building tool from Adobe. Nevertheless, we’re always open to experimenting and often try alternative UI prototyping tools, especially when we have to deal with unusual tasks. When it comes to creating animated prototypes for websites and mobile apps, our design team normally prefers using tools like InVision and Adobe After Effects.

Muse parallax effects