It seems like you're looking to create an animation that starts off-page and then comes onto the page at a 0% position, correct?
You can achieve this effect using the @keyframes
property.
In the following example, we first create a span
tag and then a p
tag which are appended to the parent element. The class js-particle
is added to the span tag using the addClass()
method.
Upon loading the document, jQuery adds these elements and classes. The @keyframes
event specified within js-particles
with the name from-left
defines the animation duration. We then define the @keyframe
event using the same name, using translateX
to move the element on the x-axis from a negative position in the keyframe (starting at -100%
, off-page) to 0%
of the x-axis position, animating it with translateX
.
The @keyframe
events can animate various valid CSS properties such as position, opacity, size, and more.
Additionally, I've included a width:100%
rule in the parent element's CSS.
$(document).ready(function() {
let span = $("<span></span>");
$("#title").append(span);
let p = $("<p></p>");
p.text("An Animated Title"); // You can use dynamic data here => + doc.data().title +
span.append(p);
span.addClass("js-particles");
})
.particles{
background: transparent;
position: absolute;
top: 10%;
left: 10%;
font-size: 32px;
color: black;
width: 100%;
letter-spacing: 2px;
font-family: Helvetica, Arial, sans-serif;
}
.js-particles{
position: absolute;
animation: linear;
animation-name: from-left;
animation-duration: 2s;
-webkit-animation: linear;
-webkit-animation-name: from-left;
-webkit-animation-duration: 2s;
}
@-webkit-keyframes from-left {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="particles" id="title">
<!-- Show title from Firestore using JS -->
</div>