web-animations

I need a help to animated my web project with gsap staggerFromTo()

由 烂漫一生 提交于 2021-02-11 15:03:08
问题 I want to popup my footer thumbnailed one by one with staggerFromTo() property. Here is my HTML code. <div class="footer"> <img src="img/pic1.jpg" alt=""> <img src="img/pic2.jpg" alt=""> <img src="img/pic3.jpg" alt=""> <img src="img/pic4.jpg" alt=""> </div> Here is my js code: const footer = document.querySelector(".footer"); const tl = new TimelineMax(); tl.staggerFromTo(footer,1.5,{y: "-100px"},{y: "0%",stagger:0.2}) 回答1: You don't need this CSS. It's just to visualize the example! I hope I

How do I perform infinite animations in Angular 2?

由 大兔子大兔子 提交于 2020-01-01 14:38:59
问题 Basically, I want to make use of the web-animations-api polyfill in angular (4 currently) to perform infinite animations on elements. Let's see a basic non-angular example: var ball = document.getElementById('ball'); ball.animate([ { transform: 'scale(0.5)' }, { transform: 'scale(1)' } ], { duration: 1000, iterations: Infinity, direction: 'alternate', easing: 'ease-in-out' }); .container { position: relative; width: 100%; height: 200px; } .ball { position: absolute; width: 80px; height: 80px;

How do I perform infinite animations in Angular 2?

由 早过忘川 提交于 2020-01-01 14:38:28
问题 Basically, I want to make use of the web-animations-api polyfill in angular (4 currently) to perform infinite animations on elements. Let's see a basic non-angular example: var ball = document.getElementById('ball'); ball.animate([ { transform: 'scale(0.5)' }, { transform: 'scale(1)' } ], { duration: 1000, iterations: Infinity, direction: 'alternate', easing: 'ease-in-out' }); .container { position: relative; width: 100%; height: 200px; } .ball { position: absolute; width: 80px; height: 80px;

How to detect changes made by CSS3 animation or web animations API?

由 北慕城南 提交于 2019-12-11 00:24:40
问题 How can I detect changes made by CSS3 animations or web animations ( Element.animate )?? (Sorry for my bad English! this is my first question in Stackoverflow) I know about MutationObserver, it responds only if I change the inline style or if I use requestAnimationFrame (since I change the inline style using it). But if I use CSS3 animations or Web animations, MutationObserver doesn't respond since they don't change the inline style. See this... There are two divs here... div1, div2. div1's

Creating a transition when changing properties in angular 2/4

由 随声附和 提交于 2019-11-30 09:15:51
I want to create a transition effect whenever I change the value of a property. I tried doing the following @Component({ selector: 'image-holder', template: ` <div class="carousel-image"> <img src="{{ image }}" [@slideInRight]="slide" /> <span>{{ text }}</span> </div> `, styleUrls: ['../greenscreen.scss'], animations: [ trigger( 'slideInRight', [ transition( ':enter', [ style({transform: 'translateX(100%)', opacity: 0}), animate('500ms', style({transform: 'translateX(0)', opacity: 1})) ] ), transition( ':leave', [ style({transform: 'translateX(0)', 'opacity': 1}), animate('500ms', style(

Creating a transition when changing properties in angular 2/4

由 和自甴很熟 提交于 2019-11-29 14:16:06
问题 I want to create a transition effect whenever I change the value of a property. I tried doing the following @Component({ selector: 'image-holder', template: ` <div class="carousel-image"> <img src="{{ image }}" [@slideInRight]="slide" /> <span>{{ text }}</span> </div> `, styleUrls: ['../greenscreen.scss'], animations: [ trigger( 'slideInRight', [ transition( ':enter', [ style({transform: 'translateX(100%)', opacity: 0}), animate('500ms', style({transform: 'translateX(0)', opacity: 1})) ] ),
订阅 web-animations