How to prevent css animation to reoccur when angular SSR bootstraps the app

Question

I built a landing site using Angular. To make it SEO friendly, I had to do prerender it.

The landing page starts with an intro animation (using CSS' animation).

When I first load the page/full reload, the animation starts, and in the middle the app is being bootstrapped so ot restarts the animation again.

I was wondering if there's a way to prevent the animations to reoccur. I know that there are few questions that might be similar to mine, but none of them helped me.

I have tried to solve this issue by:

Adding initialNavigation in AppRoutingModule:

@NgModule({
  imports: [RouterModule.forRoot(routes, { initialNavigation: 'enabled'})],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

AddingTransferHttpCacheModule and BrowserTransferStateModule to AppModule, and ServerTransferStateModule to AppServerModule.

score 8 · Answer 1 · answered Oct 11 '19 at 15:40

You could do it, however it might not be the answer you're looking for.

First let's see what happens when a SSR Angular app starts in the browser:

The browser receives the server-side rendered page. The HTML is rendered, including your animation, and it starts playing. Then at the bottom of the page, the angular script tags are parsed, and the JS for the app starts downloading.
While the app is downloading, the animation is playing.
When the app is downloaded, it bootstraps, and when it's bootstrapped, it renders the whole DOM again, including your animation. During this process, the old animated elements are removed from the DOM, and then new animated elements are added. The animation starts playing the second time.

You can go around this in 2 ways:

either don't start the animation until the app is loaded on the client (add the animation with a custom class when the app runs in a browser)
or move the animation outside of your app, embed it manually to the index.html - this way when the SSR re-render happens it will not be affected. (this way you can't have the element inside your <app-root></app-root> elements)

Hope this helps!

Alternative 1 won't work for me because it might take a while, and alternative 2 doesn't sound like a viable solution. I ended up making a loading screen that appears only if only prerendered. Although, I was hoping for a solution to bootstrap the app without the need to rerendering the whole dom again. I'm upvoting because it might help some other people, but I can't accept it yet. — Eliya Cohen, Oct 12 '19 at 19:11

score 0 · Answer 2 · answered Oct 16 '19 at 06:55

0

Have you tried to save any indication of initial loading, for example with cookies as suggested.
And then wrap the animated element with [@.disabled]="indication", it should look like this:

<div [@.disabled]="isInitialized">
    <div @someAnimation>
        ...
    </div>
</div>

answered Oct 16 '19 at 06:55

Tal Ohana

1,128
8
15

It still doesn't solve my problem... I want the app not to change the dom if there's no difference between the prerendered and the components. – Eliya Cohen Oct 16 '19 at 11:14

ladi · Answer 3 · 2020-06-03T18:01:33.013

It's actually fairly simple - all you need to do is:

get your initial (server side generated) page url
store it in the TransferState
when client page is reloaded, check if the url is the same
if so, fast forward animation immediately right to the end
ensure it's only done for the initial navigation (as the server- to client-rendered transition only occurs once)

I've created a simple directive for this purpose. Just put it on any element that has a css animation e.g.

<div class="slideInAnimation" ssrPreventAnimationReplay></div>

Here it is:

@Directive({
    selector: '[ssrPreventAnimationReplay]'
})
export class ServerSidePreventAnimationReplayDirective { 

    static key = makeStateKey('ssrPreventAnimationReplay');
    static subscription: Subscription;

    constructor(
        private el: ElementRef,
        private transferState: TransferState,
        private router: Router,
        private renderer: Renderer2,
        @Inject(PLATFORM_ID) private platformId) {
    }

    ngOnInit() {
        if (isPlatformServer(this.platformId))
            this.transferState.set(ServerSidePreventAnimationReplayDirective.key, { url: this.router.url });

        else {
            let value = this.transferState.get(ServerSidePreventAnimationReplayDirective.key, null);
            if (value && value.url == this.router.url) {
                this.preventAnimation();
                this.cancelOnNavigation();
            }
        }
    }

    ngOnDestroy() {
        if (ServerSidePreventAnimationReplayDirective.subscription)
            ServerSidePreventAnimationReplayDirective.subscription.unsubscribe();
    }

    private preventAnimation() {
        this.renderer.setStyle(this.el.nativeElement, 'animation-duration', '0ms');
        this.renderer.setStyle(this.el.nativeElement, 'animation-delay', '0ms');
    } 

    private cancelOnNavigation() {
        ServerSidePreventAnimationReplayDirective.subscription = this.router.events.subscribe(async event => {
            if (event instanceof NavigationStart)
                this.transferState.remove(ServerSidePreventAnimationReplayDirective.key);
        });
    }
}

You can disable angular animations in a similar fashion.

Hope it's of help to someone.

What if the page is being loaded in the middle of the animations? It will stop the animations immediately — Eliya Cohen, Jun 04 '20 at 04:54

score 0 · Answer 4 · answered Nov 11 '21 at 18:43

0

Import NoopAnimationsModule to the app.server.module.ts

@NgModule({
  imports: [
    NoopAnimationsModule,

answered Nov 11 '21 at 18:43

Daniel Ehrhardt

908
7
16

How to prevent css animation to reoccur when angular SSR bootstraps the app

4 Answers4