CODEWITHSUNDEEP
jqueryhtmlcsssass
Marius Gardelli
Marius Gardelli

Reputation: 89

Animating certain elements after others have finished their animation

I'm trying to build a landing page with some neat animations.

I want my span elements to show only after my content div finishes its animation.

Any idea how I can tackle this?

Here is my code and a link to CodePen:

PUG:

div.landing-page
  div.content
    span J
    span H
  input(type='button' id='button' value='click')

SASS:

html
  background: gray
  .landing-page
    .content
      width: 200px
      height: 2px
      background: black
      position: absolute
      left: 50%
      top: 50%
      transform: translate(-50%,-50%)
      animation: fade 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards
      span
        color: white
    .animated
      animation: grow 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards
    input#button
      position: absolute
      left: 50%
      top: 48%
      transform: translate(-50%,-50%)

@keyframes fade
  0%
    opacity: 0
  100%
    opacity: 1
@keyframes grow
  0%
    width: 0%
  70%
    width: 100%
    height: 2px
  100%
    width: 100%
    height: 100%

jQuery:

$(document).ready(function() {
    $('#button').click(function() {
        $(this).remove();
        $('.content').addClass('animated');
    });
});

Upvotes: 2

Views: 80

Answers (2)

Hans Dash
Hans Dash

Reputation: 761

you could add 

overflow: hidden

to .content in css. This would hide the span until there is enough space for it, after the animation is finished.

Upvotes: 2

Kosem
Kosem

Reputation: 373

One option would be to uset settimeout. This function triggers any js function or command aftger X miliseconds. So you just need to time it. Again, not the most beautiful way, but would work. for example:

setTimeout( FunctioName, 2000);

do note that function name without the () => only the name.

Upvotes: 1

Related Questions