Keep image in final state after animation using short codes.

  • Resolved Moultrup

    (@moultrup)


    8 years, 10 months ago

    Hey eLeopard,

    First off, your plugin is awesome (easiest 5-star review I’ve given).

    So my question is, I’m using the short codes found on your site here:

    https://www.downloads.eleopard.in/class-generator-wordpress/

    instead of the more extended sets you’ve provide in the editor. I just prefer them since they’re easier to navigate. However, I’m trying to keep all my images in their final state after they’ve finished animating since they’re mostly thumbnail sized images and they look pretty fuzzy/blurry once they’ve finished their animation and are in a fixed position.

    Is there a short code for “keep element in final state?” Something like ‘finalkeep’ or ‘keepfinal’?

    Many thanks in advance!

    https://www.ads-software.com/plugins/animate-it/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author eleopard

    (@eleopard)

    Dear Moultrup,

    Thanks a lot for an awesome review ??
    Could you please provide a link to the page where you have this issue.

    Or alternatively, could you paste one of the whole animation block here. That would help us recreate the issue on our end.

    Thread Starter Moultrup

    (@moultrup)

    Thanks for the response!

    Here’s a test page I made with the code and an example:

    https://luckeyfarms.com/animate-it-test/

    Plugin Author eleopard

    (@eleopard)

    Dear Moultrup,

    Please try this HTML and CSS:

    HTML

    <div class="eds-icon-wrapper">
	<a href="#" class="eds-icon animated fadeInLeft duration2">
		<img src="https://luckeyfarms.com/wp-content/uploads/2016/01/instagram.png" alt="Instagram" />
	</a>
	<a href="#" class="eds-icon animated fadeIn duration2">
		<img src="https://luckeyfarms.com/wp-content/uploads/2016/01/facebook.png" alt="Facebook" />
	</a>
	<a href="#" class="eds-icon animated fadeIn duration2">
		<img src="https://luckeyfarms.com/wp-content/uploads/2016/01/twitter.png" alt="Facebook" />
	</a>
	<a href="#" class="eds-icon animated fadeInRight duration2">
		<img src="https://luckeyfarms.com/wp-content/uploads/2016/01/email.png" alt="Facebook" />
	</a>
</div>

    CSS (Paste it in Settings > Animate It! > Custom CSS):

    .eds-icon-wrapper{
	text-align: center;
}

.eds-icon {
	display: inline-block;
	margin: 10px;
	width: 35px;
	height: auto;
	image-rendering: auto;
	border: 0 !important;
}

.eds-icon img{
	image-rendering: auto;
}

.eds-icon-wrapper br{
	display: none;
}

    A demo is setup here using this code: https://animateitdemo.wpdevcloud.com/demo-for-moultrup-2

    Please let me know if this works for you.

    Thread Starter Moultrup

    (@moultrup)

    Shoot, it didn’t appear to work for me.

    Oh well, it’s not a big deal at all. I do really appreciate your help on the matter though.

    Thanks again!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Keep image in final state after animation using short codes.’ is closed to new replies.