Skip to main content
1-Visitor
February 12, 2019
Solved

How to add css animations in thingworx mashups

  • February 12, 2019
  • 4 replies
  • 2904 views

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

Best answer by tkawasaki

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

4 replies

20-Turquoise
February 13, 2019

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 )

mahitejg1-VisitorAuthor
1-Visitor
February 14, 2019

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

20-Turquoise
March 18, 2019

Have you tried marquee?