---
title: "Liquid Swipe Animation In After Effects"
description: "Liquid Swipe Animation in After Effects | Cuberto BlogServicesProjectsCompanyBlogContactsMenuServicesProjectsCompanyBlogContactsGet in touchinfo@cuberto.comOur workflowcontact-contact-contact-contact-Design Course5/27/2021Liquid Swipe Animation in After EffectsWe're gonna show you how to create an impressive animation for a mobile…"
url: https://nexonsoftware.com/liquid-swipe-animation-in-after-effects/
date_published: 2026-06-07T17:24:57+00:00
date_modified: 2026-06-20T10:56:56+00:00
site: "Nexonsoftware"
agent_standard: ugentic/1.0
---

Liquid Swipe Animation in After Effects | Cuberto Blog
[https://nexonsoftware.com/?page_id=20&preview=true](https://nexonsoftware.com/?page_id=20&preview=true)[https://nexonsoftware.com/?page_id=20&preview=true](https://nexonsoftware.com/?page_id=20&preview=true)
[Services](https://nexonsoftware.com/?page_id=21&preview=true)
[Projects](https://nexonsoftware.com/?page_id=22&preview=true)
[Company](https://nexonsoftware.com/?page_id=23&preview=true)
[Blog](https://nexonsoftware.com/?page_id=24&preview=true)
[Contacts](https://nexonsoftware.com/?page_id=25&preview=true)
### Menu
[Services](https://nexonsoftware.com/?page_id=21&preview=true)
[Projects](https://nexonsoftware.com/?page_id=22&preview=true)
[Company](https://nexonsoftware.com/?page_id=23&preview=true)
[Blog](https://nexonsoftware.com/?page_id=24&preview=true)
[Contacts](https://nexonsoftware.com/?page_id=25&preview=true)
### Get in touch
[info@cuberto.com](mailto:info@cuberto.com)
[Our workflow](https://nexonsoftware.com/?page_id=20&preview=true)
[https://nexonsoftware.com/?page_id=25&preview=true](https://nexonsoftware.com/?page_id=25&preview=true)
Design Course
5/27/2021
# Liquid Swipe Animation in After Effects
We're gonna show you how to create an impressive animation for a mobile application. There was a lot of buzz around the animation at the time.
We're gonna show you how to create an impressive animation for a mobile application. There was a lot of buzz around the animation at the time. It was first shown on Dribbble a year ago and we even published the source code in Swift on our GitHub. Later on, various publications on Ã&#131;Â¢Ã&#130;Â&#128;Ã&#130;Â&#156;How to make a similar swipe on React Native and JavaÃ&#131;Â¢Ã&#130;Â&#128;Ã&#130;Â&#157; appeared online.
The case we will be using for demonstration is an onboarding flow. The onboarding always comes first for the user, so it can help you draw attention to the product immediately.
This animation can be divided into two stages. The first stage is changing the shape curve while being dragged by a finger. We exported the shape itself from Figma in SVG format and then selected the ratios that are responsible for changing the shape when swiping. The second stage of the animation is the fluctuations of the shape after you release the finger. This was done on the principle of a spring pendulum. We have been changing the parameters of the spring until the desired effect was achieved as shown in After Effects.
![Liquid Swipe Animation in After Effects YouTube Video](https://nexonsoftware.com/wp-content/uploads/ugentic-clones/ugentic-clone-6a25a82190a88/img.youtube.com/b21c2bca6013-maxresdefault.jpg)
Share
[https://www.facebook.com/sharer/sharer.php?u=https://cuberto.co/blog/liquid-swipe-animation-in-after-effects/](https://www.facebook.com/sharer/sharer.php?u=https://cuberto.co/blog/liquid-swipe-animation-in-after-effects/)
[https://www.linkedin.com/sharing/share-offsite/?url=https://cuberto.co/blog/liquid-swipe-animation-in-after-effects/](https://www.linkedin.com/sharing/share-offsite/?url=https://cuberto.co/blog/liquid-swipe-animation-in-after-effects/)
[https://twitter.com/intent/tweet?url=https://cuberto.co/blog/liquid-swipe-animation-in-after-effects/](https://twitter.com/intent/tweet?url=https://cuberto.co/blog/liquid-swipe-animation-in-after-effects/)
Related Posts
[Liquid Navigation in After Effects](https://nexonsoftware.com/?page_id=45&preview=true)
[Liquid Tabbar Animation in After Effects](https://nexonsoftware.com/?page_id=47&preview=true)
[How to Prepare Your Design Portfolio](https://nexonsoftware.com/?page_id=41&preview=true)
## Have an idea?
[Tell us](https://nexonsoftware.com/?page_id=25&preview=true)
[info@cuberto.com](mailto:info@cuberto.com)
Main office
901 N Pitt Street
Alexandria VA, 22314
[+1 301 549 9309](tel:+13015499309)
Second office
Na Perstyne
342/1, 11000 Prague
[Services](https://nexonsoftware.com/?page_id=21&preview=true)[Blog](https://nexonsoftware.com/?page_id=24&preview=true)[Projects](https://nexonsoftware.com/?page_id=22&preview=true)[Workflow](https://nexonsoftware.com/?page_id=20&preview=true)[Company](https://nexonsoftware.com/?page_id=23&preview=true)[Contacts](https://nexonsoftware.com/?page_id=25&preview=true)
[Privacy Policy](https://nexonsoftware.com/?page_id=26&preview=true)
2026, Cuberto
[https://www.instagram.com/cubertodesign/](https://www.instagram.com/cubertodesign/)
[https://www.youtube.com/channel/UCzestFrXpwSGCfcbO2pObwQ](https://www.youtube.com/channel/UCzestFrXpwSGCfcbO2pObwQ)
[https://github.com/Cuberto](https://github.com/Cuberto)
[https://www.facebook.com/Cuberto.design/](https://www.facebook.com/Cuberto.design/)
[https://dribbble.com/cuberto](https://dribbble.com/cuberto)
[https://www.behance.net/cuberto](https://www.behance.net/cuberto)