cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Showing animation in select widget

SOLVED
Amethyst

Showing animation in select widget

When I click on select widget, the drop-down just pops up. Instead I want it to slide and then show the options. Any idea how it can be achieved?

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Showing animation in select widget

I wrote you this project, just to make you understand how you have to do to have that kind of effect.

I hope to be proved helpful.

 

Giuseppe

 

View solution in original post

11 REPLIES 11

Re: Showing animation in select widget

Hi @vivekse ,

I am not sure if we could achieve this by using some style. Actually if you could get similar functionality for the html select -element by using any styles sheets /css - this should also work here – so the same class definition could be also used in Studio.

Alternatively, I think a popup with list element could achieve similar functionality as shown on the picture below:

 

2020-01-09_9-55-05.gif

Re: Showing animation in select widget

Please have a look at this video through the link provided below.

 

https://www.linkedin.com/posts/ptcinc_industrialengineering-ar-activity-6613072450072772608-fjg3

 

I want to understand how such interface is possible?

Highlighted

Re: Showing animation in select widget

thanks, yes this seem to be Vuforia view on IOS , I belive.

I think this is a horizontal tab widget with a list widget on it or also possible repeater could be used.

 

Re: Showing animation in select widget

Actually I tried to do as per your suggestion but still I am unable to achieve that. Any other suggestion would be highly appreciated.

Re: Showing animation in select widget

I created the Howden diaphragm compressor experience in the video that you linked to.  The menu that comes out from the right side of the screen is made using a panel with a grid inside the panel.  The flyout effect was created with CSS.

Re: Showing animation in select widget

I first of all I would like to thank you for replying to my query but again I tried to do it and was not able to achieve that.

Its my humble request if you could link any project related to this so that I can refer to that project directly.

Re: Showing animation in select widget

 

Use this CSS applicate to class of panel .

and turn on or off visibility of widget to animate Panel width a click Event or js call on Button or other Widget.

 

/////// Js to show/hide a pannel 

$scope.show=function() {

$scope.view.wdg['name of widget']['visible']=!$scope.view.wdg['name of widget']['visible'];

}

 

//// CSS for effect 

 

.swing-left-bck {
-webkit-animation: swing-left-bck 2s;
animation: swing-left-bck 2s; }

.swing-left-bck.ng-hide {
-webkit-animation: swing-right-bck 2s;
animation: swing-right-bck 2s; }

@-webkit-keyframes swing-left-bck {
0% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-origin: left;
transform-origin: left; }
100% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-origin: left;
transform-origin: left; } }

@-webkit-keyframes swing-right-bck {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-origin: left;
transform-origin: left; }
100% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-origin: left;
transform-origin: left; } }

 

i hope to help you.

Giuseppe

 

 

 

 

Re: Showing animation in select widget

I wrote you this project, just to make you understand how you have to do to have that kind of effect.

I hope to be proved helpful.

 

Giuseppe

 

View solution in original post

Re: Showing animation in select widget

I can't give you that project because it has customer data in it.  What is it that you are having trouble with specifically?

Announcements
Topics available:
AR/VR for Data Optimization AR/VR for Security and Control AR/VR for Inspection