How to add css animations in thingworx mashups

[mahitejg]

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

[posipova]

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 )

[mahitejg]

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

[posipova]

Have you tried marquee?

[tkawasaki · Accepted solution]

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;
}