I am trying to have the red cover background slide to the left and stop at approximately 50%, so the left col-6 background stays red and right col-6 is clear. Currently I am triggering this via button event but will eventually do it automatically on page load. I am rotating right now 90 degrees. How can I perform this slide animation via css transform/animation? I am new to css animation and not sure if I'm going about this at the right way. Is there a better approach to this type of reveal animation?
I am trying to follow this demo seen online: https://dribbble.com/shots/3428458-Jobs-Page-Motion-Design#
.get-app-wrap {
overflow: hidden;
}
.get-app-wrap .animate-wrap {
position: relative;
}
.get-app-wrap .animate-wrap::after {
content: "";
position: absolute;
width: 150%;
height: 150%;
background-color: #d4272e;
top: 0;
left: 0;
bottom: 0;
transform: rotate(0deg);
transform-origin: 0px 0px;
transition: transform linear 0.7s;
}
.get-app-wrap .animate-wrap.animated::after {
transform: rotate(90deg);
}
.get-app-wrap .app-texts {
color: #000;
}
.get-app-wrap .app-texts .app-text-padding {
padding-right: 11rem;
padding-left: 11rem;
}
.get-app-wrap .app-texts hr {
color: #000;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="./Library/bower_components/slick-carousel/slick/slick.min.js"></script>
<script src="./index.js"></script>
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick.css" />
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<div class="get-app-wrap mt-5">
<div class="row animate-wrap">
<div class="col-sm-6 pr-0">
<div class="app-texts ">
<div class="app-text-padding pt-5 pb-5">
<h1>App headline here</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure velit, dolore necessitatibus laboriosam
quis nobis culpa quia quod nostrum, modi aperiam, dolor iste voluptatibus minus? Rem nam expedita
aperiam autem!</p>
<h3 class="">Sub Headline Here</h3>
<ul>
<li> Modi tempora incidunt ut labore et dolore </li>
<li> Modi tempora incidunt ut labore et dolore </li>
<li> Modi tempora incidunt ut labore et dolore </li>
</ul>
<hr class="pr-0">
<div>
<h3 class="">Get the Apps</h3>
<div class="row">
<div class="col-sm-3"><img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1"
alt="" class="img-fluid"></div>
<div class="col-sm-3">
<img src="https://www.dropbox.com/s/zff1d2lef3tcbby/Google-play.png?dl=1"
alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 ">
<div class="app-image text-center pt-3">
<img src="https://www.dropbox.com/s/d64hd177n2vmjvn/iphone.png?dl=1" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
<button id="reveal-button">Reveal</button>
<script>
$("#reveal-button").on('click', function() {
$(".animate-wrap").toggleClass('animated');
});
</script>
</body>
</html>Instead of rotate you should use the scaleX property
.get-app-wrap .animate-wrap.animated::after {
transform: scaleX(.32);
}
Here you have a codepen, let me know if that help!
You can add a class to the div with the text, for example .show-text
<div class="row animate-wrap">
<div class="col-sm-6 show-text pr-0">
And then this
.col-sm-6.show-text{
z-index: 2;
}