<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Graphics Design - THINGS IO | Low-code data koppelen vanuit Groningen</title>
	<atom:link href="https://things.io/category/graphics-design/feed/" rel="self" type="application/rss+xml" />
	<link>https://things.io</link>
	<description>Low-code koppelen van data</description>
	<lastBuildDate>Tue, 19 Dec 2023 06:47:25 +0000</lastBuildDate>
	<language>nl-NL</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.5</generator>
	<item>
		<title>Tell better stories with animation and LottieFiles</title>
		<link>https://things.io/tell-better-stories-with-animation-and-lottiefiles/</link>
					<comments>https://things.io/tell-better-stories-with-animation-and-lottiefiles/#respond</comments>
		
		<dc:creator><![CDATA[Hans Blaauw]]></dc:creator>
		<pubDate>Tue, 13 Jun 2023 06:24:47 +0000</pubDate>
				<category><![CDATA[English]]></category>
		<category><![CDATA[Graphics Design]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[lottiefiles]]></category>
		<category><![CDATA[stories]]></category>
		<guid isPermaLink="false">https://www.things.io/?p=10146</guid>

					<description><![CDATA[<p>Motion doesn’t just make your designs look good – although it does that well, too. It also drives engagement, conversion and effective storytelling.</p>
<p>The post <a href="https://things.io/tell-better-stories-with-animation-and-lottiefiles/">Tell better stories with animation and LottieFiles</a> first appeared on <a href="https://things.io">THINGS IO | Low-code data koppelen vanuit Groningen</a>.</p>]]></description>
										<content:encoded><![CDATA[<div data-elementor-type="wp-post" data-elementor-id="10146" class="elementor elementor-10146">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-3f78ee2 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="3f78ee2" data-element_type="section" data-e-type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-263e650" data-id="263e650" data-element_type="column" data-e-type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-960dc45 elementor-widget elementor-widget-heading" data-id="960dc45" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h3 class="elementor-heading-title elementor-size-default">Why animation?</h3>				</div>
				</div>
				<div class="elementor-element elementor-element-ed762b3 elementor-widget elementor-widget-spacer" data-id="ed762b3" data-element_type="widget" data-e-type="widget" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-4c25094 elementor-widget elementor-widget-text-editor" data-id="4c25094" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Motion doesn’t just make your designs look good – although it does that well, too. It also drives engagement, conversion and effective storytelling.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-c016c92 elementor-alert-info elementor-widget elementor-widget-alert" data-id="c016c92" data-element_type="widget" data-e-type="widget" data-widget_type="alert.default">
				<div class="elementor-widget-container">
							<div class="elementor-alert" role="alert">

						<span class="elementor-alert-title">What is a Lottie?</span>
			
						<span class="elementor-alert-description">A Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation. LottieFiles lets you create, edit, test, collaborate on and ship a Lottie in the easiest way possible. Below this box you see a small animation.</span>
			
			
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-7ded8d4 elementor-widget elementor-widget-shortcode" data-id="7ded8d4" data-element_type="widget" data-e-type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
							<div class="elementor-shortcode"><script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets3.lottiefiles.com/packages/lf20_FwuHJNhOOH.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay></lottie-player></div>
						</div>
				</div>
				<div class="elementor-element elementor-element-3637735 elementor-widget elementor-widget-spacer" data-id="3637735" data-element_type="widget" data-e-type="widget" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-9348af9 elementor-widget elementor-widget-heading" data-id="9348af9" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h4 class="elementor-heading-title elementor-size-default">Lots of Lotties</h4>				</div>
				</div>
				<div class="elementor-element elementor-element-ed58465 elementor-widget elementor-widget-spacer" data-id="ed58465" data-element_type="widget" data-e-type="widget" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-0d4a985 elementor-widget elementor-widget-text-editor" data-id="0d4a985" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>LottieFiles has a great searchable website full of free and paid animations. Below you see a screenshot after using the searchterm &#8220;explain&#8221;.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-f949abc elementor-widget elementor-widget-image" data-id="f949abc" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img fetchpriority="high" decoding="async" width="1024" height="600" src="https://things.io/wp-content/uploads/2023/06/screen1-1-1024x600.png" class="attachment-large size-large wp-image-10154" alt="" srcset="https://things.io/wp-content/uploads/2023/06/screen1-1-1024x600.png 1024w, https://things.io/wp-content/uploads/2023/06/screen1-1-300x176.png 300w, https://things.io/wp-content/uploads/2023/06/screen1-1-768x450.png 768w, https://things.io/wp-content/uploads/2023/06/screen1-1-600x351.png 600w, https://things.io/wp-content/uploads/2023/06/screen1-1.png 1192w" sizes="(max-width: 1024px) 100vw, 1024px" />															</div>
				</div>
				<div class="elementor-element elementor-element-04fd730 elementor-widget elementor-widget-spacer" data-id="04fd730" data-element_type="widget" data-e-type="widget" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-5fe87b0 elementor-widget elementor-widget-text-editor" data-id="5fe87b0" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>These Lotties can be used on your WordPress website by using iFrame or a special plugin. If you use Gutenberg blocks you can use a free one, for Elementor you need to pay. Using an iFrame is always possible. Our sample uses the iFrame.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-4ae122d elementor-widget elementor-widget-heading" data-id="4ae122d" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h4 class="elementor-heading-title elementor-size-default">Customize and embed</h4>				</div>
				</div>
				<div class="elementor-element elementor-element-50106f5 elementor-widget elementor-widget-spacer" data-id="50106f5" data-element_type="widget" data-e-type="widget" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-42ef5c0 elementor-widget elementor-widget-text-editor" data-id="42ef5c0" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>A Lottie can be customized before usage. Things like color and speed but you can even customize it a little bit more.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-c8ddb1a elementor-widget elementor-widget-image" data-id="c8ddb1a" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img decoding="async" width="1024" height="500" src="https://things.io/wp-content/uploads/2023/06/screen2-1-1024x500.png" class="attachment-large size-large wp-image-10155" alt="" srcset="https://things.io/wp-content/uploads/2023/06/screen2-1-1024x500.png 1024w, https://things.io/wp-content/uploads/2023/06/screen2-1-300x146.png 300w, https://things.io/wp-content/uploads/2023/06/screen2-1-768x375.png 768w, https://things.io/wp-content/uploads/2023/06/screen2-1-1536x750.png 1536w, https://things.io/wp-content/uploads/2023/06/screen2-1-600x293.png 600w, https://things.io/wp-content/uploads/2023/06/screen2-1.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" />															</div>
				</div>
				<div class="elementor-element elementor-element-4b8cee1 elementor-widget elementor-widget-spacer" data-id="4b8cee1" data-element_type="widget" data-e-type="widget" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-6c1ca35 elementor-widget elementor-widget-text-editor" data-id="6c1ca35" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p><span style="text-align: var(--bs-body-text-align);">After you customization you can pick how to embed the Lottie. </span></p>								</div>
				</div>
				<div class="elementor-element elementor-element-cbb22db elementor-widget elementor-widget-spacer" data-id="cbb22db" data-element_type="widget" data-e-type="widget" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-f3e3f08 elementor-widget elementor-widget-spacer" data-id="f3e3f08" data-element_type="widget" data-e-type="widget" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-cbb7736 elementor-widget elementor-widget-rt-cta" data-id="cbb7736" data-element_type="widget" data-e-type="widget" data-widget_type="rt-cta.default">
				<div class="elementor-widget-container">
					<div class="rt-el-cta cta-style1">
	<div class="container">
		<div class="align-items row">
			<div class="cta-content col-lg-7">
				<h2 class="rtin-title">Interested in LottieFiles?</h2>
				<p></p>
			</div>
							<div class="rtin-button col-lg-5"><a class="button-gradient-1" href="https://lottiefiles.com/" target="_blank">Try now</a></div>		
					</div>		
	</div>
</div>				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div><p>The post <a href="https://things.io/tell-better-stories-with-animation-and-lottiefiles/">Tell better stories with animation and LottieFiles</a> first appeared on <a href="https://things.io">THINGS IO | Low-code data koppelen vanuit Groningen</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://things.io/tell-better-stories-with-animation-and-lottiefiles/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
