I'm trying to create a little intro animation for a website. I want it to smoothly transition to a white BW logo after the animation plays out.
What i'm struggling with is once the full word is removed, I want the B and W letters to come slide together to form a small BW after the rest of the word fades out. right now I can't seem to get the container to shrink down smoothly and force the BW right next to eachother.
I have a codepen started for reference. https://codepen.io/patstantpen/pen/eYExopN
$(document).ready(function () {
$(".title").click(function () {
$(".letter").css("color", "white");
setTimeout(function () {
$(".reak, .orld").css("opacity", "0");
}, 1400);
});
});* {
font-family: "Montserrat";
font-weight: bold;
font-size: 35px;
height: 100%;
}
body {
text-align: Center;
height: 100%;
background-color: #f7a21b;
}
.wrapper {
display: flex;
justify-content: center;
height: 100%;
}
.title {
height: 100px;
align-self: center;
color: #a71e29;
height: 50px;
transition: width 1.4s ease;
}
.letter {
transition: color 1.4s ease;
}
.reak,
.orld {
transition: opacity 1.4s ease;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">
<body>
<div class='wrapper'>
<div class='title'>
<span class='letter'>B</span><span class='reak'>REAKFAST</span> <span class='letter'>W</span><span class='orld'>ORLDWIDE</span>
</div>
</div>
</body>I guess another more broad question is would this be better made as a mp4 or gif and played instead of doing it with js?
You need to use animate() to bring both the width AND the opacity to 0.
https://api.jquery.com/animate/
And you need to use vertical-align rule to top to fix you text on top.
https://www.w3schools.com/cssref/pr_pos_vertical-align.asp
$(document).ready(function () {
$(".title").click(function () {
$(".letter").css("color", "white");
setTimeout(function () {
$(".reak, .orld").animate({'width': 0, 'opacity': 0}, 1000, function () {
$(this).hide();
});
}, 1400);
});
});* {
font-family: "Montserrat";
font-weight: bold;
font-size: 35px;
height: 100%;
}
body {
text-align: Center;
height: 100%;
background-color: #f7a21b;
}
.wrapper {
display: flex;
justify-content: center;
height: 100%;
}
.title {
height: 50px;
align-self: center;
color: #a71e29;
transition: width 1.4s ease;
}
.letter {
transition: color 1.4s ease;
}
.reak,
.orld {
vertical-align: top;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">
<body>
<div class='wrapper'>
<div class='title'>
<span class='letter'>B</span><span class='reak'>REAKFAST</span> <span class='letter'>W</span><span class='orld'>ORLDWIDE</span>
</div>
</div>
</body>You actually can do pretty much everything just with CSS:
$(document).ready(function () {
$('.title').click(function () {
$('.title').addClass('join');
});
});* {
font-family: "Montserrat";
font-weight: bold;
font-size: 35px;
height: 100%;
}
body {
text-align: center;
background-color: #f7a21b;
margin: 0;
}
.wrapper {
display: flex;
justify-content: center;
}
.title {
align-self: center;
color: #a71e29;
height: 50px;
cursor: pointer;
}
.letter,
.reak,
.orld {
white-space: pre;
display: inline-block;
max-width: 500px; /* needs to be set manually to a sensible value =( */
transition: color 1.4s ease,
opacity 1.4s ease 1.4s,
max-width 1.4s ease 2.8s;
}
.join .letter {
color: white;
}
.join .reak,
.join .orld {
opacity: 0;
max-width: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">
<body>
<div class="wrapper">
<div class="title">
<span class="letter">B</span><span class="reak">REAKFAAAST </span><span class="letter">W</span><span class="orld">ORLDWIDE</span>
</div>
</div>
</body>I added more As to make the effect of the two letters joining together a bit more visible.