cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Post Patron
Post Patron

Animation in Powerapps

Hi All,


i am looking for ideas to implement animation in my powerapps.
i have few set of ideas and if anyone can point out some blog or maybe give solution for it , that would be fantastic. 

  1. Button click animation :  Once the button is clicked it show show a pulse effect or something like that.
  2. I would have 1 button and when it is clicked it shows 6 other buttons basically using the visible property. But when the first button is clicked to show other buttons i want to create an animation effect , like sliding down animation or something like that!

 

Hope i am making sense, if not do tell me i can elaborate the requirement in more detailed manner!

 

 

Thanks in advance.

6 REPLIES 6
Highlighted
Super User III
Super User III

Re: Animation in Powerapps

Hi @jayant1 ,

If you want some ideas, a Timer linked to the Transparency of the Fill could have a "pulsing" effect. You can also do the same thing with the X and Y value of objects as a formula of a timer value to "slide" them.

Have a think about this - happy to assist after yo have put some ideas together.

 

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

 

 

Highlighted
Super User III
Super User III

Re: Animation in Powerapps

Hi @jayant1 ,

Just checking if you got the result you were looking for on this thread. Happy to help further if not.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Highlighted
Post Patron
Post Patron

Re: Animation in Powerapps

Hey @WarrenBelz , 

 

i haven't tried anything as of now. But if you have any blog posts or anything that could steer me in that direction. 

Would really appreciate it.

 

Thanks !!

Highlighted
Skilled Sharer
Skilled Sharer

Re: Animation in Powerapps

In addition to @WarrenBelz's suggestion, consider SVG animation. I have done along the lines of your first idea within one of my apps; using SVG.  

Highlighted
Post Patron
Post Patron

Re: Animation in Powerapps

@KickingApps would it be possible for  you to provide a demo of some sort of the animation?

Highlighted
Skilled Sharer
Skilled Sharer

Re: Animation in Powerapps

Put this in an image control:

"data:image/svg+xml;utf8, " & EncodeUrl(
    "
<svg class='checkmark' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'>
<style>
body {
  width: 70vw;
  height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.checkmark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: white;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #1a606a;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
 
.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #1a606a;
  fill: #7ba3a9;
  animation: stroke .6s cubic-bezier(0.650, 0.000, 0.450, 1.000) forwards;
}
 
.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke .3s cubic-bezier(0.650, 0.000, 0.450, 1.000) .8s forwards;
}
 
@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
 
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
 
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #1a606a;
  }
}
</style>
     <circle class='checkmark__circle' cx='26' cy='26' r='25' fill='none'/>
     <path class='checkmark__check' fill='none' d='M14.1 27.2l7.1 7.2 16.7-16.8'/>
</svg>
"
)

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Find your favorite faces from the community presenting at the Power Platform Community Conference!

Watch Now

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Top Kudoed Authors
Users online (5,005)