About The Author

Practical Suggestions To Improve Usability Of Landing Pages With Animation From Slides

Good functional animation makes a landing page not just more appealing, but also more usable. When done correctly, animation can turn a landing page from a sequence of sections into a carefully choreographed, memorable experience. Meet Slides, a framework that will help you use animation to communicate clearly.

After the wildly successful reception of the first React digest we are expanding our coverage with the three most popular front-end JS libraries/frameworks: Angular, React and Vue. Kicking off the series with the VueJS Talks Digest Q3, a collection of 20 recorded talks from meetups and conferences during July, August and September (hence the Q3 title).

Subscribe to the newsletter and get notified once the Angular and React talks, or the October digest of VueJS are live.

What is MeetupFeed?

MeetupFeed is a monthly curation of recorded talks from the latest tech meetups and conferences. We want to make it easy for developers to follow and discover what’s happening in their global communities.

A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP.

Today we’d like to share an interesting distortion effect with you. The main concept of this demo is to use a displacement map in order to distort an underlying image, giving it different types of effects. To demonstrate the liquid-like transitions between images, we’ve created a slideshow.

What a displacement map generally does, is using an image as a texture, that is later applied to an object, giving the illusion that the underlying object is wrapped around that texture. This is a technique commonly used in many different areas, but today we’ll explore how this can be applied to a simple image slideshow.