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

How to add css animations in thingworx mashups

SOLVED
Garnet

How to add css animations in thingworx mashups

How to add animations to widgets in mashup such as a slide in slide out 

1 ACCEPTED SOLUTION

Accepted Solutions

Re: How to add css animations in thingworx mashups

Hi,

 

Below added slide in and color change effect to my label widget.

I only needed to set "g" as a CustomClass name of my label widget to apply the animation to the widget.

CustomClass is bindable both in and out, so you can use it and apply the CustomClass at will.

@keyframes slidingIn {
    0% {
        	background-color: red;
            transform: translateX(50px);
    }
    100% {
        	background-color: orange;
    		transform: translateX(0px);
    }
}

.g{
        animation: slidingIn 5s;
}

View solution in original post

4 REPLIES 4

Re: How to add css animations in thingworx mashups

Could you please provide your use case? What part of the mashup would it be applied to?

You may look into using CSS transitions or marquee (see this thread https://community.ptc.com/t5/ThingWorx-Developers/CSS-FOR-MARQUEE-TEXT/m-p/584548 )

Re: How to add css animations in thingworx mashups

Hi @posipova  I need a color change and slide in animation for my text  widget when a property changes in my thing 

Re: How to add css animations in thingworx mashups

Have you tried marquee?

Re: How to add css animations in thingworx mashups

Hi,

 

Below added slide in and color change effect to my label widget.

I only needed to set "g" as a CustomClass name of my label widget to apply the animation to the widget.

CustomClass is bindable both in and out, so you can use it and apply the CustomClass at will.

@keyframes slidingIn {
    0% {
        	background-color: red;
            transform: translateX(50px);
    }
    100% {
        	background-color: orange;
    		transform: translateX(0px);
    }
}

.g{
        animation: slidingIn 5s;
}

View solution in original post

Announcements

Thingworx Navigate content has a new home! Click here to access the new Thingworx Navigate forum! ______________________________