Issue with transition delays on specific elements within a containing element

I'm currently developing an intro animation for a website, where the children are supposed to slide up from the bottom (margin-top: 80px). The container is set with a fixed height and overflow:hidden to create a smooth appearance.

Each child has a transition-delay applied to show them one after another, but unfortunately, all the elements are appearing together.

If anyone could provide assistance with this code, it would be greatly appreciated.

setTimeout(function() {
  $('.anim_line').addClass('show');
}, 1400);
.container {
  height: 100%;
  width: 100%;
  background: #121212;
}


.anim_container {
  margin: 80px;
}

.anim_inner_container {
  position: relative;
  background-color: hsla(260, 91%, 84%, 1);
  background-image:
    radial-gradient(at 67% 61%, hsla(250, 67%, 53%, 1) 0px, transparent 40%),
    radial-gradient(at 34% -33%, hsla(249, 67%, 53%, 1) 0px, transparent 40%),
    radial-gradient(at 44% -15%, hsla(249, 67%, 53%, 1) 0px, transparent 40%);

  background-clip: text;
  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  font-family: 'Calibri';
  font-size: 64px;
  line-height: 96px;
}


.anim_line {
  height: 96px;
  width: 100%;
  overflow: hidden;
  text-overflow: clip;
}

.anim_word {
  display: inline-block;

  margin-top: 100%;


  transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -webkit-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -moz-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -ms-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -o-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
}


.anim_word span {}

.anim_line.show .anim_word {
  margin-top: 0%;
}

.anim_line:nth-child(1) .anim_word:nth-child(2) {
  transition-delay: .15s;
  -webkit-transition-delay: .15s;
}

.anim_line:nth-child(1) .anim_word:nth-child(3) {
  transition-delay: .25s;
  -webkit-transition-delay: .25s;
}

