eleopard

Dear Cataniax,

Please replace the old CSS with this one, in the same Custom CSS box:

#logo{
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	-webkit-animation-name: bounceIn;
	-moz-animation-name: bounceIn;
	-o-animation-name: bounceIn;
	backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	animation-fill-mode: both;
	transform: translate3d(0, 0, 0);
	perspective: 1000;
	-o-animation-fill-mode: both;
	-o-transform: translate3d(0, 0, 0);
	-o-perspective: 1000;
	-moz-animation-fill-mode: both;
	-moz-transform: translate3d(0, 0, 0);
	-moz-perspective: 1000;
	-webkit-animation-fill-mode: both;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-perspective: 1000;
	-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
	animation-iteration-count: infinite;
	-webkit-animation-name: pulse;
	-moz-animation-name: pulse;
	-o-animation-name: pulse;
	animation-name: pulse;
    -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
    animation-delay: 1s;
}
@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(1); }	
	20% { -webkit-transform: scale(1.1); }
	40% { -webkit-transform: scale(1); }
    100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulse {
    0% { -moz-transform: scale(1); }	
	20% { -moz-transform: scale(1.1); }
	40% { -moz-transform: scale(1); }
    100% { -moz-transform: scale(1); }
}
@-o-keyframes pulse {
    0% { -o-transform: scale(1); }	
	20% { -o-transform: scale(1.1); }
	40% { -o-transform: scale(1); }
    100% { -o-transform: scale(1); }
}
@keyframes pulse {
    0% { transform: scale(1); }	
	20% { transform: scale(1.1); }
	40% { transform: scale(1); }
    100% { transform: scale(1); }
}

Let me know if this works.

Alright. Please copy the following CSS and paste it in:
Coming Soon > Template > Advanced Tab > Custom CSS Box

bounceIn Animation will be applied to your logo.

#logo{
	animation-duration: 0.5s;
	animation-delay: 0s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	-webkit-animation-name: bounceIn;
	-moz-animation-name: bounceIn;
	-o-animation-name: bounceIn;
	animation-name: bounceIn;
	backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	animation-fill-mode: both;
	transform: translate3d(0, 0, 0);
	perspective: 1000;
	-o-animation-fill-mode: both;
	-o-transform: translate3d(0, 0, 0);
	-o-perspective: 1000;
	-moz-animation-fill-mode: both;
	-moz-transform: translate3d(0, 0, 0);
	-moz-perspective: 1000;
	-webkit-animation-fill-mode: both;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-perspective: 1000;
}
@-webkit-keyframes bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.3);
	}
	
	50% {
		opacity: 1;
		-webkit-transform: scale(1.05);
	}
	
	70% {
		-webkit-transform: scale(.9);
	}
	
	100% {
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes bounceIn {
	0% {
		opacity: 0;
		-moz-transform: scale(.3);
	}
	
	50% {
		opacity: 1;
		-moz-transform: scale(1.05);
	}
	
	70% {
		-moz-transform: scale(.9);
	}
	
	100% {
		-moz-transform: scale(1);
	}
}

@-o-keyframes bounceIn {
	0% {
		opacity: 0;
		-o-transform: scale(.3);
	}
	
	50% {
		opacity: 1;
		-o-transform: scale(1.05);
	}
	
	70% {
		-o-transform: scale(.9);
	}
	
	100% {
		-o-transform: scale(1);
	}
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(.3);
	}
	
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	
	70% {
		transform: scale(.9);
	}
	
	100% {
		transform: scale(1);
	}
}

.animated.bounceIn {
	-webkit-animation-name: bounceIn;
	-moz-animation-name: bounceIn;
	-o-animation-name: bounceIn;
	animation-name: bounceIn;
}

Please let me know if this works.

Dear Michal,

Thanks for using the Animate It! plugin, and nice website, by the way 🙂

What I understand is, the section with title “Jak mohu pomoci” is loading without animation on the first load.

The reason for this is simply time taken in loading the images. On the first load, the images in the section titled “Marketa Setinova” take time to load, so the section “Jak mohu pomoci” already comes in the viewport and hence, its animation is played when there is nothing loaded.

A workaround here can be, try adding the following CSS in
Settings > Animate It! > Custom CSS Box

.entry-content > .eds-animate:first-child{
	min-height: 560px;
}

This will always keep the first section (titled “Marketa Setinova”) at least 560px in height, whether any images are laoded or not, and that will always push the second section (titles “Jak mohu pomoci”) below teh viewport.

Please let me know if this works for you.

Dear Sailen,

Glad to know you have found a work-around.
I have taken your points into consideration, we’ll test the plugin on our end and will let you know.

Thanks a lot for pointing the issues.

Dear 3_quarters_Unicorn,

Thanks for using the Portfolio Manager.
There is no way right now to show the 3 latest projects. However, you can do the following workaround:

1. Make the 3 projects you want to show featured (in your case, the latest 3 projects)
2. Use Portfolio Manager button on the post editor to show only the featured projects, and order them by Date.

For arranging the 3 projects side by side, it is possible using the custom CSS. However, since each theme is designed differently, if you could share the link to your page with 3 projects, I can send you the CSS according to your theme.

Please let me know if you have any queries.

• This reply was modified 9 years, 6 months ago by eleopard.

Hi Victor,

Thank you for using Animate It!.

Currently on-scroll animation is applied only once. So the user will see animations for the first time they scroll down.

Dear Benjamin,

Thanks a lot for stepping in.

The issue here is like this:
In order to enable nested animations, we use 2 shortcodes:

1. First Shortcode starts the DIV [edsanimate_start ... ]
    There is content in between: any text, image etc.
2. Second Shortcode ends the DIV [edsanimate_end]

Now, in the case of PBS, the DIV generated from the first shortcode is automatically being closed by PBS, when this content is rendered in the front-end. So now the sequence becomes:

1. First Shortcode starts the DIV [edsanimate_start ... ]
1.1 PBS closes the DIV
    There is content in between, any text, image etc.
2.1 PBS starts a new DIV
2. Second Shortcode ends the DIV [edsanimate_end]

So the content in between, which is meant to be animated is left out of the DIV.
Please let me know if there is any option built in to override the automatic addition of DIVs.