jiayihu / ng-animate

🌙 A collection of cool, reusable and flexible animations for Angular 14+

Home Page:https://jiayihu.github.io/ng-animate/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

transformOrigin: 'center' for pulse

Artak-Mkrtchyan opened this issue · comments

Hi, thanks for lib

Can we do add? transformOrigin: 'center' for pulse

export const pulse = animation(
  animate(
    '{{ timing }}s {{ delay }}s',
    keyframes([
      style({ transform: 'scale3d(1, 1, 1)', transformOrigin: 'center' }),
      style({
        transform: 'scale3d({{ scale }}, {{ scale }}, {{ scale }})',
        transformOrigin: 'center',
      }),
      style({ transform: 'scale3d(1, 1, 1)', transformOrigin: 'center' }),
    ])
  ),
  { params: { scale: 1.25, timing: 1, delay: 0 } }
);

what is the motivation behind this change?
As far as I know, the default is center already?

what is the motivation behind this change? As far as I know, the default is center already?

Sorry, but no, I am using this for an animated square and it is not always in the center

Nov-14-2022.11-12-30.PM.mp4

Do you by any chance override the transform-origin via css yourself?
Otherwise, you can also simply set transform-origin: center on the element.

https://jiayihu.github.io/ng-animate/ -> pulse works perfectly fine.