Adding animation to a div that is being appended can be done by using JavaScript functions and

I am looking to incorporate animation into my title div. Below is the HTML code I have so far:

<div class="particles" id="tittle">
  <!-- Displaying title from Firestore using JavaScript -->
</div>

Here is the CSS code for styling:

.particles{
  background: transparent;
  position: absolute;
  top: 10%;
  left: 10%;
  font-size: 32px;
  color: white;
  letter-spacing: 2px;
  font-family: Helvetica, Arial, sans-serif;
  
}

.js-particles{
  font-size: 1.1em;
  animation:lightSpeedInLeft
 2s;
  transition:5s;
}

.particles{
  -webkit-user-select: none;
}

Lastly, this is the JavaScript code snippet I attempted:

// Display title from Firestore
$("#tittle").append('<span class="js-particles"><p>'+ doc.data().title +'</p></span>');

The title is not animating as intended. What steps should I take to ensure the animation works correctly? Any assistance would be greatly appreciated!

Answer №1

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>

Answer №2

To achieve this effect, you can utilize the jquery function known as animate. Simply remove the js-particles CSS and follow these steps:

const title = "Animated Title";

$("#tittle").append('<span class="js-particles"><p>' + title + '</p></span>');

$('.js-particles').animate({ 'font-size': '1.5em' }, 5000, function () {
    console.log("Animation Done")
});
.particles{
  background: transparent;
  position: absolute;
  top: 10%;
  left: 10%;
  font-size: 32px;
  letter-spacing: 2px;
  font-family: Helvetica, Arial, sans-serif;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div class="particles" id="tittle">
    <!-- Show tittle from firestore using js -->
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leverage the potential of the value parameter within a mongoose scope

I am currently trying to retrieve emails of a user based on their id. However, I have encountered an issue due to the asynchronous nature of the mongoose function. Mail.find({receiver_id: '#id#'}, function(err, mails) { var result = []; ...

What is the best way to manage a file upload process?

What is the process for handling a file uploaded through curl in an express js action/route? router.route('/images') .post (function(req, res) { res.status(200); res.json({ message: 'file uploaded' }); }); app.u ...

Retrieve information from the third section by utilizing ajax

My current setup involves: Having a form in form.php for inserting data, Displaying data in table format with pagination on display.php, and Using validation.js for validating form data along with the following function: $('#pagiCount a'). ...

Refreshing a React page will lead to props being empty

The situation I am facing is that the code appears to be correct, but for some reason, when the web page loads, this.props.items does not seem to be passed to Item. Strangely, when I attempt to display this.props.items in console.log, nothing shows up. How ...

The web typography appears fuzzy or has incorrect thickness, lacks consistency across pages and even within a single page

The font (ProggyCleanSZBP.ttf from 1.1.5 release) appears to be intermittently thick and blurry. If you compare with , you'll notice that the latter displays as desired in most cases, but there are instances where the issue occurs, such as the first ...

Dynamic field validation using jQuery

I am currently developing a wizard feature that retrieves employees dynamically from the backend. The employee table is created with a radio input field and then inserted into my HTML code: $.ajax({ method: "get", url: '/fetchEmployees/' ...

"Troubleshooting: Why isn't my Bootstrap alert displaying properly after implementing Ajax

I'm currently working on validating a form using ajax. I have utilized bootstrap's alert alert-danger and alert alert-success classes to enhance the UI, but upon return, it is only displaying as plain HTML without the desired appearance. Can some ...

Initially, the OWL Carousel image is not displaying correctly due to incorrect sizing

I am currently working with OWL Carousel and have implemented a code that displays one image at a time, with the next image sliding in every 15 seconds. The width is set to occupy 100% of the screen and I have configured the JavaScript accordingly so that ...

Creating a customizable date format feature in Spring MVC and jQuery

Exploring different methods to configure date formats for the application via a properties file. Considering implementing a conversion service in Spring along with a model serving as the date format property for jQuery datepicker. However, I encountered ...

AngularJS Update Parent-Child Relationship: Enhancing the Details

When Panel header is clicked, I want to update the respective Panel body with the corresponding data. In my Angular code on Plunker, clicking "Test1" should only update "Test1detail" in the body. Click here for the Plunker Here's the code snippet fr ...

Iterate through each of the selected checkboxes

Can anyone provide guidance on this issue? I am dealing with two web pages - one containing multiple check boxes in a form that POSTs to the second page. Is there a method to pass all the checked checkboxes' values to the second page in order to deter ...

Is there a way to convert a URL into a user-friendly json format displayed on a web page

Can someone please help me figure out the proper way to convert this URL into a JSON format that is easily readable using jQuery on an HTML page? ...

Adjust the formatDate function in the Material UI datepicker

I recently implemented the material-ui datepicker component with redux form and it's been working great. However, I have encountered a minor issue. Whenever I change the date, it displays in the input field as yyyy-mm-dd format. I would like it to app ...

The alignment of Bootstrap v4.5 checkbox is limited as it cannot be positioned horizontally or vertically when placed next to an input field

As stated in the title: Bootstrap's checkbox is having trouble aligning Horizontally or Vertically when placed next to an input. Error Displayed: https://i.sstatic.net/hNHpm.png I have experimented with various solutions, but none have provided sat ...

What is the most effective way to alter the font within this Bootstrap template?

Check out the source code on Github. I've been attempting to modify the font-family for both h1 and body elements, but it's not working as expected. I must be overlooking something simple, but I can't seem to pinpoint the issue. It's d ...

javascript Incorrectly using location.reload will not refresh the page as intended

My goal is to refresh a page every time a user clicks a button so the page reverts back to its original source code. However, I am facing an issue where the location.reload() function is being executed after the code instead of at the beginning. btn.addEve ...

Azure experiencing issue with MUI Datepicker where selected date is shifted by one day

I have developed a unique custom date selection component that utilizes Material UI and Formik. This component passes the selected date value to a parent form component in the following manner: import React from 'react'; import { useField } from ...

Error occurs in IE6 when trying to remove the "selected" attribute using the removeAttr()

When working with two listboxes where items are moved from the first to the second, how can I prevent selection in the second listbox once an item is added? This is the code snippet I used: $("#<%=lbCommcatTo.ClientID%> option").removeAttr("selecte ...

Fetching information from WebMethod with Jquery Ajax in c#

I have a jQuery variable that contains the following values: var data = [['Vikas', 75], ['Sumit', 55], ['Rakesh', 96], ['Shivam', 123], ['Kapil', 34], ['Rana', 104]]; Now, according to my requir ...

The equation:() is malfunctioning

Here is a code snippet I'm working with: $("#button").click(function () { for (var i = 0; i < 4; i++) { setTimeout(function () { $(".rows:eq("+i+")").css("background-color", "blue"); ...