Angular Universal: avoid restarting CSS animations at DOM replacement

Question

We have a web-page that starts with some animation: coara

For performance and SEO reasons we normally pre-render our pagees into a static HTML using Angular Universal.

Problem here: The animation re-starts when the DOM is replaced by the Angular code. Is there a way to avoid this, or to wait with DOM replacement until the animation has finished (and not start it again)?

Did you find a solution to this problem? I have the same issue. Nice website btw :) — Vingtoft
– Vingtoft, Commented Nov 14, 2019 at 14:49

Miquel Ferrer Llompart · Accepted Answer · 2019-03-25 07:21:13Z

1

You could add a fake provider on your app.module.ts to know where the component is rendered:

 providers: [
    {
      provide: "isBrowser",
      useValue: true,
    },
  ],

and this import on your app.server.module.ts

 providers: [
    {
      provide: "isBrowser",
      useValue: false,
    },
  ],

Then you can import this "provider" on your component like this:

constructor(@Inject("isBrowser") public enableAnimations: boolean) {}

Now you can disable animations when the component is load on server side and add the animation on client side.

answered Mar 25, 2019 at 7:21

Miquel Ferrer Llompart

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

chris08002 Over a year ago

This doesn't solve the following though: Run the animation on the pre-rendered HTML and then not run it again on the client side rendered HTML. Any suggestions for that?

Collectives™ on Stack Overflow

Angular Universal: avoid restarting CSS animations at DOM replacement

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related