chenqingspring / ng-lottie

Render After Effects animations on Angular based on lottie-web
MIT License
340 stars 100 forks source link

change animation size #20

Open 1pocketaces1 opened 6 years ago

1pocketaces1 commented 6 years ago

Hi I am wondering if I can change the size of the animation while it is playing. I have tried using CSS transitions to change the container size and also to change the view size with no success

laulaaa commented 6 years ago

Hello.

Yes, you can change the animation size, for that remove the height and width configuration, so it is going to take the default values which are 100%. You can see it in the source code:

lottieAnimationView.component.ts

 this.viewWidth = this.width + 'px' || '100%';
 this.viewHeight = this.height + 'px' || '100%';

You have to make your html like:

MyComponent.component.html

 <lottie-animation-view
          [options]=lottieConfig
          (animCreated)="handleAnimation($event)">
    </lottie-animation-view>

The animation is going to take the width of the div container. If you want to change it, change the css configuration of the container.

ansarikhurshid786 commented 5 years ago

I tried but it is not taking full height and width of container.