Animation will Not Play in Two Different Sections on One Page

Support
#1

Hello, I have created an animation based on the great Youtube video by Christopher. I wanted to replace a Revolution Slider at the top of a page. I created a Section and used the grid element to build out the page topper, added the animation to the column and every thing worked great. I decided to hide that Section for mobile and wanted to add another Section with a different image and the animation to mobile. It animates perfectly within the Pro builder but not on the page. Only the column in the first section will animate. I have made both columns visible on all screen sizes to that I could debug. I cannot find an error but am new to CSS animations. I have read a lot of documentation but cannot find the issue. Because it works in the builder and not on the page I am puzzled. Could you offer some advice. The CSS is fund in the two columns. I will add the page URL and credentials for the site in a private message. Thank you.

Jim

#2

Hello Jim,

Thanks for writing in!

The animation did not work because custom css code were invalid. You may have added it or accidentally deleted some parts of the code. I have corrected it already.

@keyframes fadeAndScale {

	0% {
		opacity:0;
		transform: scale3d(.75,.75,1);
	}

	70% {
		opacity:0;
		transform: scale3d(.75,.75,1);
	}

	100% {
		opacity:1;
		transform: scale3d(1,1,1);
	}
}

$el	.x-text-content-text-primary {

	animation: fadeAndScale 1s cubic-bezier(.39,-1.05,.58,1.95);
	animation-delay: -.2s;
	transform-origin: center bottom;

}	

$el	.x-text-content-text-subheadline {

	animation: fadeAndScale 2s cubic-bezier(.39,-1.05,.58,1.95);
	animation-delay: -.2s;
	transform-origin: center bottom;

}	

$el	.x-image {
	animation: fadeAndScale 4s cubic-bezier(.39,-1.05,.58,1.95);
	animation-delay: -.2s;
	transform-origin: center bottom;
}

Please clear your browser cache or use private browsing mode and test your animation test page again.

#3

Ruenel

Thank you for solving this issue. It does indeed work now but I cannot see any difference in the code - I have compared each line - I must be blind!

If you have a chance, I would like to know what you fixed.

The support from Themeco is outstanding.

Thanks

Jim

#4

Ruenel

Never mind, I found it. Thanks again!

Jim

#5

You’re welcome!
We’re glad we were able to help you out.

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.