CSS Animations

Adobe XD UXP Plugin API
1

Are CSS animations / keyframes supported in panel plugins? It seems to just render a static circle when I implement something simple like this:

2 Likes
2

No CSS animations are supported. If you need to animate something, consider using requestAnimationFrame for now.

1 Like
3

Thanks for answer
Any updates for today, or any plans to support in near future?

4

Nevermind, found this https://trello.com/c/hmwcaptO

5

I’ve used GSAP on panel plugins, it worked fine for me, give it a try, it’s pretty good.
You might not be able to use GSAP directly to manipulate DOM elements in some instances (due to some API limitations on panels), but you can still use it to generate better steps for your animation. requestAnimationFrame is fine but GSAP gives you nice options to do easing and such. So you can use it only to generate steps, then use the steps value and apply it to your element however you want.

2 Likes
6

So does it work at all for DOM manipulation, or do you only use it for stepping?

7

GSAP doesn’t work form me because I’m using React =\

8

Have you tried https://www.npmjs.com/package/react-gsap?

I have no idea if that would work in UXP, but there’s no reason to avoid GSAP just because you’re using React…

9

@cpryland Thanks, I’ll try :+1:

10

I’m trying to create a kind of spinner while a long process is running, so that the user knows that something is happening. I found that css keyframe animations didn’t work, so following this thread I tried looking into GSAP. I tried implementing something like this: https://codepen.io/GreenSock/pen/LwzMKL
Only to find in the debug console that the SVG API is not supported, I’m getting this error:

uxp://uxp-internal/domjs_scripts.js:2 Uncaught TypeError: t.getCTM is not a function
    at _getCTM (VM26 MotionPathPlugin.min.js:10)
    at aa (VM26 MotionPathPlugin.min.js:10)
    at getGlobalMatrix (VM26 MotionPathPlugin.min.js:10)
    at ua (VM26 MotionPathPlugin.min.js:10)
    at _align (VM26 MotionPathPlugin.min.js:10)
    at init (VM26 MotionPathPlugin.min.js:10)
    at ac (VM21 gsap.min.js:10)
    at init (VM21 gsap.min.js:10)
    at _initTween (VM21 gsap.min.js:10)
    at Ma (VM21 gsap.min.js:10)

Is there any way of maybe using a polyfill to get the SVG API to work?