CODEWITHSUNDEEP
jqueryhtmlcss
Chaibi Alaa
Chaibi Alaa

Reputation: 1386

Linear-gradient animate In and out

I'm trying to get an animated text background color using linear gradient background color and animation. I'm trying to get this exact animation https://happy-online.nl/ (first text first animation). The problem is that the second part (the color leaving text) is not running the right way. the first is almost running as expected (getting the yellow bar above text)

What I'm doing now is simple :

Both effect are almost exactly the same, the first should get into the text with yellow color, from left to right, and the second should get into the text with black color, so that the text become visible (it starts transparent)

<script>
        $(document).ready(function () {
            $('.fadeIn').fadeIn({queue: false, duration: 'slow'})
                .css({top:200,position:'absolute'})
                .animate({top:0}, 1000, function() {});

            setTimeout(function() {
                $('.animate-text').addClass('get-in-effect')
            }, 500);
            setTimeout(function() {
                $('.animate-text').addClass('get-out-effect')
            }, 1500);

        });
    </script>

And the css : 

.animate-text {
    background-color: black;
    background-size: 200% 100%;
    background-position: right bottom;
    color: transparent;
}
.get-in-effect {
    background: linear-gradient(to right, #f6cf35 50%, black 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all .5s ease-out;
}
.get-out-effect {
    background: linear-gradient(to left, #f6cf35 50%, black 50%);
    transition: all .5s ease-out;
    background-size: 200% 100%;
    background-position: left bottom;
    color: #f6cf35;
}

Finally, my HTML :

<h1 style="color:#f6cf35"><span class="animate-text">test</span>  </h1>

Here is a fiddle with my current code https://jsfiddle.net/chaibialaa/vxjL6ow0/3/

Thank you

Upvotes: 1

Views: 166

Answers (1)

Miles Grover
Miles Grover

Reputation: 609

Try this.

$(document).ready(function () {
  $('.fadeIn').fadeIn({queue: false, duration: 'slow'})
    .css({top:200,position:'absolute'})
    .animate({top:0}, 1000, function() {});
  setTimeout(function() {
    $('.animate-text').addClass('get-in-effect')
  }, 500);
  setTimeout(function() {
    $('.animate-text').removeClass('get-in-effect')
    $('.animate-text').addClass('between')
  }, 1000);
  setTimeout(function() {
    $('.animate-text').addClass('get-out-effect')
  }, 1500);
});

.animate-text {
    background-color: black;
    background-size: 200% 100%;
    background-position: right bottom;
    color: transparent;
}
.get-in-effect {
    background: linear-gradient(to right, #f6cf35 50%, black 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    transition: all 0.5s ease-out;
}
.between {
  background-color: #f6cf35;
}
.get-out-effect {
    background: linear-gradient(to right, black 50%, #f6cf35 50%);
    transition: all 0.5s ease-out;

    background-size: 200% 100%;
    background-position: left bottom;
    color: #f6cf35;
}

The transition doesn't seem to want to run again unless you take the first class back off again. And in order to have it have the yellow background (instead of reverting to the black) you can add another class in between that sets the background-color.

Upvotes: 2

Related Questions