Support Custom Animations

Feature Requests Website Builder Request
1

Hi can you guys work on supporting custom CSS animations, apparently it conflicts with sitejet and won’t load some collection items properly, your stock animations are very limited and cannot be applied on a hover state.

Thanks

1 Like
2

Hi @Kenwin_Z,

could you please share the custom animation here, so I can put it into the feature request ticket as an example?

3

Hi Martin, I have this code, apparently the staff from you guys and cpanel told me that it’s conflicting making my collection items not load properly.

// Custom
.color-user-6{color: #ff8400;}
.iconalign { vertical-align: middle !important; }

.full-widthbanner {
	width: 100vw !important;
	position: relative;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
}

.full-widthbannerimage { mask-image: linear-gradient(black 45%, transparent 60%); }

@media screen and (max-width: 975px) {
	.full-widthbannerimage { mask-image: linear-gradient(black 65%, transparent 85%); }
}

.border-round img { border-radius: 15px !important; }
.bold400 { font-weight: 400; }
.bold500 { font-weight: 500; }
.bold600 { font-weight: 600; }

.imghover img {
	opacity: 0.7;
	filter: grayscale(75%);
	transition: all 0.6s ease;
}

.imghover img:hover {
	opacity: 1;
	filter: grayscale(0);
}

.guides img {
	opacity: 0.85;
	transition: all 0.6s ease;
	z-index: -1;
}

.guides img:hover {
	opacity: 1;
	transform: scale(1.1, 1.1);
	z-index: 10;
}

.masterpiecelatest {
	//border: 2px solid $color-background;
	border-radius: 10px;
}

.masterpiecelatest:hover {
	//border: 2px solid $color-user-4; //border-radius: 10px;
	-webkit-box-shadow: 0px 0px 8px 4px rgba(255,0,214,0.75);
	-moz-box-shadow: 0px 0px 8px 4px rgba(255,0,214,0.75);
	box-shadow: 0px 0px 8px 4px rgba(255,0,214,0.75);
}

.fineartlatest {
	//border: 2px solid $color-background;
	border-radius: 10px;
}

.fineartlatest:hover {
	//border: 2px solid $color-user-4; //border-radius: 10px;
	-webkit-box-shadow: 0px 0px 8px 4px rgba(118,24,249,0.75);
	-moz-box-shadow: 0px 0px 8px 4px rgba(118,24,249,0.75);
	box-shadow: 0px 0px 8px 4px rgba(118,24,249,0.75);
}

.visuallatest {
	//border: 2px solid $color-background;
	border-radius: 10px;
}

.visuallatest:hover {
	//border: 2px solid $color-user-4; //border-radius: 10px;
	-webkit-box-shadow: 0px 0px 8px 4px rgba(255,153,0,0.75);
	-moz-box-shadow: 0px 0px 8px 4px rgba(255,153,0,0.75);
	box-shadow: 0px 0px 8px 4px rgba(255,153,0,0.75);
}

.nolinkdeco { color: $color-default !important; }
.imground { border-radius: 10px; }
.allcaps { text-transform: uppercase; }

.typewriter-title {
	white-space: nowrap;
	overflow: hidden;
	content: "";
	width: max-content;
	border-right: solid 3px #03e1b8ff;
	animation: typewriter-text 2s steps(30,end) 1s 1 normal both, typewriter-cursor 700ms steps(29,end) infinite;
}

@keyframes typewriter-text {
	from { max-width: 0; }
	to { max-width: 100%; }
}

@keyframes typewriter-cursor {
	from { border-right-color: #03e1b8ff; }
	to { border-right-color: transparent; }
}

@keyframes FadeInGallery {
	0% {
		opacity: 0;
		transform: scale(0, 0);
	}

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

.ed-gallery-thumb {
	animation: FadeInGallery 0.6s ease forwards;
	opacity: 0;
}

@for $i from 1 through 10 {
	.ed-gallery-thumb:nth-child(#{$i}n) { animation-delay: #{$i * 0.4}s; }
}

//BlogBox
@keyframes FadeInBlogbox {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.blog-box {
	opacity: 0;
	animation: FadeInBlogbox 0.6s ease forwards;
}

@for $i from 1 through 10 {
	.blog-box:nth-child(#{$i}n) { animation-delay: #{$i * 0.4}s; }
}
1 Like