Is it possible to fire many animations in the same time? For example: fade and sli

Fire many animations at the same time about sal HOT 2 CLOSED

mciastek commented on July 28, 2024

Fire many animations at the same time

from sal.

Comments (2)

mciastek commented on July 28, 2024

Yeah, that's how sal.js works. For combining transitions, you can declare your own animation like

sal/src/sal.scss

Lines 98 to 106 in a0a0e4f

 // Slide 

 [data-sal|='slide'] { 

 opacity: 0; 

 transition-property: opacity, transform; 

 } 

 [data-sal='slide-up'] { 

 transform: translateY($sal-slide-offset); 

 }

and play this animation when specific element gets sal-animate class like

sal/src/sal.scss

Lines 120 to 124 in a0a0e4f

 [data-sal|='slide'].sal-animate, 

 body.sal-disabled [data-sal|='slide'] { 

 opacity: 1; 

 transform: none; 

 }

Regarding your example I think that slide-up animation is something you're looking for.

Let me know if this answers your question.

from sal.

mciastek commented on July 28, 2024

Closing this issue. Please reopen in case of following questions.

from sal.

Fire many animations at the same time about sal HOT 2 CLOSED

Comments (2)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	// Slide
	[data-sal\|='slide'] {
	opacity: 0;
	transition-property: opacity, transform;
	}

	[data-sal='slide-up'] {
	transform: translateY($sal-slide-offset);
	}

	[data-sal\|='slide'].sal-animate,
	body.sal-disabled [data-sal\|='slide'] {
	opacity: 1;
	transform: none;
	}