This package is similar to the popular Flutter Hero animations.

Table of contents

• About
• Getting started
• Documentation
• Example
• Contributing
• License

About

A package to implement hero animations, allowing users to click on images and smoothly zoom them into a larger, immersive view, enhancing the user experience and interaction with images.

Getting started

Installation

npm install ngx-image-hero

Import the directive

import { Component } from "@angular/core";
import { NgxImageHeroDirective } from "ngx-image-hero";

@Component({
  selector: "app-root",
  standalone: true,
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.scss",
  imports: [NgxImageHeroDirective],
})
export class AppComponent {}

Inputs

Outputs

Simple example

<img ngxHero src="https://picsum.photos/id/200/400" alt="demo-image" />

Complete example demonstrating all properties

<picture>
  @for (format of imgFormats; track format) {
  <source srcset="assets/img/demo.{{format}}" type="image/{{ format }}" />
  }
  <img ngxHero fixedHero="false" highQualityPath="assets/img/demo_4x" browserSupportAvif="supportAvif" browserSupportWebP="supportWebP" [supportedFormats]="['avif', 'webp', 'jpeg']" (openHero)="onOpenHero()" (closeHero)="onCloseHero()" src="assets/img/demo.jpeg" alt="demo-image" />
</picture>

Contributing

I welcome contributions from the open-source community to make this project even better. Whether you want to report a bug, suggest a new feature, or contribute code, I appreciate your help.

Bug Reports and Feature Requests

If you encounter a bug or have an idea for a new feature, please open an issue on my GitHub Issues page. I will review it and discuss the best approach to address it.

Code Contributions

If you'd like to contribute code to this project, please follow these steps:

1. Fork the repository to your GitHub account.
2. Clone your forked repository to your local machine.

git clone https://github.com/hm21/ngx-scroll-animations.git