![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/fleava-1024x689.jpg\")
<\/a><\/figure>\n\n\n\nLiquid animations are movements on the screen that have a water-like feel. These animations often have a slow, flowy movement that may ripple or ebb and flow. (And that\u2019s what makes it work; liquid animations have to feel realistic.)<\/p>\n\n\n\n
Liquid animations might take effect as a hover state or as part of a video or rolling animation. You might even activate a liquid animation on the scroll.<\/p>\n\n\n\n
This technique has really started to explode in popularity, mostly because computers and smaller web devices and browsers have the capacity to render the technique efficiently.<\/p>\n\n\n\n
The roots of this trend might go back to using blob shapes in design with animation. Many of those designs (including Fleava, above), which were rather trendy last year, had somewhat of a liquid animation element to them.<\/p>\n\n\n\n
Liquid Layers<\/h2>\n\n\n\n![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/ilya-1024x586.jpg\")
<\/a><\/figure>\n\n\n\nLiquid animation is a popular technique with portfolio websites and for creative agencies, probably because this is a place where many designers feel comfortable testing and playing with new design concepts.<\/p>\n\n\n\n
Liquid animation works in concert with other trends, such as layered effects. (You\u2019ll also see glimpses of other trends in most of the examples here.)<\/p>\n\n\n\n
Ilya Kulbachny uses two layers of liquid animation in two different ways to add a lot of visual interest to a simple design. The top layer includes text that moves with a liquid animation and pace that isn\u2019t impacted by user interaction.<\/p>\n\n\n\n
The background layer seems to be an image but when you hover over the picture the edges move in a liquid flow. The image shifts with mouse movement on hover with water-like motion.<\/p>\n\n\n\n
Liquid Hover Actions<\/h2>\n\n\n\n![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/viol-1024x687.jpg\")
<\/a><\/figure>\n\n\n\nLiquid hover animation states might be one of the most popular uses of this trend. There\u2019s nothing to cue you into the liquid animation until the mouse moves over the item with the animated hover state.<\/p>\n\n\n\n
It\u2019s a simple and delightful tool that can engage users.<\/p>\n\n\n\n
The thing about liquid animations is that the movement is so realistic and fluid that it actually encourages people to keep playing with it to see how motion happens and works.<\/p>\n\n\n\n
Liquid \u201cScroll\u201d<\/h2>\n\n\n\n![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/whales-1024x690.jpg\")
<\/a><\/figure>\n\n\n\nLiquid animation makes a great \u201cscroll\u201d or navigation tool. (You\u2019ll want to click through the example above for sure on this one.)<\/p>\n\n\n\n
With tugs and pulls of the mouse on the screen, the movement of the image feels like you are spinning in an aquarium. You can see all the elements move around you without going anywhere.<\/p>\n\n\n\n
Then when you stop, there\u2019s this small moment of animation where the ripples and speed that came with your movements seem to settle on the screen.<\/p>\n\n\n\n
The motion feels incredibly real and transports users into the space of the design.<\/p>\n\n\n\n
Liquid Background\/Foreground<\/h2>\n\n\n\n![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/therev-1024x666.jpg\")
<\/a><\/figure>\n\n\n\nLiquid animation can be a design element in the background or foreground of the design and \u201crun\u201d without interaction from the user.<\/p>\n\n\n\n
Beyond Beauty\u2019s The Revolution of Desire has a background\/foreground element that does just this. The little blobs move across the screen and even connect with one another. They further animate and shapeshift when the mouse is involved with an additional hover state.<\/p>\n\n\n\n
The pointer also has a liquid feel with a blog as the cursor and a realistic feel to the motion on the screen. The blob pointer almost slows to match the motion of other elements.<\/p>\n\n\n\n
Liquid Cinemagraph<\/h2>\n\n\n\n![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/minus1-1024x659.jpg\")
<\/a><\/figure>\n\n\n\nCinemagraph images have come and gone as a trend, and are re-emerging with more liquid animations.<\/p>\n\n\n\n
These designs include a combination of a still and moving image \u2013 often in the background \u2013 that has some liquid movement to it.<\/p>\n\n\n\n
In the example above from 1 Minus 1, the woman in the image appears to be underwater thanks to the movement of her dress. It\u2019s simple but visually intriguing. The website design uses a variety of other animation techniques below the scroll as well.<\/p>\n\n\n\n
Underwater Motion<\/h2>\n\n\n\n![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/lesanimals-1024x674.jpg\")
<\/a><\/figure>\n\n\n\nIt was hinted at in the example above \u2013 underwater-style motion \u2013 and here it\u2019s the dominant animation effect.<\/p>\n\n\n\n
Underwater motion, a slow, flowing movement is a popular way to use this technique. Les Animals uses an animated illustration that looks like plants moving underwater. Shapes shift and flow in a soothing, slow pattern.<\/p>\n\n\n\n
If you interact with the design, there\u2019s an additional liquid animation state on mouse movement. It is subtle and perfectly fits the rest of the interface design.<\/p>\n\n\n\n
Liquid Typography<\/h2>\n\n\n\n![\"\"](\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/mylesn-1024x671.jpg\")
<\/a><\/figure>\n\n\n\nWe saw a little of this already, but liquid animation effects can also apply to typography.<\/p>\n\n\n\n
The trick to making this technique work on lettering is to maintain the readability of words. If at any point the text is stretched or pulled to a point that it is unreadable, the animation has gone too far.<\/p>\n\n\n\n
It can be a rather delicate balance to achieve, but when done well can be fun to look at and interact with. Liquid animation on text elements can run on its own, such as the example above from Myles Ng, or function as a hover state.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Liquid animation is a majorly trending design technique. Motion can help keep users interested in your website design longer and provide one more reason to interact with content.<\/p>\n\n\n\n
This website design technique should look simple and realistic. Movements that are too fast or appear forced won\u2019t have the same delightful appeal as the subtle motion you expect from a liquid animation.<\/p>\n","protected":false},"excerpt":{"rendered":"
Delightful design accents can be one of those things that creates an unexpected user experience that keeps visitors on your website. A trending technique that does exactly this is the use of liquid animation in web design. What\u2019s great about his trend is that you can use it in so many different ways to create […]<\/p>\n","protected":false},"author":2,"featured_media":3979,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[85,81,168],"tags":[93,86,82,106],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/liquid-animation.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-128","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=3976"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions"}],"predecessor-version":[{"id":3986,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions\/3986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/3979"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=3976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=3976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=3976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/a><\/figure>\n\n\n\nLiquid animation is a popular technique with portfolio websites and for creative agencies, probably because this is a place where many designers feel comfortable testing and playing with new design concepts.<\/p>\n\n\n\n
Liquid animation works in concert with other trends, such as layered effects. (You\u2019ll also see glimpses of other trends in most of the examples here.)<\/p>\n\n\n\n
Ilya Kulbachny uses two layers of liquid animation in two different ways to add a lot of visual interest to a simple design. The top layer includes text that moves with a liquid animation and pace that isn\u2019t impacted by user interaction.<\/p>\n\n\n\n
The background layer seems to be an image but when you hover over the picture the edges move in a liquid flow. The image shifts with mouse movement on hover with water-like motion.<\/p>\n\n\n\n
Liquid Hover Actions<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nLiquid hover animation states might be one of the most popular uses of this trend. There\u2019s nothing to cue you into the liquid animation until the mouse moves over the item with the animated hover state.<\/p>\n\n\n\n
It\u2019s a simple and delightful tool that can engage users.<\/p>\n\n\n\n
The thing about liquid animations is that the movement is so realistic and fluid that it actually encourages people to keep playing with it to see how motion happens and works.<\/p>\n\n\n\n
Liquid \u201cScroll\u201d<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nLiquid animation makes a great \u201cscroll\u201d or navigation tool. (You\u2019ll want to click through the example above for sure on this one.)<\/p>\n\n\n\n
With tugs and pulls of the mouse on the screen, the movement of the image feels like you are spinning in an aquarium. You can see all the elements move around you without going anywhere.<\/p>\n\n\n\n
Then when you stop, there\u2019s this small moment of animation where the ripples and speed that came with your movements seem to settle on the screen.<\/p>\n\n\n\n
The motion feels incredibly real and transports users into the space of the design.<\/p>\n\n\n\n
Liquid Background\/Foreground<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nLiquid animation can be a design element in the background or foreground of the design and \u201crun\u201d without interaction from the user.<\/p>\n\n\n\n
Beyond Beauty\u2019s The Revolution of Desire has a background\/foreground element that does just this. The little blobs move across the screen and even connect with one another. They further animate and shapeshift when the mouse is involved with an additional hover state.<\/p>\n\n\n\n
The pointer also has a liquid feel with a blog as the cursor and a realistic feel to the motion on the screen. The blob pointer almost slows to match the motion of other elements.<\/p>\n\n\n\n
Liquid Cinemagraph<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nCinemagraph images have come and gone as a trend, and are re-emerging with more liquid animations.<\/p>\n\n\n\n
These designs include a combination of a still and moving image \u2013 often in the background \u2013 that has some liquid movement to it.<\/p>\n\n\n\n
In the example above from 1 Minus 1, the woman in the image appears to be underwater thanks to the movement of her dress. It\u2019s simple but visually intriguing. The website design uses a variety of other animation techniques below the scroll as well.<\/p>\n\n\n\n
Underwater Motion<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nIt was hinted at in the example above \u2013 underwater-style motion \u2013 and here it\u2019s the dominant animation effect.<\/p>\n\n\n\n
Underwater motion, a slow, flowing movement is a popular way to use this technique. Les Animals uses an animated illustration that looks like plants moving underwater. Shapes shift and flow in a soothing, slow pattern.<\/p>\n\n\n\n
If you interact with the design, there\u2019s an additional liquid animation state on mouse movement. It is subtle and perfectly fits the rest of the interface design.<\/p>\n\n\n\n
Liquid Typography<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nWe saw a little of this already, but liquid animation effects can also apply to typography.<\/p>\n\n\n\n
The trick to making this technique work on lettering is to maintain the readability of words. If at any point the text is stretched or pulled to a point that it is unreadable, the animation has gone too far.<\/p>\n\n\n\n
It can be a rather delicate balance to achieve, but when done well can be fun to look at and interact with. Liquid animation on text elements can run on its own, such as the example above from Myles Ng, or function as a hover state.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Liquid animation is a majorly trending design technique. Motion can help keep users interested in your website design longer and provide one more reason to interact with content.<\/p>\n\n\n\n
This website design technique should look simple and realistic. Movements that are too fast or appear forced won\u2019t have the same delightful appeal as the subtle motion you expect from a liquid animation.<\/p>\n","protected":false},"excerpt":{"rendered":"
Delightful design accents can be one of those things that creates an unexpected user experience that keeps visitors on your website. A trending technique that does exactly this is the use of liquid animation in web design. What\u2019s great about his trend is that you can use it in so many different ways to create […]<\/p>\n","protected":false},"author":2,"featured_media":3979,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[85,81,168],"tags":[93,86,82,106],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/liquid-animation.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-128","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=3976"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions"}],"predecessor-version":[{"id":3986,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions\/3986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/3979"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=3976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=3976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=3976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/a><\/figure>\n\n\n\nLiquid hover animation states might be one of the most popular uses of this trend. There\u2019s nothing to cue you into the liquid animation until the mouse moves over the item with the animated hover state.<\/p>\n\n\n\n
It\u2019s a simple and delightful tool that can engage users.<\/p>\n\n\n\n
The thing about liquid animations is that the movement is so realistic and fluid that it actually encourages people to keep playing with it to see how motion happens and works.<\/p>\n\n\n\n
Liquid \u201cScroll\u201d<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nLiquid animation makes a great \u201cscroll\u201d or navigation tool. (You\u2019ll want to click through the example above for sure on this one.)<\/p>\n\n\n\n
With tugs and pulls of the mouse on the screen, the movement of the image feels like you are spinning in an aquarium. You can see all the elements move around you without going anywhere.<\/p>\n\n\n\n
Then when you stop, there\u2019s this small moment of animation where the ripples and speed that came with your movements seem to settle on the screen.<\/p>\n\n\n\n
The motion feels incredibly real and transports users into the space of the design.<\/p>\n\n\n\n
Liquid Background\/Foreground<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nLiquid animation can be a design element in the background or foreground of the design and \u201crun\u201d without interaction from the user.<\/p>\n\n\n\n
Beyond Beauty\u2019s The Revolution of Desire has a background\/foreground element that does just this. The little blobs move across the screen and even connect with one another. They further animate and shapeshift when the mouse is involved with an additional hover state.<\/p>\n\n\n\n
The pointer also has a liquid feel with a blog as the cursor and a realistic feel to the motion on the screen. The blob pointer almost slows to match the motion of other elements.<\/p>\n\n\n\n
Liquid Cinemagraph<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nCinemagraph images have come and gone as a trend, and are re-emerging with more liquid animations.<\/p>\n\n\n\n
These designs include a combination of a still and moving image \u2013 often in the background \u2013 that has some liquid movement to it.<\/p>\n\n\n\n
In the example above from 1 Minus 1, the woman in the image appears to be underwater thanks to the movement of her dress. It\u2019s simple but visually intriguing. The website design uses a variety of other animation techniques below the scroll as well.<\/p>\n\n\n\n
Underwater Motion<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nIt was hinted at in the example above \u2013 underwater-style motion \u2013 and here it\u2019s the dominant animation effect.<\/p>\n\n\n\n
Underwater motion, a slow, flowing movement is a popular way to use this technique. Les Animals uses an animated illustration that looks like plants moving underwater. Shapes shift and flow in a soothing, slow pattern.<\/p>\n\n\n\n
If you interact with the design, there\u2019s an additional liquid animation state on mouse movement. It is subtle and perfectly fits the rest of the interface design.<\/p>\n\n\n\n
Liquid Typography<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nWe saw a little of this already, but liquid animation effects can also apply to typography.<\/p>\n\n\n\n
The trick to making this technique work on lettering is to maintain the readability of words. If at any point the text is stretched or pulled to a point that it is unreadable, the animation has gone too far.<\/p>\n\n\n\n
It can be a rather delicate balance to achieve, but when done well can be fun to look at and interact with. Liquid animation on text elements can run on its own, such as the example above from Myles Ng, or function as a hover state.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Liquid animation is a majorly trending design technique. Motion can help keep users interested in your website design longer and provide one more reason to interact with content.<\/p>\n\n\n\n
This website design technique should look simple and realistic. Movements that are too fast or appear forced won\u2019t have the same delightful appeal as the subtle motion you expect from a liquid animation.<\/p>\n","protected":false},"excerpt":{"rendered":"
Delightful design accents can be one of those things that creates an unexpected user experience that keeps visitors on your website. A trending technique that does exactly this is the use of liquid animation in web design. What\u2019s great about his trend is that you can use it in so many different ways to create […]<\/p>\n","protected":false},"author":2,"featured_media":3979,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[85,81,168],"tags":[93,86,82,106],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/liquid-animation.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-128","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=3976"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions"}],"predecessor-version":[{"id":3986,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions\/3986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/3979"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=3976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=3976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=3976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/a><\/figure>\n\n\n\nLiquid animation makes a great \u201cscroll\u201d or navigation tool. (You\u2019ll want to click through the example above for sure on this one.)<\/p>\n\n\n\n
With tugs and pulls of the mouse on the screen, the movement of the image feels like you are spinning in an aquarium. You can see all the elements move around you without going anywhere.<\/p>\n\n\n\n
Then when you stop, there\u2019s this small moment of animation where the ripples and speed that came with your movements seem to settle on the screen.<\/p>\n\n\n\n
The motion feels incredibly real and transports users into the space of the design.<\/p>\n\n\n\n
Liquid Background\/Foreground<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nLiquid animation can be a design element in the background or foreground of the design and \u201crun\u201d without interaction from the user.<\/p>\n\n\n\n
Beyond Beauty\u2019s The Revolution of Desire has a background\/foreground element that does just this. The little blobs move across the screen and even connect with one another. They further animate and shapeshift when the mouse is involved with an additional hover state.<\/p>\n\n\n\n
The pointer also has a liquid feel with a blog as the cursor and a realistic feel to the motion on the screen. The blob pointer almost slows to match the motion of other elements.<\/p>\n\n\n\n
Liquid Cinemagraph<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nCinemagraph images have come and gone as a trend, and are re-emerging with more liquid animations.<\/p>\n\n\n\n
These designs include a combination of a still and moving image \u2013 often in the background \u2013 that has some liquid movement to it.<\/p>\n\n\n\n
In the example above from 1 Minus 1, the woman in the image appears to be underwater thanks to the movement of her dress. It\u2019s simple but visually intriguing. The website design uses a variety of other animation techniques below the scroll as well.<\/p>\n\n\n\n
Underwater Motion<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nIt was hinted at in the example above \u2013 underwater-style motion \u2013 and here it\u2019s the dominant animation effect.<\/p>\n\n\n\n
Underwater motion, a slow, flowing movement is a popular way to use this technique. Les Animals uses an animated illustration that looks like plants moving underwater. Shapes shift and flow in a soothing, slow pattern.<\/p>\n\n\n\n
If you interact with the design, there\u2019s an additional liquid animation state on mouse movement. It is subtle and perfectly fits the rest of the interface design.<\/p>\n\n\n\n
Liquid Typography<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nWe saw a little of this already, but liquid animation effects can also apply to typography.<\/p>\n\n\n\n
The trick to making this technique work on lettering is to maintain the readability of words. If at any point the text is stretched or pulled to a point that it is unreadable, the animation has gone too far.<\/p>\n\n\n\n
It can be a rather delicate balance to achieve, but when done well can be fun to look at and interact with. Liquid animation on text elements can run on its own, such as the example above from Myles Ng, or function as a hover state.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Liquid animation is a majorly trending design technique. Motion can help keep users interested in your website design longer and provide one more reason to interact with content.<\/p>\n\n\n\n
This website design technique should look simple and realistic. Movements that are too fast or appear forced won\u2019t have the same delightful appeal as the subtle motion you expect from a liquid animation.<\/p>\n","protected":false},"excerpt":{"rendered":"
Delightful design accents can be one of those things that creates an unexpected user experience that keeps visitors on your website. A trending technique that does exactly this is the use of liquid animation in web design. What\u2019s great about his trend is that you can use it in so many different ways to create […]<\/p>\n","protected":false},"author":2,"featured_media":3979,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[85,81,168],"tags":[93,86,82,106],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/liquid-animation.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-128","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=3976"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions"}],"predecessor-version":[{"id":3986,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions\/3986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/3979"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=3976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=3976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=3976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/a><\/figure>\n\n\n\nLiquid animation can be a design element in the background or foreground of the design and \u201crun\u201d without interaction from the user.<\/p>\n\n\n\n
Beyond Beauty\u2019s The Revolution of Desire has a background\/foreground element that does just this. The little blobs move across the screen and even connect with one another. They further animate and shapeshift when the mouse is involved with an additional hover state.<\/p>\n\n\n\n
The pointer also has a liquid feel with a blog as the cursor and a realistic feel to the motion on the screen. The blob pointer almost slows to match the motion of other elements.<\/p>\n\n\n\n
Liquid Cinemagraph<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nCinemagraph images have come and gone as a trend, and are re-emerging with more liquid animations.<\/p>\n\n\n\n
These designs include a combination of a still and moving image \u2013 often in the background \u2013 that has some liquid movement to it.<\/p>\n\n\n\n
In the example above from 1 Minus 1, the woman in the image appears to be underwater thanks to the movement of her dress. It\u2019s simple but visually intriguing. The website design uses a variety of other animation techniques below the scroll as well.<\/p>\n\n\n\n
Underwater Motion<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nIt was hinted at in the example above \u2013 underwater-style motion \u2013 and here it\u2019s the dominant animation effect.<\/p>\n\n\n\n
Underwater motion, a slow, flowing movement is a popular way to use this technique. Les Animals uses an animated illustration that looks like plants moving underwater. Shapes shift and flow in a soothing, slow pattern.<\/p>\n\n\n\n
If you interact with the design, there\u2019s an additional liquid animation state on mouse movement. It is subtle and perfectly fits the rest of the interface design.<\/p>\n\n\n\n
Liquid Typography<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nWe saw a little of this already, but liquid animation effects can also apply to typography.<\/p>\n\n\n\n
The trick to making this technique work on lettering is to maintain the readability of words. If at any point the text is stretched or pulled to a point that it is unreadable, the animation has gone too far.<\/p>\n\n\n\n
It can be a rather delicate balance to achieve, but when done well can be fun to look at and interact with. Liquid animation on text elements can run on its own, such as the example above from Myles Ng, or function as a hover state.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Liquid animation is a majorly trending design technique. Motion can help keep users interested in your website design longer and provide one more reason to interact with content.<\/p>\n\n\n\n
This website design technique should look simple and realistic. Movements that are too fast or appear forced won\u2019t have the same delightful appeal as the subtle motion you expect from a liquid animation.<\/p>\n","protected":false},"excerpt":{"rendered":"
Delightful design accents can be one of those things that creates an unexpected user experience that keeps visitors on your website. A trending technique that does exactly this is the use of liquid animation in web design. What\u2019s great about his trend is that you can use it in so many different ways to create […]<\/p>\n","protected":false},"author":2,"featured_media":3979,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[85,81,168],"tags":[93,86,82,106],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/liquid-animation.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-128","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=3976"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions"}],"predecessor-version":[{"id":3986,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions\/3986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/3979"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=3976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=3976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=3976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/a><\/figure>\n\n\n\nCinemagraph images have come and gone as a trend, and are re-emerging with more liquid animations.<\/p>\n\n\n\n
These designs include a combination of a still and moving image \u2013 often in the background \u2013 that has some liquid movement to it.<\/p>\n\n\n\n
In the example above from 1 Minus 1, the woman in the image appears to be underwater thanks to the movement of her dress. It\u2019s simple but visually intriguing. The website design uses a variety of other animation techniques below the scroll as well.<\/p>\n\n\n\n
Underwater Motion<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nIt was hinted at in the example above \u2013 underwater-style motion \u2013 and here it\u2019s the dominant animation effect.<\/p>\n\n\n\n
Underwater motion, a slow, flowing movement is a popular way to use this technique. Les Animals uses an animated illustration that looks like plants moving underwater. Shapes shift and flow in a soothing, slow pattern.<\/p>\n\n\n\n
If you interact with the design, there\u2019s an additional liquid animation state on mouse movement. It is subtle and perfectly fits the rest of the interface design.<\/p>\n\n\n\n
Liquid Typography<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nWe saw a little of this already, but liquid animation effects can also apply to typography.<\/p>\n\n\n\n
The trick to making this technique work on lettering is to maintain the readability of words. If at any point the text is stretched or pulled to a point that it is unreadable, the animation has gone too far.<\/p>\n\n\n\n
It can be a rather delicate balance to achieve, but when done well can be fun to look at and interact with. Liquid animation on text elements can run on its own, such as the example above from Myles Ng, or function as a hover state.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Liquid animation is a majorly trending design technique. Motion can help keep users interested in your website design longer and provide one more reason to interact with content.<\/p>\n\n\n\n
This website design technique should look simple and realistic. Movements that are too fast or appear forced won\u2019t have the same delightful appeal as the subtle motion you expect from a liquid animation.<\/p>\n","protected":false},"excerpt":{"rendered":"
Delightful design accents can be one of those things that creates an unexpected user experience that keeps visitors on your website. A trending technique that does exactly this is the use of liquid animation in web design. What\u2019s great about his trend is that you can use it in so many different ways to create […]<\/p>\n","protected":false},"author":2,"featured_media":3979,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[85,81,168],"tags":[93,86,82,106],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/liquid-animation.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-128","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=3976"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions"}],"predecessor-version":[{"id":3986,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions\/3986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/3979"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=3976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=3976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=3976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/a><\/figure>\n\n\n\nIt was hinted at in the example above \u2013 underwater-style motion \u2013 and here it\u2019s the dominant animation effect.<\/p>\n\n\n\n
Underwater motion, a slow, flowing movement is a popular way to use this technique. Les Animals uses an animated illustration that looks like plants moving underwater. Shapes shift and flow in a soothing, slow pattern.<\/p>\n\n\n\n
If you interact with the design, there\u2019s an additional liquid animation state on mouse movement. It is subtle and perfectly fits the rest of the interface design.<\/p>\n\n\n\n
Liquid Typography<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nWe saw a little of this already, but liquid animation effects can also apply to typography.<\/p>\n\n\n\n
The trick to making this technique work on lettering is to maintain the readability of words. If at any point the text is stretched or pulled to a point that it is unreadable, the animation has gone too far.<\/p>\n\n\n\n
It can be a rather delicate balance to achieve, but when done well can be fun to look at and interact with. Liquid animation on text elements can run on its own, such as the example above from Myles Ng, or function as a hover state.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Liquid animation is a majorly trending design technique. Motion can help keep users interested in your website design longer and provide one more reason to interact with content.<\/p>\n\n\n\n
This website design technique should look simple and realistic. Movements that are too fast or appear forced won\u2019t have the same delightful appeal as the subtle motion you expect from a liquid animation.<\/p>\n","protected":false},"excerpt":{"rendered":"
Delightful design accents can be one of those things that creates an unexpected user experience that keeps visitors on your website. A trending technique that does exactly this is the use of liquid animation in web design. What\u2019s great about his trend is that you can use it in so many different ways to create […]<\/p>\n","protected":false},"author":2,"featured_media":3979,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[85,81,168],"tags":[93,86,82,106],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/liquid-animation.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-128","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=3976"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions"}],"predecessor-version":[{"id":3986,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions\/3986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/3979"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=3976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=3976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=3976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/a><\/figure>\n\n\n\nWe saw a little of this already, but liquid animation effects can also apply to typography.<\/p>\n\n\n\n
The trick to making this technique work on lettering is to maintain the readability of words. If at any point the text is stretched or pulled to a point that it is unreadable, the animation has gone too far.<\/p>\n\n\n\n
It can be a rather delicate balance to achieve, but when done well can be fun to look at and interact with. Liquid animation on text elements can run on its own, such as the example above from Myles Ng, or function as a hover state.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Liquid animation is a majorly trending design technique. Motion can help keep users interested in your website design longer and provide one more reason to interact with content.<\/p>\n\n\n\n
This website design technique should look simple and realistic. Movements that are too fast or appear forced won\u2019t have the same delightful appeal as the subtle motion you expect from a liquid animation.<\/p>\n","protected":false},"excerpt":{"rendered":"
Delightful design accents can be one of those things that creates an unexpected user experience that keeps visitors on your website. A trending technique that does exactly this is the use of liquid animation in web design. What\u2019s great about his trend is that you can use it in so many different ways to create […]<\/p>\n","protected":false},"author":2,"featured_media":3979,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[85,81,168],"tags":[93,86,82,106],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/liquid-animation.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-128","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=3976"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions"}],"predecessor-version":[{"id":3986,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3976\/revisions\/3986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/3979"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=3976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=3976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=3976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}