Skip to main content
Question

How can I create a wipe transition effect in Figma like in the link?

  • November 27, 2023
  • 3 replies
  • 684 views

Waqas_Shah

Please search for existing topics before posting! Press šŸ” at the upper right to search.Wipe transition effect animation

This topic has been closed for replies.

3 replies

y_toku
Figmate
  • Community Support
  • 2545 replies
  • November 28, 2023

Hi there,

Thanks for reaching out. This looks fun! I tried to create a sample for this translation. Please let me share the file.
slider-proto-example.fig (18.6 KB)

I used masks and smart animate for this, so I put the links.

I guess there’re other ways, so if you create a better version, please share!

Thanks,
Toku


Waqas_Shah
  • Author
  • 1 reply
  • November 28, 2023

Hey Toku,
Thank you for joining and helping.
Moving mask is the solution. I used the same.

I need it for Lottie animation. I also used opacity for the slider. I made that as an interactive component to finish the opacity effect in one second. But the the problem is that Lottie files do not support Figma components.
Now I don’t how to stop opacity in one second using frames!

I tried to use subframes but then there was no option of delay. I tried to use multiple frames but Lottie plugin takes one flow at a time.
My Figma file

Do you know any workaround?

Thanks šŸ˜€


y_toku
Figmate
  • Community Support
  • 2545 replies
  • November 29, 2023

Hey there, your file looks great! Thanks for sharing. I thought a lot about this but I can’t come up with a good idea when it comes to making it as one flow… Sorry about that but if I come up with a good solution, I will share. Please also share when you can make it. My apology that I can’t help much… Toku


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings