LayerSlider + Lottie = 🔥

LayerSlider 8

.km-hover-dark:hover{color:#222 !important}
.km-button-outline:hover{background:#555 !important;color:white !impor=
tant}
.km-button-red:hover{background:white !important;color:#ff375a !import=
ant}
.km-button-red-outline:hover{background:#ff375a !important;color:white=
!important}
.km-button-red-purple:hover{background:white !important;color:#ff4971 =
!important}
.km-button-red-purple-outline:hover{background:#ff4971 !important;colo=
r:white !important}
.km-button-green:hover{background:white !important;color:#44cb01 !impo=
rtant}
.km-button-green-outline:hover{background:#44cb01 !important;color:whi=
te !important}
.km-button-blue:hover{background:white !important;color:#09c8ec !impor=
tant}
.km-button-blue-outline:hover{background:#09c8ec !important;color:whit=
e !important}
.km-button-white-outline-red:hover{background:white !important;color:#=
ff375a !important}
.km-button-white-outline-grey:hover{background:white !important;color:=
#555 !important}
.km-button-white-outline-gray:hover{background:white !important;color:=
#555 !important}
.km-button-white-outline-lightgrey:hover{background:white !important;c=
olor:#777 !important}
.km-button-white-outline-lightgray:hover{background:white !important;c=
olor:#777 !important}
.km-link:hover{text-decoration:underline !important}

@import url(‘https://fonts.googleapis.com/css?family=3DLato:300,400,50=
0,600,700,800’);
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
@media only screen and (prefers-color-scheme: dark) {
body, table, td, p, a, h1, h2, h3, h4, h5 {
color: #777;
}
html,
body,
#km-outer-wrapper,
.km-bg-white {
background-color: white !important;
}
b {
color: #222;
}
h1,
h2,
h3,
h4,
h5 {
color: #333;
}
.km-color-light {
color: #656565 !important;
}
.km-color-lighter {
color: #999 !important;
}
.km-color-red {
color: #ff375a !important;
}
.km-color-blue {
color: #09c8ec !important;
}
.km-highlight-grey,
.km-highlight-gray {
background-color: #999 !important;
}
.km-highlight-red {
background-color: #ff375a !important;
}
.km-highlight-blue {
background-color: #09c8ec !important;
}
.km-highlight {
color: white !important;
}
.km-divider {
background: #ccc;
}
.km-button {
border-color: #555;
background: #555;
color: #fff;
}
.km-button-outline {
background: transparent;
color: #555;
}
.km-button-red {
background: #ff375a;
border-color: #ff375a;
}
.km-button-red-outline {
background: transparent;
border-color: #ff375a;
color: #ff375a;
}
.km-button-red-purple {
background: #ff4971;
border-color: #ff4971;
}
.km-button-red-purple-outline {
background: transparent;
border-color: #ff4971;
color: #ff4971;
}
.km-button-green {
background: #44cb01;
border-color: #44cb01;
}
.km-button-green-outline {
background: transparent;
border-color: #44cb01;
color: #44cb01;
}
.km-button-blue {
background: #09c8ec;
border-color: #09c8ec;
}
.km-button-blue-outline {
background: transparent;
border-color: #09c8ec;
color: #09c8ec;
}
.km-button-white {
background: white;
border-color: white;
color: #555;
}
.km-button-white-outline {
background: transparent;
border-color: white;
color: white;
}
.km-link-red {
color: #ff4971 !important;
}
.km-link-blue {
color: #09c8ec !important;
}
#km-browser {
color: white !important;
}
.km-hover-dark:hover {
color: #222 !important;
}
.km-button-outline:hover {
background: #555 !important;
color: white !important;
}
.km-button-red:hover {
background: white !important;
color: #ff375a !important;
}
.km-button-red-outline:hover {
background: #ff375a !important;
color: white !important;
}
.km-button-red-purple:hover {
background: white !important;
color: #ff4971 !important;
}
.km-button-red-purple-outline:hover {
background: #ff4971 !important;
color: white !important;
}
.km-button-green:hover {
background: white !important;
color: #44cb01 !important;
}
.km-button-green-outline:hover {
background: #44cb01 !important;
color: white !important;
}
.km-button-blue:hover {
background: white !important;
color: #09c8ec !important;
}
.km-button-blue-outline:hover {
background: #09c8ec !important;
color: white !important;
}
.km-button-white-outline-red:hover {
background: white !important;
color: #ff375a !important;
}
.km-button-white-outline-grey:hover,
.km-button-white-outline-gray:hover {
background: white !important;
color: #555 !important;
}
.km-button-white-outline-lightgrey:hover,
.km-button-white-outline-lightgray:hover {
background: white !important;
color: #777 !important;
}
}
@media only screen and (max-width: 480px) {
* {
-webkit-text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased !important;
}
.km-social-icon {
width: 26px !important;
}
td,
p,
li {
font-size: 18px !important;
}
.km-font-tiny {
font-size: 12px !important;
}
.km-font-smaller {
font-size: 14px !important;
}
.km-font-small {
font-size: 16px !important;
}
.km-font-large {
font-size: 20px !important;
}
.km-font-extralarge {
font-size: 22px !important;
}
.km-font-giant {
font-size: 26px !important;
}
h1 {
font-size: 34px !important;
}
h2 {
font-size: 30px !important;
}
h3 {
font-size: 26px !important;
}
h4 {
font-size: 22px !important;
}
h5 {
font-size: 18px !important;
}
.km-button {
border-width: 2px !important;
}
}

VIEW IN BROWSER

We are thrilled to unveil LayerSlider 8.2, featuring our bra=
nd-new Lottie Add-On. This update extends LayerSlider=E2=80=99s al=
ready powerful animation ecosystem by bringing Lottie=E2=80=99s high-end =
motion assets directly into the project editor.

This isn=E2=80=99t just a simple embedded player. Our Lottie integra=
tion is built from the ground up to be a core part of LayerSlider. Expect=
smooth, performance-optimized animations that don=E2=80=99t just sit on =
the page. They respond to slider events and are fully interactive, includ=
ing clicks, mouse moves, scrolls, and other visitor actions.

Meet Lottie

Lottie is an open-source file format for high-quality, lightweight =
vector animations that run efficiently without slowing down your site. Un=
like bulky GIFs or videos, Lottie animations are incredibly small and inf=
initely scalable, ensuring they look perfect on any screen size. With a m=
assive global ecosystem of pre-made assets and seamless integration tools=
, you can easily add professional, interactive elements to your projects.

Pro Features for Pro Creators

LayerSlider=E2=80=99s Lottie integration comes with ease of use and=
support for everything Lottie has to offer.

=E2=96=AA  Drag-and-Drop: Just drop your Lottie fil=
es directly into the editor. It=E2=80=99s that simple.

=E2=96=AA  Animation Library: Store and reuse your =
animations, all in one place. Includes a curated selection of commonly us=
ed assets.

=E2=96=AA  High-Performance Rendering: Support for =
ThorVG with WebAssembly enables advanced hardware-accelerated playback, d=
elivering smooth animations through the most modern and efficient renderi=
ng technology available.

=E2=96=AA  Broad Format Support: Use both classic L=
ottie (.json) and modern dotLottie (.lottie) files with full compatibilit=
y.

=E2=96=AA  Theming Support: Switch seamlessly betwe=
en light, dark, and custom themes from a single dotLottie file.

=E2=96=AA  Interactive Triggers: Make your animatio=
ns respond to user actions with triggers like click, hover, mouse move, a=
nd scroll.

=E2=96=AA  Professional Interoperability: Import an=
d use animations directly from industry-standard tools like Adobe After E=
ffects, Figma, or Canva.

=E2=96=AA  Extensive Customization: Fine-tune every=
detail, including layout, speed, loop behavior, animation direction, and=
more.

=E2=96=AA  Segmented Playback: Define which part of=
the animation plays by setting custom start and end points.

=E2=96=AA  Flexible Hosting: Load external animatio=
ns via URL.

Ready To Take LayerSlider 8.2 for a Spin?

Update to the latest version today and explore the Lottie Add-On to=
see how it can transform your next project. We can=E2=80=99t wait to see=
what you create!

Release Log

How to Update

Your Account

Thank you for being part of the LayerSlider family.

Happy designing! =F0=9F=8E=A8

The LayerSlider Team

Make sure to follow us on Facebook, X (Twitter), and Instagram to keep up with our promotions, new templates, an=
d important updates.

You=E2=80=99re receiving this email because you=E2=80=99ve signed =
up for update news or purchased LayerSlider. If you no longer wish to rec=
eive these very cool, yet infrequent emails,
you can manage notifications or unsubscribe.
Kreatura Media Kft., Zsalu Str=
eet 6. 2.A, Budapest, H-1182