.anim_line:nth-child(1) .anim_word:nth-child(4) {
  transition-delay: .35s;
  -webkit-transition-delay: .35s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="container">
  <div class="anim_container">
    <div class="anim_inner_container">
      <div class="anim_line">
        <div class="anim_word">A</div>
        <div class="anim_word">product</div>
        <div class="anim_word">designer</div>
        <div class="anim_word">helping</div>
      </div>
      <div class="anim_line">
        <div class="anim_word">design</div>
        <div class="anim_word">beautiful,</div>
        <div class="anim_word"> user</div>
        <div class="anim_word">centered</div>
      </div>
      <div class="anim_line">
        <div class="anim_word">products</div>
      </div>
    </div>
  </div>
</div>

I've experimented with various display properties for the children, but haven't had any success so far.

javascripthtmljquerycssanimation

Answer №1

For optimal results, utilize CSS variables to accurately calculate delays for each text element.

.container {
  height: 100%;
  width: 100%;
  background: #121212;
}

.anim_inner_container {
  position: relative;
  height: 384px;
  font-family: 'Calibri';
  font-size: 64px;
  line-height: 96px;
}

.anim_line {
  height: 96px;
  width: 100%;
  overflow: hidden;
  text-overflow: clip;
}

.anim_word {
  display: inline-block;
  background-color: hsla(260, 91%, 84%, 1);
  background-image: radial-gradient(at 67% 61%, hsla(250, 67%, 53%, 1) 0px, transparent 40%), radial-gradient(at 34% -33%, hsla(249, 67%, 53%, 1) 0px, transparent 40%), radial-gradient(at 44% -15%, hsla(249, 67%, 53%, 1) 0px, transparent 40%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  animation: fadeInUp;
  animation-delay: calc(0.25s * var(--idx));
  animation-fill-mode: forwards;
  animation-duration: 1.15s;
  animation-timing-function: cubic-bezier(0.62, 0.05, 0.01, 0.99);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(70px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
<div class="container">
  <div class="anim_container">
    <div class="anim_inner_container">
      <div class="anim_line">
        <div class="anim_word" style="--idx: 0;">A</div>
        <div class="anim_word" style="--idx: 1;">product</div>
        <div class="anim_word" style="--idx: 2;">designer</div>
        <div class="anim_word" style="--idx: 3;">helping</div>
      </div>
      <div class="anim_line">
        <div class="anim_word" style="--idx: 4;">design</div>
        <div class="anim_word" style="--idx: 5;">beautiful,</div>
        <div class="anim_word" style="--idx: 6;"> user</div>
        <div class="anim_word" style="--idx: 7;">centered</div>
      </div>
      <div class="anim_line">
        <div class="anim_word" style="--idx: 8;">products</div>
      </div>
    </div>
  </div>
</div>

Answer №2

If you want to create 3 sequential animations for each element with varying delays, you must define an animation for every individual element. Revision: Each specific animation. Revision 2: Corrected alignment of animated words. Revision 3: Adjusted animation positioning.

Sample code:

.container {
        height: auto;
        width: 100%;
        background: #121212;
      }

      .anim_container {
        margin: 80px;
      }

      .anim_inner_container {
        position: relative;
        background-color: hsla(260, 91%, 84%, 1);
        background-image: radial-gradient(at 67% 61%, hsla(250, 67%, 53%, 1) 0px, transparent 40%), radial-gradient(at 34% -33%, hsla(249, 67%, 53%, 1) 0px, transparent 40%),
          radial-gradient(at 44% -15%, hsla(249, 67%, 53%, 1) 0px, transparent 40%);
          (....continued styling)

      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <div class="container">
      <div class="anim_container">
        <div class="anim_inner_container">
          <div class="anim_line">
            <div class="anim_word"><div style="--idx: 0">A</div></div>
            <div class="anim_word"><div style="--idx: 1">product</div></div>
            <div class="anim_word"><div style="--idx: 2">designer</div></div>
            <div class="anim_word"><div style="--idx: 3">helping</div></div>
          </div>
          <div class="anim_line">
            <div class="anim_word"><div style="--idx: 4">design</div></div>
            <div class="anim_word"><div style="--idx: 5">beautiful,</div></div>
            <div class="anim_word"><div style="--idx: 6">user</div></div>
            <div class="anim_word"><div style="--idx: 7">centered</div></div>
          </div>
          <div class="anim_line">
            <div class="anim_word"><div style="--idx: 8">products</div></div>
          </div>
        </div>
      </div>
    </div>

Answer №3

You have two key considerations to keep in mind here. First, ensure that the transition delay is declared immediately after the transition itself for it to function correctly. Second, within your ".anim_inner_container" class, you are using a line-height of 96px, so the minimum height should be set to 384px.

setTimeout(function() {
    $('.anim_line').addClass('show');
  }, 1400);
.container {
  height: 100%;
  width: 100%;
  background: #121212;
}


.anim_container {
  margin: 80px;
}

.anim_inner_container {
  position: relative;
  background-color: hsla(260, 91%, 84%, 1);
  background-image:
    radial-gradient(at 67% 61%, hsla(250, 67%, 53%, 1) 0px, transparent 40%),
    radial-gradient(at 34% -33%, hsla(249, 67%, 53%, 1) 0px, transparent 40%),
    radial-gradient(at 44% -15%, hsla(249, 67%, 53%, 1) 0px, transparent 40%);

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  height: 384px;
  font-family: 'Calibri';
  font-size: 64px;
  line-height: 96px;
}


.anim_line {
  height: 100%;
  width: 100%;
  overflow: hidden;
  text-overflow: clip;
}

 .anim_word {
  display: inline-block;
  margin-top: 100%;
}


.anim_line.show:nth-child(1) .anim_word:nth-child(1) {
  display: block;
...
            </div>
          </div>
        </div>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

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

AngularJS: Advanced Routing for Dynamic Web Applications

Hello, I am currently exploring the possibility of implementing something similar to this code snippet using AngularJS: $routeProvider .when('/root/:controllerName/blah/:blahId/blah/:blah', { templateUrl: '/tmpl/:controllerName ...

javascriptangularjstemplatescontrollersangularjs-routing

React re-rendering only when arrays are filtered, and not when new elements are added

I need help with a table simulation where I can add and remove products. The issue I'm facing is that the component only updates when an item is removed, not when a new row is added. Currently, I am utilizing the useState hook. Below is my array data ...

javascriptarraysreactjs

Sending a jQuery form to a node.js connect-form involves passing the form data through AJAX to

On the server side, I have implemented the following function as an expressjs middleware: function objCreation(req, res, next){ req.form.complete(function(err, fields, files){ if (err) { next(err); } else { // Set params in request ...

javascriptjquerynode.jsexpress

Tips for avoiding Bootstrap collapse overflow within a container that has overflow-y-scroll

I'm currently facing an issue with a container that has the overflow-y-scroll CSS property. Inside this container, there's a Bootstrap collapse button that expands to show more content when clicked. The problem arises when the expanded content ov ...

htmlcssscrollbaroverflowbootstrap-5

The usage of Angular Tap is no longer recommended or supported

My Angular application contains the following HTTP interceptor: import { Observable } from 'rxjs'; import { Injectable } from '@angular/core'; import { HttpInterceptor, HttpResponse } from '@angular/common/http'; ...

javascriptangulartypescriptrxjsangular-material

When opening a dialog at the bottom of the page, the window will automatically scroll to the top

I'm encountering an issue with a page that has a width exceeding 100% (2000px). Whenever I click to display a dialog from a button located at the end of the horizontal page, the window automatically scrolls back to the beginning of the page before sho ...

javascripthtmlcssangularjsangular-material

Hide the search results if the user leaves the input field blank

I am trying to implement Live Search JSON Data Using Ajax jQuery, and I want to be able to search through multiple JSON files. When the page initially loads with an empty input field, no results are displayed. However, if you type and then delete text in ...

javascripthtmljqueryjsonajax

React in 2022 has encountered an unexpected expression when it was expecting either an assignment or function call

I am having difficulty updating a chart with values received from an API. I am unsure about how to adjust the useEffect hook in my code. Any advice would be greatly appreciated. Here is a snippet of my code: import React, { useEffect, useState } from &quo ...

javascriptreactjs

Instructions for selecting all checkboxes in an HTML table with just one click

Developing an aspx page with 3 HTML tables, I am dynamically adding checkboxes to each cell. Additionally, I have a checkbox outside each table. When I check this checkbox, I want all checkboxes in the corresponding HTML table to be checked. However, curre ...

javascriptc#jqueryhtmlasp.net

What is causing the sorting table to fail in React when using useState?

import React, { useState } from "react"; import "./App.css"; const App = () => { const [data, setData] = useState([ { rank: 1, name: "John", age: 29, job: "Web developer", }, { rank: 2, name: "Micha ...

javascriptreactjs

Synchronous AJAX requests do not function properly in IE and Firefox, but they do work in Chrome and Safari

Attempting to measure download speed using an AJAX call. Below is the code snippet: var start = new Date(); $.ajax ({ url: 'https://www.example.com/perftest/dummyFile1024', cache: false, success : function() { var total = ( ...

javascriptajaxjqueryasynchronous

Troubleshooting the Timepicker import issue in ant design version 5.0.3

After updating ant design to version 5.0.3, I encountered the Uncaught Error: Cannot find module 'antd/lib/time-picker/style' at webpackMissingModule issue. Any suggestions on how to resolve this? I am seeking a solution for the error coming fro ...

javascriptreactjsfrontendantdtimepicker

Utilize visuals to select premade designs

I am looking to enhance the user experience in selecting templates on Wordpress by integrating images for a visual preview. Instead of a traditional text-based dropdown menu, users would be able to see what the template looks like before choosing it. EDIT ...

htmlcsswordpress

What is the process for generating a collection of objects in a Mongoose Model?

I am currently working on creating a structure similar to this: var User = mongoose.model('Clicker', totalClicks: [ {type: Number, default: 0}, {type: Number, default: 0} ], I have explored various documentation resources related to ...

javascriptarraysnode.jsmongodbmongoose

SQL injection for storing hidden dates

When I submit a value using my form, I want the date to be saved in the MySQL database. The user does not need to see it, but I need the dates for a future function where I can loop through the registered dates in the database. Do I need to create a hidde ...

htmldatemysqli

Delete the placeholder image from a div once live content has been inserted into it

If I have a container div that displays an image when empty, but I want to remove the image when content is dynamically added to the container, what would be the most effective way to do this with jQuery? The usual method of checking if the container' ...

javascriptjqueryhtmlcss

Discovering the mean value from a data set in a spreadsheet

I have been tasked with creating an HTML page for a car dealership using JQuery and Bootstrap 5. The goal is to utilize Bootstrap 5 to accomplish the following: Set up a table with appropriate form input elements that allow users to input four (4) quarter ...

javascripthtmljqueryaveragebootstrap-5

Utilize Vuetify to showcase a vertical layout consisting of a header and a v-card, occupying the full height

<template> <div> <div style="height: 20px; color: yellow"> test </div> <v-card class="markdown-preview" tile> <v-card-text v-html="previewText"> </v-card-text> ...

javascripthtmlcssvue.jsvuetify.js

Encountered an issue while trying to use Figma's spellchecker extension

Despite following the instructions in the readme carefully, I am facing difficulties running the Figma spellchecker extension. Executing npm run build goes smoothly. But when I try to run npm run spellcheck, I encounter an error message in the console: co ...

javascriptnpmfigma-api

Track your status with jQuery technology

I have a link: <a href="/test/number/3/phone/0">33df</a> Is there a way to determine if the words 'number' and 'phone' are present in this link? I am looking for a function similar to: check('number', ' ...

javascriptjqueryhtml