Performance issues with translate3d transform transition? - html

the two css classes are,
.slideOut {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all 0.3s ease;
-webkit-backface-visibility: hidden;
-webkit-transition: transform 0.3s ease;
transform: translate3d(100%, 0, 0);
-webkit-transform: translate3d(100%, 0, 0);
}
.slideIn {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transition: all 0.3s ease;
}
I have not seen any flickering in chrome browser and not even in iphone but when I run the application on some android devices like Samsung s3, the view flickers when the height of the view exceeds the height of the devices.
What can be done to remove this issue.
Thanks for any help.

Related

sliding panels from offscreen

I have an idea where I have a brain in the middle of the page and if they click the left brain the content would slide right revealing a new page on the left and if they click on the right brain the content would scroll/slide left and you would see the page offscreen to the right.
I have a mock up of the full width here if you manually horizontally scroll. For the real thing I don't want the user to be able to scroll but the JS to handle that.
http://shawnwow.com/revised/
I am figuring I can just offset the site -100vw initially and if they choose left side then its offset by 0 and its the right it would be offset by -200vw. I can probably figure out the jQuery to change the class but having some issues getting the CSS to work.
Here is the code base if that helps.
https://github.com/shellwe/shawnwow/tree/2018-site-revision

Have a look at this fiddleJS - https://jsfiddle.net/darrendiscovr/79kh2cq1/. Snippet below shows the result but to keep within the character limit I minified the code. See the fiddleJS for unminified.
This could be a good starting point. I think your page would be much better served like this, using the main content with panels that slide left or right.
I have currently only had the time to overlap the panels, but you should easily be able to extend this by adding Jquery addClass to the main page content to push with the sliding panels.
Where credit is due, I used Codyhouse to replicate your page using one of their demonstrations of sliding panels. It is a great tool when looking for inspiration to JS and CSS transitions. I also recommend Codrops as a source of inspiration.
jQuery(document).ready(function($) {
$('.right-brain-btn').on('click', function(event) {
event.preventDefault();
$('.right-brain-panel').addClass('is-visible');
});
$('.right-brain-panel').on('click', function(event) {
if ($(event.target).is('.right-brain-panel') || $(event.target).is('.closebrain')) {
$('.right-brain-panel').removeClass('is-visible');
event.preventDefault();
}
});
$('.left-brain-btn').on('click', function(event) {
event.preventDefault();
$('.left-brain-panel').addClass('is-visible');
});
$('.left-brain-panel').on('click', function(event) {
if ($(event.target).is('.left-brain-panel') || $(event.target).is('.closebrain')) {
$('.left-brain-panel').removeClass('is-visible');
event.preventDefault();
}
});
});
body{margin: 0;}#center-page{height: 100vh; width: 100vw; display: flex; align-items: center;}#center-page>div{flex: 0 1 auto; width: 50%;}#center-page #left-side{background-color: rgba(255, 0, 0, 0.25); transition: background-color 1s;}#center-page #left-side:hover{background-color: rgba(255, 0, 0, 0.5); transition: background-color 1s;}#center-page #left-side #left-brain svg{margin-left: auto; margin-right: 1%;}#center-page #left-side #left-brain svg *{fill: red;}#center-page #right-side{background-color: rgba(0, 0, 255, 0.25); transition: background-color 1s;}#center-page #right-side:hover{background-color: rgba(0, 0, 255, 0.5); transition: background-color 1s;}#center-page #right-side #right-brain svg{margin-left: 1%; margin-right: auto;}#center-page #right-side #right-brain svg *{fill: blue;}#center-page .either-side:hover .brain-image svg{height: 85%; transition: height 1s;}#center-page .brain-image{height: 100vh; display: flex; align-items: center;}#center-page .brain-image svg{height: 75%; transition: height 1s;}#center-page .brain-image svg *{width: 100%; height: 100%;}.right-brain-panel{position: fixed; top: 0; left: 0; height: 100%; width: 100%; visibility: hidden; -webkit-transition: visibility 0s 0.6s; -moz-transition: visibility 0s 0.6s; transition: visibility 0s 0.6s;}.right-brain-panel::after{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; cursor: pointer; -webkit-transition: background 0.3s 0.3s; -moz-transition: background 0.3s 0.3s; transition: background 0.3s 0.3s;}.right-brain-panel.is-visible{visibility: visible; -webkit-transition: visibility 0s 0s; -moz-transition: visibility 0s 0s; transition: visibility 0s 0s;}.right-brain-panel.is-visible::after{background: rgba(0, 0, 0, 0.6); -webkit-transition: background 0.3s 0s; -moz-transition: background 0.3s 0s; transition: background 0.3s 0s;}.left-brain-panel{position: fixed; top: 0; right: 0; height: 100%; width: 100%; visibility: hidden; -webkit-transition: visibility 0s 0.6s; -moz-transition: visibility 0s 0.6s; transition: visibility 0s 0.6s;}.left-brain-panel::after{position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: transparent; cursor: pointer; -webkit-transition: background 0.3s 0.3s; -moz-transition: background 0.3s 0.3s; transition: background 0.3s 0.3s;}.left-brain-panel.is-visible{visibility: visible; -webkit-transition: visibility 0s 0s; -moz-transition: visibility 0s 0s; transition: visibility 0s 0s;}.left-brain-panel.is-visible::after{background: rgba(0, 0, 0, 0.6); -webkit-transition: background 0.3s 0s; -moz-transition: background 0.3s 0s; transition: background 0.3s 0s;}.brain-container{position: fixed; width: 100%; height: 100%; top: 0; background: #dbe2e9; z-index: 1; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s;}.from-right .brain-container{right: 0; background: #c8c4fc; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}.from-left .brain-container{left: 0; background: #f5c3c1; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}.is-visible .brain-container{-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s;}.brain-content{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 70px 5%; overflow: auto; -webkit-overflow-scrolling: touch;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="center-page"> <div id="left-side" class="either-side"> <div id="left-brain" class="brain-image"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22.3 51.2" style="enable-background:new 0 0 22.3 51.2;" xml:space="preserve"><g><path d="M10.7,39.1c0.2,0.3,0.3,0.6,0.3,1c0,0.5-0.2,1-0.6,1.4c-0.2,0.2-0.2,0.5,0,0.7s0.5,0.2,0.7,0c0.6-0.6,0.9-1.3,0.9-2.1c0-0.5-0.1-1-0.4-1.5l0.3-0.2c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0l-0.2,0.2c-0.3,0.3-0.7,0.4-1.2,0.4l-0.2,0l-0.2,0c-0.3-0.1-0.6-0.2-0.9-0.5c-0.1-0.1-0.2-0.2-0.3-0.4c-0.2-0.3-0.3-0.6-0.3-1c0-0.5,0.2-1,0.5-1.3l0,0c0.2-0.2,0.2-0.5,0-0.7l0,0l0,0c-0.2-0.2-0.5-0.2-0.7,0l0,0c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-1-0.2-1.4-0.6s-0.6-0.9-0.6-1.4c0-0.5,0.2-1,0.6-1.4c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0c-0.6,0.6-0.9,1.3-0.9,2.1c0,0.7,0.3,1.5,0.9,2.1c0.6,0.6,1.3,0.9,2.1,0.9c0.2,0,0.4,0,0.5-0.1c0,0.2-0.1,0.4-0.1,0.5c0,0.5,0.1,1,0.4,1.5c0.1,0.2,0.3,0.4,0.4,0.6l0.2,0.2c0.5,0.5,1.2,0.7,1.9,0.7C10.1,39.2,10.4,39.2,10.7,39.1z"></path><path d="M21.8,3.5c-0.9-2.1-3-3.5-5.3-3.5c-1.3,0-2.5,0.4-3.5,1.1l0,0c0,0-3.3,2.5-6.5,7.4C6.2,8.9,5.9,9.3,5.7,9.8l0,0.1c-1.4,2.3-2.7,5-3.8,8.2c-0.2,0.5-0.3,0.9-0.4,1.4c-0.5,1.6-0.8,3.4-1.1,5.3c-0.1,0.5-0.1,0.9-0.2,1.4c0,0.5-0.1,1-0.1,1.5c0,0.1,0,0.2,0,0.3C0,28.7,0,29.5,0,30.3c0,0.7,0,1.5,0.1,2.3l0,0l0,0.1c0,0.4,0,0.7,0.1,1.1l0,0c0.4,2.6,1.5,6.9,4.3,10.7c0.9,1.2,2,2.4,3.3,3.4C8,47.9,8.1,48,8.3,48.2C8.2,48.1,8.1,48,8,47.9c0.1,0.1,0.2,0.2,0.4,0.3l0,0l0.1,0.1l0,0l0,0l0.1,0l0.1,0l-0.1,0c0.1,0.1,0.2,0.1,0.3,0.2l-0.1,0l-0.1-0.1c0.1,0.1,0.2,0.2,0.3,0.2c2.5,1.6,5.8,2.7,9.8,2.7c1,0,1.9-0.4,2.5-1c0.2-0.2,0.4-0.4,0.5-0.7v0c0,0,0.5-0.8,0.5-1.5s0-35.5,0-35.5s0.1-5.6,0.1-6.6C22.4,4.4,21.8,3.5,21.8,3.5z M8.9,6.9c-0.1,0.3-0.2,0.7-0.2,1c0,0.2,0,0.4,0.1,0.6c-0.2,0-0.4-0.1-0.6-0.1c-0.1,0-0.3,0-0.4,0C8.1,7.9,8.5,7.4,8.9,6.9z M5.4,12.3c0.1,0.4,0.4,0.8,0.7,1.1c0.2,0.2,0.5,0.2,0.7,0s0.2-0.5,0-0.7c-0.4-0.4-0.6-0.9-0.6-1.4c0-0.3,0.1-0.7,0.3-1l0-0.1c0.1-0.1,0.1-0.2,0.2-0.3c0.4-0.4,0.9-0.6,1.4-0.6c0.5,0,1,0.2,1.4,0.6l0.2,0.1c0.5,0.4,1.2,0.7,1.9,0.7c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9c0.3,0,0.5-0.2,0.5-0.5S11.9,5,11.6,5C11,5,10.5,5.2,10,5.5c0.6-0.7,1.1-1.3,1.6-1.8c0.6-0.6,1.1-1.1,1.4-1.4c0.2-0.1,0.3-0.3,0.4-0.3L13.5,2l0,0c0.5-0.3,1-0.6,1.6-0.8c-0.4,0.5-0.7,1.1-0.7,1.8v0c-0.4-0.2-0.9-0.4-1.4-0.4c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5c1,0,1.8,0.8,1.8,1.8c0,1-0.8,1.8-1.8,1.8l-0.2,0c-0.4,0.1-0.9,0.3-1.2,0.6c-0.2,0.2-0.2,0.5,0,0.7s0.5,0.2,0.7,0c0.3-0.3,0.6-0.4,1-0.4s0.7,0.1,1,0.4s0.4,0.6,0.4,1s-0.1,0.7-0.4,1c-0.2,0.2-0.2,0.5,0,0.7c0.2,0.2,0.5,0.2,0.7,0c0.3-0.3,0.5-0.7,0.6-1.1c0.5,0.4,1.1,0.6,1.7,0.6c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9l0,0c0.9,0.2,1.8,0.7,2.4,1.3c0.9,0.9,1.4,2.1,1.4,3.4V12l0,0.1v0c0,1.2-1,2.2-2.2,2.2h0l-0.2,0.1c-0.2,0.1-0.3,0.3-0.3,0.5c0,0.3,0.2,0.5,0.5,0.5v0c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2h0c-0.3,0-0.5,0.2-0.5,0.5c0,0.3,0.2,0.5,0.5,0.5v0h0l0,0c0.9,0,1.7-0.4,2.3-1v0.9v4.3v0.4c-0.4-1-1.4-1.7-2.6-1.7c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5c1,0,1.8,0.8,1.8,1.8c0,1-0.8,1.8-1.8,1.8c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5c1.2,0,2.2-0.7,2.6-1.7v1.3v0.6v0.1c-0.1,1.1-1,2.1-2.2,2.1c-1.2,0-2.2-1-2.2-2.2l0,0l0,0c0-1.6-1.3-2.9-2.9-2.9c-0.1,0-0.2,0-0.3,0c0.1-0.3,0.1-0.5,0.1-0.8c0-0.6-0.2-1.1-0.5-1.6c0.2-0.2,0.4-0.5,0.5-0.8c0.2-0.4,0.2-0.8,0.2-1.2c0-0.2,0-0.3,0-0.5l0-0.1c0-0.1,0-0.2,0-0.3c0-0.4,0.2-0.9,0.4-1.2c0,1,0.5,1.8,1.2,2.3c-0.7,0.5-1.2,1.2-1.2,2.1c0,1.4,1.1,2.5,2.5,2.5c0.3,0,0.5-0.2,0.5-0.5S17.3,26,17,26c-0.8,0-1.5-0.7-1.5-1.5c0-0.8,0.7-1.5,1.5-1.5l0.2-0.1l0.1,0c0.2,0,0.4-0.2,0.5-0.4l0-0.1c0-0.3-0.2-0.5-0.5-0.5c-1.1,0-1.9-0.9-1.9-1.9c0-1,0.8-1.9,1.9-1.9l0,0c0.3,0,0.5-0.2,0.5-0.5v0l0,0c0-0.3-0.2-0.5-0.5-0.5l0,0c-1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9h0c1.6,0,2.9-1.3,2.9-2.9c0-1-0.5-1.9-1.3-2.4c0.8-0.5,1.3-1.4,1.3-2.4c0-1.6-1.3-2.9-2.9-2.9c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5c1.1,0,1.9,0.9,1.9,1.9c0,1.1-0.9,1.9-1.9,1.9c-0.3,0-0.5,0.2-0.5,0.5c0,0.3,0.2,0.5,0.5,0.5l0,0h0c1.1,0,1.9,0.9,1.9,1.9c0,1.1-0.9,1.9-1.9,1.9h0c-0.9,0-1.6,0.4-2.2,1c-0.1-0.3-0.3-0.6-0.6-0.8c-0.6-0.6-1.3-0.9-2.1-0.9c-0.6,0-1.3,0.2-1.8,0.6c-0.1-0.4-0.4-0.8-0.7-1.1c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7c0.4,0.4,0.6,0.9,0.6,1.4c0,0.5-0.2,1-0.6,1.4s-0.9,0.6-1.4,0.6c-0.5,0-1-0.2-1.4-0.6l-0.1,0C6.3,14.4,6.2,14.2,6,14c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7c0.3,0.3,0.5,0.7,0.5,1.2c0,0.4-0.2,0.8-0.5,1.2c-0.2,0.2-0.2,0.5,0,0.7s0.5,0.2,0.7,0c0.1-0.1,0.2-0.2,0.3-0.3l0.1-0.1c0.4-0.4,0.9-0.6,1.4-0.6s1,0.2,1.4,0.6c0.4,0.4,0.6,0.9,0.6,1.4s-0.2,1-0.6,1.4c-0.2,0.2-0.2,0.5,0,0.7l0,0l0,0c0.2,0.2,0.5,0.2,0.7,0c0.4-0.4,0.9-0.6,1.4-0.6s1,0.2,1.4,0.6c0.3,0.3,0.4,0.6,0.5,1l0,0.1c0,0.1,0,0.2,0,0.3c0,0.4-0.2,0.9-0.5,1.2c-0.5-0.4-1.1-0.6-1.7-0.6c-0.4,0-0.9,0.1-1.3,0.3c-0.1-0.5-0.4-1-0.8-1.4c-0.6-0.6-1.3-0.9-2.1-0.9c-0.3,0-0.5,0.1-0.8,0.1l0-0.2c0-0.3-0.1-0.7-0.2-1l0.2,0c0.7,0,1.4-0.3,2-0.8c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0c-0.4,0.4-0.8,0.5-1.3,0.5s-0.9-0.2-1.3-0.5c-0.1-0.1-0.3-0.2-0.4-0.1c-0.4-0.2-0.8-0.3-1.3-0.3l0,0C3.7,15.8,4.5,14,5.4,12.3z M9.8,16.6C9.6,16.3,9.3,16.2,9,16c0.4-0.1,0.8-0.4,1.1-0.7c0.6-0.6,0.9-1.4,0.9-2.2l0,0l0.2-0.1c0.4-0.4,0.9-0.6,1.4-0.6s1,0.2,1.4,0.6c0.4,0.4,0.6,0.9,0.6,1.4c0,0.3-0.1,0.7-0.3,1c-0.5-0.4-1.1-0.6-1.7-0.5c-0.7,0-1.5,0.3-2.1,0.9c-0.2,0.2-0.2,0.5,0,0.7s0.5,0.2,0.7,0c0.4-0.4,0.9-0.6,1.4-0.6s1,0.2,1.4,0.6s0.6,0.9,0.6,1.4c0,0.5-0.2,1-0.5,1.3l0,0c-0.3,0.3-0.5,0.6-0.6,0.9l0,0c-0.6-0.6-1.3-0.9-2.1-0.9c-0.2,0-0.4,0-0.6,0.1c0-0.2,0.1-0.4,0.1-0.6C10.7,17.9,10.4,17.2,9.8,16.6z M15.4,17.2c0.1,0.1,0.2,0.2,0.3,0.3c-0.1,0.1-0.2,0.2-0.3,0.2v0C15.4,17.6,15.4,17.4,15.4,17.2z M1.3,25.1c0.3-0.6,1-1.1,1.7-1.1C4.1,24,5,24.8,5,25.9c0,0.3,0.2,0.5,0.5,0.5S6,26.2,6,25.9C6,24.3,4.7,23,3.1,23c-0.5,0-1,0.2-1.5,0.4c0.3-1.6,0.7-3.1,1.1-4.5c0.1,0,0.2,0,0.4,0c0.5,0,1,0.2,1.4,0.6C4.8,19.7,5,20.2,5,20.7c0,0.3-0.1,0.6-0.2,0.8l-0.1,0.1c-0.1,0.1-0.1,0.2-0.1,0.3l-0.2,0.2c-0.2,0.2-0.2,0.5,0,0.7s0.5,0.2,0.7,0c0.2-0.2,0.3-0.4,0.4-0.6c0.4-0.3,0.8-0.4,1.2-0.4c0.5,0,1,0.2,1.4,0.6c0.4,0.4,0.6,0.9,0.6,1.4c0,0.5-0.2,1-0.6,1.4c-0.2,0.2-0.2,0.5,0,0.7s0.5,0.2,0.7,0c0.4-0.4,0.7-1,0.8-1.5c0.4-0.3,0.8-0.5,1.3-0.5c0.5,0,1,0.2,1.4,0.6c0.4,0.4,0.6,0.9,0.6,1.4s-0.2,1-0.6,1.4l-0.1,0.1c-0.7,0.5-1.1,1.3-1.1,2.3c0,1.1-0.9,1.9-1.9,1.9c-0.9,0-1.7-0.6-1.9-1.5c1.3-0.3,2.4-1.4,2.4-2.9c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5c0,1.1-0.9,1.9-1.9,1.9c-1.1,0-1.9-0.9-1.9-1.9c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5c0,0.6,0.2,1.1,0.5,1.6c-0.4,0.1-0.8,0.2-1.1,0.4c-0.4-0.8-1.1-1.4-2.1-1.6C1.2,26.6,1.2,25.8,1.3,25.1z M7.8,31.9l-0.1,0l0-0.1L7.8,31.9z M1,30.3c0-0.7,0-1.3,0-1.9c0.8,0.2,1.4,1,1.4,1.8c0,0.9-0.6,1.6-1.4,1.8C1,31.4,1,30.9,1,30.3z M7.2,42.5c0,0.6,0.2,1.2,0.5,1.6c-0.4,0.5-0.6,1.1-0.6,1.7l0,0.1c-0.7-0.7-1.3-1.4-1.9-2.1c-1-1.3-1.8-2.7-2.4-4.1c0.4-0.3,0.8-0.5,1.3-0.5c0.5,0,1,0.2,1.4,0.6c0.4,0.4,0.6,0.9,0.6,1.4c0,0.5-0.2,1-0.6,1.4c-0.2,0.2-0.2,0.5,0,0.7s0.5,0.2,0.7,0c0.6-0.6,0.9-1.3,0.9-2.1c0-0.7-0.3-1.5-0.9-2.1c-0.6-0.6-1.3-0.9-2.1-0.9c-0.6,0-1.2,0.2-1.7,0.6c-0.2-0.5-0.3-0.9-0.5-1.4c0.4,0.2,0.8,0.3,1.2,0.3c0.7,0,1.5-0.3,2.1-0.9c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0c-0.4,0.4-0.9,0.6-1.4,0.6c-0.5,0-1-0.2-1.4-0.6c-0.1-0.1-0.3-0.3-0.4-0.5c-0.1-0.3-0.1-0.6-0.2-0.9c-0.1-0.4-0.1-0.7-0.2-1c0-0.2,0-0.4,0-0.6c0.3,0,0.5-0.1,0.7-0.3L2,32.7c0.9-0.5,1.4-1.4,1.4-2.5l0-0.2c0.4-0.4,0.8-0.5,1.3-0.5c0.5,0,1,0.2,1.4,0.6s0.6,0.9,0.6,1.4c0,0.5-0.2,1-0.5,1.3l0,0c-0.2,0.2-0.2,0.5,0,0.7l0,0l0,0c0.2,0.2,0.5,0.2,0.7,0l0,0c0.4-0.4,0.8-0.5,1.3-0.5c0.5,0,1,0.2,1.4,0.6c0.4,0.4,0.6,0.9,0.6,1.4c0,0.3-0.1,0.5-0.2,0.8c-0.1,0.2-0.2,0.4-0.4,0.6l-0.1,0.1c-0.1,0.2-0.1,0.4,0.1,0.6c0.2,0.2,0.5,0.2,0.7,0c0.4,0.2,0.9,0.4,1.4,0.4c0.6,0,1.2-0.2,1.7-0.6c0,0.4,0.2,0.8,0.4,1.2c-0.4,0.5-0.6,1.1-0.6,1.8c0,0.6,0.2,1.2,0.5,1.6c-0.4,0.5-0.6,1.1-0.6,1.7c0,0.3,0.1,0.6,0.2,0.9c-0.3-0.1-0.7-0.2-1-0.2c-0.7,0-1.4,0.3-1.9,0.8l-0.1,0c-0.5,0-1-0.2-1.4-0.6c-0.4-0.4-0.6-0.9-0.6-1.4c0-0.5,0.2-1,0.6-1.4c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0C7.5,41,7.2,41.7,7.2,42.5z M11,48.6c0.1-0.1,0.3-0.1,0.4-0.2c0.1,0.2,0.1,0.3,0.2,0.5C11.4,48.8,11.2,48.7,11,48.6z M14.2,49.4c-1.1,0-1.9-0.9-1.9-1.9c0-0.3-0.2-0.5-0.5-0.5c-0.2,0-0.3,0.1-0.4,0.2c-0.4,0.3-0.8,0.5-1.3,0.5c-0.4,0-0.7-0.1-1-0.3l-0.1,0c-0.1-0.1-0.2-0.1-0.3-0.2c-0.4-0.4-0.6-0.9-0.6-1.4c0-0.3,0.1-0.7,0.3-1c0.5,0.4,1.1,0.6,1.7,0.6c0.7,0,1.4-0.3,1.9-0.8l0.1,0c0.5,0,1,0.2,1.4,0.6c0.4,0.4,0.6,0.9,0.6,1.4s-0.2,1-0.6,1.4c-0.2,0.2-0.2,0.5,0,0.7s0.5,0.2,0.7,0c0.6-0.6,0.9-1.3,0.9-2.1c0-0.3-0.1-0.6-0.2-0.9c0.3,0.1,0.7,0.2,1,0.2c0.7,0,1.4-0.3,1.9-0.7c0.5,0.4,1,0.6,1.6,0.7c0,0.2,0.1,0.3,0.1,0.5c0,0.5-0.2,1-0.6,1.4c-0.4,0.4-0.9,0.6-1.4,0.6c-0.2,0-0.4,0-0.6-0.1c0-0.2,0.1-0.4,0.1-0.6c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5l0,0.1c0,0.4-0.1,0.7-0.3,1C15.4,49.1,14.8,49.4,14.2,49.4z M17.3,41c-0.4,0.3-0.8,0.5-1.3,0.5c-0.5,0-1-0.2-1.4-0.6c-0.4-0.4-0.6-0.9-0.6-1.4c0-0.3,0.1-0.7,0.3-1c0.5,0.5,1.2,0.7,1.9,0.7c0.2,0,0.5,0,0.7-0.1c0,0.1,0,0.3,0,0.4C16.9,40.1,17.1,40.5,17.3,41z M14.3,41.9c0.5,0.4,1.1,0.6,1.7,0.6c0.3,0,0.6-0.1,0.9-0.2c0,0.2-0.1,0.4-0.1,0.6c0,0.5,0.1,1,0.4,1.4c-0.4,0.3-0.8,0.5-1.3,0.5c-0.5,0-1-0.2-1.4-0.6c-0.4-0.4-0.6-0.9-0.6-1.4C14,42.6,14.1,42.2,14.3,41.9z M21.3,44.2v1.2v2.3c0,0.7-0.3,1.3-0.7,1.8c-0.4,0.5-1.1,0.7-1.8,0.7c-1.1,0-2.1-0.1-3-0.2c0.4-0.2,0.7-0.6,1-1c0.3,0.1,0.6,0.2,0.9,0.2c0.7,0,1.5-0.3,2.1-0.9s0.9-1.3,0.9-2.1c0-0.2,0-0.4-0.1-0.5c-0.1-0.3-0.2-0.6-0.4-0.9c-0.1,0-0.2,0-0.3,0c-0.3,0-0.7-0.1-1-0.3c-0.1-0.1-0.3-0.2-0.4-0.3c-0.4-0.4-0.6-0.9-0.6-1.4c0-0.3,0.1-0.7,0.3-1c0.5,0.4,1.1,0.6,1.7,0.6c0.5,0,1-0.1,1.4-0.4L21.3,44.2L21.3,44.2z M21.3,40.9L21.3,40.9L21.3,40.9c-0.4,0.4-0.9,0.6-1.4,0.6s-1-0.2-1.4-0.6c-0.4-0.4-0.6-0.9-0.6-1.4c0-0.5,0.2-1,0.6-1.4c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0l-0.2,0.2l0,0c-0.4,0.4-0.9,0.6-1.4,0.6s-1-0.2-1.4-0.6c-0.4-0.4-0.6-0.9-0.6-1.4c0-0.4,0.1-0.7,0.3-1.1c0.6,0.4,1.3,0.6,2,0.6c0.1,0,0.3-0.1,0.4-0.2l0.1-0.1c0.4-0.4,1-0.7,1.6-0.7s1.1,0.2,1.6,0.7c0.4,0.4,0.7,1,0.7,1.6c0,0.6-0.2,1.1-0.7,1.6c-0.2,0.2-0.2,0.5,0,0.7s0.5,0.2,0.7,0l0.2-0.3h0V40.9z M21.3,35.2L21,35c-0.6-0.6-1.5-0.9-2.3-0.9c-0.8,0-1.6,0.3-2.2,0.9c-1-0.1-1.8-0.6-2.2-1.5c0-0.1-0.1-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.3c0.7-0.2,1.2-0.9,1.2-1.7c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5c0,0.4-0.4,0.8-0.8,0.8c-0.4,0-0.8-0.4-0.8-0.8c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5c0,0.7,0.4,1.3,1,1.6L13,33c0.2,0.2,0.3,0.4,0.4,0.6c0,0.1,0.1,0.2,0.1,0.4c0,0.1,0.1,0.3,0.1,0.4c0,0.5-0.2,1-0.6,1.4s-0.9,0.6-1.4,0.6c-0.3,0-0.6-0.1-0.8-0.2c0.2-0.4,0.3-0.8,0.3-1.3c0-0.7-0.3-1.5-0.9-2.1c-0.2-0.2-0.4-0.4-0.7-0.5c1.4-0.2,2.5-1.4,2.5-2.9c0-1.1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9l0,0l0,0c0,1.7,1.4,3.2,3.2,3.2c0.8,0,1.6-0.3,2.2-0.9h0L21.3,35.2L21.3,35.2z M21.3,15.3L21.3,15.3c-0.2-0.2-0.4-0.3-0.6-0.5c0.2-0.1,0.4-0.3,0.5-0.4l0.1-0.1V15.3z"></path></g></svg> </div> </div><div id="right-side" class="either-side"> <div id="right-brain" class="brain-image"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22.3 51.2" style="enable-background:new 0 0 22.3 51.2;" xml:space="preserve"><g><path d="M11.7,39.1c-0.2,0.3-0.3,0.6-0.3,1c0,0.5,0.2,1,0.6,1.4c0.2,0.2,0.2,0.5,0,0.7s-0.5,0.2-0.7,0c-0.6-0.6-0.9-1.3-0.9-2.1 c0-0.5,0.1-1,0.4-1.5l-0.3-0.2c-0.2-0.2-0.2-0.5,0-0.7s0.5-0.2,0.7,0l0.2,0.2c0.3,0.3,0.7,0.4,1.2,0.4l0.2,0l0.2,0 c0.3-0.1,0.6-0.2,0.9-0.5c0.1-0.1,0.2-0.2,0.3-0.4c0.2-0.3,0.3-0.6,0.3-1c0-0.5-0.2-1-0.5-1.3l0,0c-0.2-0.2-0.2-0.5,0-0.7l0,0l0,0 c0.2-0.2,0.5-0.2,0.7,0l0,0c0.4,0.4,0.8,0.5,1.3,0.5c0.5,0,1-0.2,1.4-0.6s0.6-0.9,0.6-1.4c0-0.5-0.2-1-0.6-1.4 c-0.2-0.2-0.2-0.5,0-0.7s0.5-0.2,0.7,0c0.6,0.6,0.9,1.3,0.9,2.1c0,0.7-0.3,1.5-0.9,2.1s-1.3,0.9-2.1,0.9c-0.2,0-0.4,0-0.5-0.1 c0,0.2,0.1,0.4,0.1,0.6c0,0.5-0.1,1-0.4,1.5c-0.1,0.2-0.3,0.4-0.4,0.6l-0.2,0.2c-0.5,0.5-1.2,0.7-1.9,0.7 C12.3,39.2,12,39.2,11.7,39.1z"></path><path d="M0,5.9c0,1,0.1,6.6,0.1,6.6s0,34.8,0,35.5s0.5,1.5,0.5,1.5v0c0.1,0.2,0.3,0.5,0.5,0.7c0.6,0.6,1.5,1,2.5,1 c4.1,0,7.3-1,9.8-2.7c0.1-0.1,0.2-0.2,0.3-0.2l-0.1,0.1l-0.1,0c0.1,0,0.2-0.1,0.3-0.2l-0.1,0l0.1,0l0.1,0l0,0l0,0l0.1-0.1l0,0 c0.1-0.1,0.3-0.2,0.4-0.3c-0.1,0.1-0.2,0.2-0.3,0.3c0.2-0.1,0.4-0.2,0.5-0.4c1.3-1,2.4-2.1,3.3-3.4c2.8-3.7,3.9-8,4.3-10.7l0,0 c0-0.4,0-0.7,0.1-1.1l0-0.1l0,0c0-0.8,0.1-1.5,0.1-2.3c0-0.8,0-1.6-0.1-2.4c0-0.1,0-0.2,0-0.3c0-0.5-0.1-1-0.1-1.5 c0-0.5-0.1-0.9-0.2-1.4c-0.3-1.9-0.6-3.6-1.1-5.3c-0.1-0.5-0.3-1-0.4-1.4c-1-3.2-2.4-5.9-3.8-8.2l0-0.1c-0.3-0.4-0.5-0.8-0.8-1.2 c-3.2-4.9-6.5-7.4-6.5-7.4l0,0C8.4,0.4,7.2,0,5.9,0C3.5,0,1.5,1.4,0.6,3.5C0.6,3.5,0,4.4,0,5.9z M14.6,8.5c-0.1,0-0.3,0-0.4,0 c-0.2,0-0.4,0-0.6,0.1c0-0.2,0.1-0.4,0.1-0.6c0-0.4-0.1-0.7-0.2-1C13.9,7.4,14.3,7.9,14.6,8.5z M19.3,17.8L19.3,17.8 c-0.5,0-0.9,0.1-1.3,0.3c-0.1,0-0.3,0-0.4,0.1c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-0.9-0.2-1.3-0.5c-0.2-0.2-0.5-0.2-0.7,0 s-0.2,0.5,0,0.7c0.5,0.5,1.3,0.8,2,0.8l0.2,0c-0.1,0.3-0.2,0.6-0.2,1l0,0.2c-0.3-0.1-0.5-0.1-0.8-0.1c-0.7,0-1.5,0.3-2.1,0.9 c-0.4,0.4-0.7,0.9-0.8,1.4c-0.4-0.2-0.8-0.3-1.3-0.3c-0.6,0-1.2,0.2-1.7,0.6c-0.3-0.4-0.5-0.8-0.5-1.2c0-0.1,0-0.2,0-0.3l0-0.1 c0.1-0.4,0.2-0.7,0.5-1c0.4-0.4,0.9-0.6,1.4-0.6s1,0.2,1.4,0.6c0.2,0.2,0.5,0.2,0.7,0v0l0,0c0.2-0.2,0.2-0.5,0-0.7 c-0.4-0.4-0.6-0.9-0.6-1.4s0.2-1,0.6-1.4c0.4-0.4,0.9-0.6,1.4-0.6c0.5,0,1,0.2,1.4,0.6l0.1,0.1c0.1,0.1,0.2,0.2,0.3,0.3 c0.2,0.2,0.5,0.2,0.7,0s0.2-0.5,0-0.7c-0.3-0.3-0.5-0.7-0.5-1.2c0-0.4,0.2-0.8,0.5-1.2c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0 c-0.2,0.2-0.3,0.4-0.4,0.6l-0.1,0c-0.4,0.4-0.9,0.6-1.4,0.6c-0.5,0-1-0.2-1.4-0.6c-0.4-0.4-0.6-0.9-0.6-1.4s0.2-1,0.6-1.4 c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0c-0.3,0.3-0.5,0.7-0.7,1.1c-0.5-0.4-1.2-0.6-1.8-0.6c-0.7,0-1.5,0.3-2.1,0.9 c-0.2,0.2-0.4,0.5-0.6,0.8c-0.5-0.6-1.3-1-2.2-1h0c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9l0,0l0,0c0.3,0,0.5-0.2,0.5-0.5 S5.3,7.4,5,7.4c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9c0.3,0,0.5-0.2,0.5-0.5S5.3,2.5,5,2.5c-1.6,0-2.9,1.3-2.9,2.9 c0,1,0.5,1.9,1.3,2.4c-0.8,0.5-1.3,1.4-1.3,2.4c0,1.6,1.3,2.9,2.9,2.9h0c1.1,0,1.9,0.9,1.9,1.9c0,1-0.8,1.9-1.9,1.9l0,0 c-0.3,0-0.5,0.2-0.5,0.5l0,0v0C4.5,17.8,4.7,18,5,18l0,0c1,0,1.9,0.9,1.9,1.9C6.9,21,6,21.9,5,21.9c-0.3,0-0.5,0.2-0.5,0.5l0,0.1 c0,0.2,0.2,0.4,0.5,0.4l0.1,0l0.2,0.1c0.8,0,1.5,0.7,1.5,1.5c0,0.8-0.7,1.5-1.5,1.5c-0.3,0-0.5,0.2-0.5,0.5S5,27,5.3,27 c1.4,0,2.5-1.1,2.5-2.5c0-0.9-0.5-1.7-1.2-2.1c0.7-0.5,1.2-1.4,1.2-2.3c0.3,0.4,0.4,0.8,0.4,1.2c0,0.1,0,0.2,0,0.3l0,0.1 c0,0.2,0,0.3,0,0.5c0,0.4,0.1,0.8,0.2,1.2C8.6,23.5,8.8,23.8,9,24c-0.3,0.5-0.5,1-0.5,1.6c0,0.3,0.1,0.5,0.1,0.8 c-0.1,0-0.2,0-0.3,0c-1.6,0-2.9,1.3-2.9,2.9l0,0l0,0c0,1.2-1,2.2-2.2,2.2c-1.2,0-2.1-0.9-2.2-2.1v-0.1v-0.6v-1.3 c0.4,1,1.4,1.7,2.6,1.7c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8c0.3,0,0.5-0.2,0.5-0.5 s-0.2-0.5-0.5-0.5c-1.2,0-2.2,0.7-2.6,1.7v-0.4v-4.3v-0.9c0.6,0.6,1.4,1,2.3,1l0,0h0v0c0.3,0,0.5-0.2,0.5-0.5 c0-0.3-0.2-0.5-0.5-0.5h0c-1.2,0-2.2-1-2.2-2.2c0-1.2,1-2.2,2.2-2.2v0c0.3,0,0.5-0.2,0.5-0.5c0-0.2-0.1-0.4-0.3-0.5l-0.2-0.1h0 c-1.2,0-2.2-1-2.2-2.2v0l0-0.1V5.8c0-1.3,0.5-2.5,1.4-3.4C3.2,1.8,4,1.3,4.9,1.1l0,0C6,1.1,6.9,2,6.9,3C6.9,4.1,6,4.9,5,4.9 c-0.3,0-0.5,0.2-0.5,0.5S4.7,5.9,5,5.9c1.1,0,1.9,0.9,1.9,1.9C6.9,8.9,6,9.8,5,9.8c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5 c0.7,0,1.2-0.2,1.7-0.6C6.8,10.6,7,11,7.3,11.3c0.2,0.2,0.5,0.2,0.7,0c0.2-0.2,0.2-0.5,0-0.7c-0.3-0.3-0.4-0.6-0.4-1s0.1-0.7,0.4-1 s0.6-0.4,1-0.4c0.4,0,0.7,0.1,1,0.4c0.2,0.2,0.5,0.2,0.7,0s0.2-0.5,0-0.7c-0.3-0.3-0.8-0.6-1.2-0.6l-0.2,0c-1,0-1.8-0.8-1.8-1.8 c0-1,0.8-1.8,1.8-1.8c0.3,0,0.5-0.2,0.5-0.5S9.5,2.6,9.3,2.6c-0.5,0-1,0.1-1.4,0.4v0c0-0.7-0.3-1.3-0.7-1.8 c0.6,0.2,1.1,0.4,1.6,0.8l0,0L8.9,2C9,2.1,9.2,2.2,9.3,2.4c0.3,0.3,0.8,0.8,1.4,1.4c0.5,0.5,1,1.1,1.6,1.8c-0.5-0.3-1-0.5-1.6-0.5 c-0.3,0-0.5,0.2-0.5,0.5S10.5,6,10.8,6c1.1,0,1.9,0.9,1.9,1.9c0,1.1-0.9,1.9-1.9,1.9c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5 c0.7,0,1.4-0.3,1.9-0.7l0.2-0.1c0.4-0.4,0.9-0.6,1.4-0.6s1,0.2,1.4,0.6c0.1,0.1,0.2,0.2,0.2,0.3l0,0.1c0.2,0.3,0.3,0.6,0.3,1 c0,0.5-0.2,1-0.6,1.4c-0.2,0.2-0.2,0.5,0,0.7s0.5,0.2,0.7,0c0.3-0.3,0.5-0.7,0.7-1.1C17.8,14,18.6,15.8,19.3,17.8z M11.7,18.7 c0,0.2,0,0.4,0.1,0.6c-0.2,0-0.4-0.1-0.6-0.1c-0.7,0-1.5,0.3-2.1,0.9l0,0c-0.1-0.3-0.3-0.6-0.6-0.9l0,0c-0.4-0.4-0.5-0.9-0.5-1.3 c0-0.5,0.2-1,0.6-1.4s0.9-0.6,1.4-0.6s1,0.2,1.4,0.6c0.2,0.2,0.5,0.2,0.7,0s0.2-0.5,0-0.7c-0.6-0.6-1.3-0.9-2.1-0.9 c-0.6,0-1.2,0.2-1.7,0.5c-0.2-0.3-0.3-0.6-0.3-1c0-0.5,0.2-1,0.6-1.4c0.4-0.4,0.9-0.6,1.4-0.6s1,0.2,1.4,0.6l0.2,0.1l0,0 c0,0.8,0.3,1.6,0.9,2.2c0.3,0.3,0.7,0.5,1.1,0.7c-0.3,0.1-0.6,0.3-0.8,0.6C11.9,17.2,11.7,17.9,11.7,18.7z M6.9,17.8L6.9,17.8 c-0.1-0.1-0.2-0.2-0.3-0.2c0.1-0.1,0.2-0.2,0.3-0.3C6.9,17.4,6.9,17.6,6.9,17.8z M21.2,27.3c-0.9,0.2-1.7,0.8-2.1,1.6 c-0.3-0.2-0.7-0.4-1.1-0.4c0.3-0.5,0.5-1,0.5-1.6c0-0.3-0.2-0.5-0.5-0.5c-0.3,0-0.5,0.2-0.5,0.5c0,1.1-0.9,1.9-1.9,1.9 c-1.1,0-1.9-0.9-1.9-1.9c0-0.3-0.2-0.5-0.5-0.5c-0.3,0-0.5,0.2-0.5,0.5c0,1.4,1,2.6,2.4,2.9c-0.2,0.8-1,1.5-1.9,1.5 c-1.1,0-1.9-0.9-1.9-1.9c0-0.9-0.4-1.7-1.1-2.3L10.1,27c-0.4-0.4-0.6-0.9-0.6-1.4s0.2-1,0.6-1.4c0.4-0.4,0.9-0.6,1.4-0.6 c0.5,0,0.9,0.2,1.3,0.5c0.1,0.6,0.4,1.1,0.8,1.5c0.2,0.2,0.5,0.2,0.7,0s0.2-0.5,0-0.7c-0.4-0.4-0.6-0.9-0.6-1.4 c0-0.5,0.2-1,0.6-1.4c0.4-0.4,0.9-0.6,1.4-0.6c0.4,0,0.9,0.2,1.2,0.4c0.1,0.2,0.3,0.4,0.4,0.6c0.2,0.2,0.5,0.2,0.7,0s0.2-0.5,0-0.7 l-0.2-0.2c0-0.1-0.1-0.2-0.1-0.3l-0.1-0.1c-0.1-0.3-0.2-0.6-0.2-0.8c0-0.5,0.2-1,0.6-1.4c0.4-0.4,0.9-0.6,1.4-0.6 c0.1,0,0.2,0,0.4,0c0.4,1.4,0.8,2.9,1.1,4.5c-0.4-0.2-0.9-0.4-1.5-0.4c-1.6,0-2.9,1.3-2.9,2.9c0,0.3,0.2,0.5,0.5,0.5 c0.3,0,0.5-0.2,0.5-0.5c0-1.1,0.9-1.9,1.9-1.9c0.8,0,1.4,0.4,1.7,1.1C21.1,25.8,21.2,26.6,21.2,27.3z M14.7,31.8L14.7,31.8 l-0.1,0.1L14.7,31.8z M21.3,32c-0.8-0.2-1.4-1-1.4-1.8c0-0.9,0.6-1.6,1.4-1.8c0,0.6,0,1.3,0,1.9C21.3,30.9,21.3,31.4,21.3,32zM14.3,40.4c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7c0.4,0.4,0.6,0.9,0.6,1.4s-0.2,1-0.6,1.4c-0.4,0.4-0.9,0.6-1.4,0.6l-0.1,0 c-0.6-0.5-1.2-0.8-1.9-0.8c-0.3,0-0.7,0.1-1,0.2c0.1-0.3,0.2-0.6,0.2-0.9c0-0.6-0.2-1.2-0.6-1.7c0.3-0.5,0.5-1.1,0.5-1.6 c0-0.6-0.2-1.2-0.6-1.8C8.9,37.4,9,37,9,36.6c0.5,0.4,1.1,0.6,1.7,0.6c0.5,0,1-0.1,1.4-0.4c0.2,0.1,0.5,0.1,0.7,0 c0.2-0.2,0.2-0.4,0.1-0.6l-0.1-0.1c-0.2-0.2-0.3-0.4-0.4-0.6c-0.1-0.2-0.2-0.5-0.2-0.8c0-0.5,0.2-1,0.6-1.4 c0.4-0.4,0.9-0.6,1.4-0.6c0.5,0,1,0.2,1.3,0.5l0,0c0.2,0.2,0.5,0.2,0.7,0l0,0l0,0c0.2-0.2,0.2-0.5,0-0.7l0,0 c-0.4-0.4-0.5-0.8-0.5-1.3c0-0.5,0.2-1,0.6-1.4s0.9-0.6,1.4-0.6c0.5,0,0.9,0.2,1.3,0.5l0,0.2c0,1.1,0.6,2,1.4,2.5l0.2,0.1 c0.2,0.1,0.5,0.2,0.7,0.3c0,0.2,0,0.4,0,0.6c0,0.3-0.1,0.7-0.2,1c-0.1,0.3-0.1,0.6-0.2,0.9c-0.1,0.2-0.2,0.3-0.3,0.5 c-0.4,0.4-0.9,0.6-1.4,0.6c-0.5,0-1-0.2-1.4-0.6c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7c0.6,0.6,1.3,0.9,2.1,0.9 c0.4,0,0.8-0.1,1.2-0.3c-0.1,0.5-0.3,0.9-0.5,1.4c-0.5-0.4-1.1-0.6-1.7-0.6c-0.7,0-1.5,0.3-2.1,0.9c-0.6,0.6-0.9,1.3-0.9,2.1 c0,0.7,0.3,1.5,0.9,2.1c0.2,0.2,0.5,0.2,0.7,0s0.2-0.5,0-0.7c-0.4-0.4-0.6-0.9-0.6-1.4c0-0.5,0.2-1,0.6-1.4 c0.4-0.4,0.9-0.6,1.4-0.6c0.5,0,0.9,0.2,1.3,0.5c-0.6,1.4-1.4,2.8-2.4,4.1c-0.6,0.7-1.2,1.4-1.9,2.1l0-0.1c0-0.6-0.2-1.2-0.6-1.7 c0.3-0.5,0.5-1.1,0.5-1.6C15.2,41.7,14.9,41,14.3,40.4z M10.7,48.9c0.1-0.2,0.1-0.3,0.2-0.5c0.1,0.1,0.3,0.1,0.4,0.2 C11.2,48.7,11,48.8,10.7,48.9z M6.6,48.6c-0.2-0.3-0.3-0.6-0.3-1l0-0.1C6.3,47.2,6,47,5.8,47c-0.3,0-0.5,0.2-0.5,0.5 c0,0.2,0,0.4,0.1,0.6c-0.2,0.1-0.4,0.1-0.6,0.1c-0.5,0-1-0.2-1.4-0.6c-0.4-0.4-0.6-0.9-0.6-1.4c0-0.2,0-0.3,0.1-0.5 c0.6-0.1,1.1-0.3,1.6-0.7c0.5,0.5,1.2,0.7,1.9,0.7c0.3,0,0.7-0.1,1-0.2c-0.1,0.3-0.2,0.6-0.2,0.9c0,0.7,0.3,1.5,0.9,2.1 c0.2,0.2,0.5,0.2,0.7,0s0.2-0.5,0-0.7c-0.4-0.4-0.6-0.9-0.6-1.4s0.2-1,0.6-1.4c0.4-0.4,0.9-0.6,1.4-0.6l0.1,0 c0.6,0.5,1.2,0.8,1.9,0.8c0.6,0,1.2-0.2,1.7-0.6c0.2,0.3,0.3,0.6,0.3,1c0,0.5-0.2,1-0.6,1.4c-0.1,0.1-0.2,0.2-0.3,0.2l-0.1,0 c-0.3,0.2-0.7,0.3-1,0.3c-0.5,0-0.9-0.2-1.3-0.5c-0.1-0.1-0.2-0.2-0.4-0.2c-0.3,0-0.5,0.2-0.5,0.5c0,1.1-0.9,1.9-1.9,1.9 C7.5,49.4,6.9,49.1,6.6,48.6z M5.4,39.6c0-0.1,0-0.3,0-0.4c0.2,0.1,0.5,0.1,0.7,0.1c0.7,0,1.3-0.2,1.9-0.7c0.2,0.3,0.3,0.6,0.3,1 c0,0.5-0.2,1-0.6,1.4c-0.4,0.4-0.9,0.6-1.4,0.6c-0.5,0-0.9-0.2-1.3-0.5C5.3,40.5,5.4,40.1,5.4,39.6z M8.3,42.9c0,0.5-0.2,1-0.6,1.4 s-0.9,0.6-1.4,0.6c-0.5,0-0.9-0.2-1.3-0.5c0.2-0.4,0.4-0.9,0.4-1.4c0-0.2,0-0.4-0.1-0.6c0.3,0.1,0.6,0.2,0.9,0.2 c0.6,0,1.2-0.2,1.7-0.6C8.2,42.2,8.3,42.6,8.3,42.9z M1.1,42.1c0.4,0.2,0.9,0.4,1.4,0.4c0.6,0,1.2-0.2,1.7-0.6 c0.2,0.3,0.3,0.6,0.3,1c0,0.5-0.2,1-0.6,1.4c-0.1,0.1-0.2,0.2-0.4,0.3c-0.3,0.2-0.6,0.3-1,0.3c-0.1,0-0.2,0-0.3,0 c-0.2,0.3-0.3,0.6-0.4,0.9c0,0.2-0.1,0.4-0.1,0.5c0,0.7,0.3,1.5,0.9,2.1s1.3,0.9,2.1,0.9c0.3,0,0.6-0.1,0.9-0.2 c0.2,0.4,0.6,0.7,1,1c-1,0.1-2,0.2-3,0.2c-0.8,0-1.4-0.3-1.8-0.7c-0.4-0.5-0.7-1.1-0.7-1.8v-2.3v-1.2C1.1,44.2,1.1,42.1,1.1,42.1zM1.1,39.3L1.1,39.3l0.2,0.3c0.2,0.2,0.5,0.2,0.7,0c0.2-0.2,0.2-0.5,0-0.7c-0.4-0.4-0.7-1-0.7-1.6c0-0.6,0.2-1.1,0.7-1.6 c0.4-0.4,1-0.7,1.6-0.7s1.1,0.2,1.6,0.7l0.1,0.1C5.4,35.9,5.5,36,5.7,36c0.8,0,1.5-0.2,2-0.6C7.9,35.6,8,36,8,36.4 c0,0.5-0.2,1-0.6,1.4c-0.4,0.4-0.9,0.6-1.4,0.6s-1-0.2-1.4-0.6l0,0l-0.2-0.2c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7 c0.4,0.4,0.6,0.9,0.6,1.4s-0.2,1-0.6,1.4c-0.4,0.4-0.9,0.6-1.4,0.6s-1-0.2-1.4-0.6l0,0l0-0.1V39.3z M1.1,31.7L1.1,31.7 c0.6,0.5,1.3,0.9,2.2,0.9c1.7,0,3.2-1.4,3.2-3.2l0,0l0,0c0-1.1,0.9-1.9,1.9-1.9c1.1,0,1.9,0.9,1.9,1.9c0,1.5,1.1,2.7,2.5,2.9 c-0.2,0.1-0.5,0.3-0.7,0.5c-0.6,0.6-0.9,1.3-0.9,2.1c0,0.4,0.1,0.9,0.3,1.3c-0.3,0.1-0.5,0.2-0.8,0.2c-0.5,0-1-0.2-1.4-0.6 s-0.6-0.9-0.6-1.4c0-0.2,0-0.3,0.1-0.4C8.9,33.8,9,33.6,9,33.5c0.1-0.2,0.2-0.4,0.4-0.6l0.1-0.2c0.6-0.3,1-0.9,1-1.6 c0-0.3-0.2-0.5-0.5-0.5c-0.3,0-0.5,0.2-0.5,0.5c0,0.4-0.4,0.8-0.8,0.8c-0.4,0-0.8-0.4-0.8-0.8c0-0.3-0.2-0.5-0.5-0.5 c-0.3,0-0.5,0.2-0.5,0.5c0,0.8,0.5,1.5,1.2,1.7c0,0.1,0,0.2-0.1,0.3C8,33.2,8,33.3,8,33.5c-0.4,0.8-1.2,1.4-2.2,1.5 c-0.6-0.6-1.4-0.9-2.2-0.9c-0.8,0-1.7,0.3-2.3,0.9l-0.2,0.2L1.1,31.7L1.1,31.7z M1.1,14.4L1.1,14.4c0.2,0.2,0.4,0.3,0.6,0.5 c-0.2,0.1-0.4,0.3-0.6,0.5l0,0V14.4z"></path></g></svg> </div> </div></div><div class="right-brain-panel from-right"> <div class="brain-container"> <div class="brain-content"> <h1>This is the content of the right brain panel!!!!!</h1> <form action="https://formspree.io/shellwe#gmail.com" method="POST"> <input type="text" name="name"> <input type="email" name="_replyto"> <input type="submit" value="Send"> </form> Back </div></div></div><div class="left-brain-panel from-left"> <div class="brain-container"> <div class="brain-content"> <h1>This is the content of the left brain panel!!!!!</h1> <form action="https://formspree.io/shellwe#gmail.com" method="POST"> <input type="text" name="name"> <input type="email" name="_replyto"> <input type="submit" value="Send"> </form> Back </div></div></div>

Different transition for each transform

I want to achieve to have different transition for each transform when class is added/removed from element. Best solution would be not modifying HTML structure or even adding additional classes.
.navbar {
height: 60px;
transform: translate(0, 0);
transition: transform .5s ease; /* for transform: translate(0, -60px); */
transition: transform .2s linear; /* for transform: translate(200px, 0); */
}
.navbar.slide-up {
transform: translate(0, -60px);
}
.navbar.slide-left {
transform: translate(200px, 0);
}

You add the transition on the togglable classes
.navbar {
height: 60px;
transition: transform .35s; /* same for both when class is removed */
transform: translate(0, 0);
}
.navbar.slide-up {
transition: transform .5s ease; /* for transform: translate(0, -60px); */
transform: translate(0, -60px);
}
.navbar.slide-left {
transition: transform .2s linear; /* for transform: translate(200px, 0); */
transform: translate(200px, 0);
}
Updated, 2:nd
Note, based on how your script looks like, it might be possible to use the given transition and set it to the navbar on removal using cssText (and if, you won't need the extra classes)
Updated
If it will be possible to add 2 more classes, one can get a unique transition when resetting the elements position
With this, you first clear all classes, add one of them, and then, on removal add its reverse.
.navbar {
height: 60px;
transform: translate(0, 0);
}
.navbar.slide-up {
transition: transform .5s ease; /* for transform: translate(0, -60px); */
transform: translate(0, -60px);
}
.navbar.slide-left {
transition: transform .2s linear; /* for transform: translate(200px, 0); */
transform: translate(200px, 0);
}
.navbar.slide-up-reverse {
transition: transform .5s ease; /* for transform: translate(0, -60px); */
}
.navbar.slide-left-reverse {
transition: transform .2s linear; /* for transform: translate(200px, 0); */
}

Different transition for on/off class but same property

I have a div that translates itself in with a simple transition:
div{
transform: translate3d(0, -100%, 0);
transition: all .5s;
}
div.active{
transform: translate3d(0, 0, 0);
}
Then, I toggle the class with JS and it works perfectly. This does the following:
On --> Slide div down
Off --> Slide div up
What I want to do is:
On --> Slide div down
Off --> Slide div down again
Is there a way to achieve this?
EDIT: Here's a demo of what it does: https://jsfiddle.net/bwzy89oq/ (click anywhere)

This does what you need, sort of, but it starts off playing the animation. I'm working on how to logic that out:
div {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
transform: translate3d(0, 100%, 0);
background: black;
transition: all .5s ease-in-out;
animation: slider2 .5s forwards;
}
div.active {
animation: slider .5s forwards;
/*transform: translate3d(0, 0, 0);*/
}
#keyframes slider {
from {
transform: translate3d(0, -100%, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
#keyframes slider2 {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, 100%, 0);
}
}

Firefox CSS Placeholder Issue

I am trying to animate the my input placeholders. As it is, it works in Chrome, but I'm having trouble with the firefox implementation.
Here is my SCSS:
input[placeholder], :-moz-placeholder, ::-moz-placeholder {
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
position: relative;
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
&[style*=hidden] {
color: $gold;
font-size: 12px;
-moz-transform: translate3d(0, -25px, 0);
transform: translate3d(0, -25px, 0);
opacity: 1;
visibility: visible !important;
}
}

CSS pseudo element transform is choppy

I have a basic CSS transition where I rotate a pseudo ::after element and increase its width on hover. However the element transition is choppy and skips most of the animation halfway through.
Issue reproduced in a Code Pen.
I've tried using -webkit-backface-visibility: hidden; to solve the issue but I cant seem to stop the transition flash. Any ideas?
Transition css:
a {
position: relative;
text-decoration: none;
color: #db421c;
-webkit-box-shadow: inset 0px 4px 0px #fff;
-moz-box-shadow: inset 0px 4px 0px #fff;
-o-box-shadow: inset 0px 4px 0px #fff;
box-shadow: inset 0px 4px 0px #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a + a {
margin-left: 20px;
}
a::after{
width: 20px;
height: 1px;
content: " ";
background: black;
position: absolute;
-webkit-transform: rotate(90deg) translate(55%, 10%);
-moz-transform: rotate(90deg) translate(55%, 10%);
-o-transform: rotate(90deg) translate(55%, 10%);
transform: rotate(90deg) translate(55%, 10%);
webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a:last-child::after {
content: none;
}
a:hover {
color: black;
}
a:hover::after {
width: 100%;
height: 2px;
-webkit-transform: rotate(180deg) translate(100%, -20px);
-moz-transform: rotate(180deg) translate(100%, -20px);
-o-transform: rotate(180deg) translate(100%, -20px);
transform: rotate(180deg) translate(100%, -20px);
}

I isolated the issue to the translate transformation; I wasn't sure how exactly to fix it, although I have a feeling the solution is in the transform-origin property. The only working solution I was able to come up with was to use positioning in order to move the pseudo elements. The same rotation is being used, we are just making use of the absolute positioning in order to translate the elements. This method doesn't have any apparent issues given that the parent element is relatively positioned. This method should also work for elements with varying widths.
UPDATED EXAMPLE HERE - it achives the exact same effect without the choppiness.
Instead of translate(55%, 10%), use top: 10px/right: -22px
And instead of translate(100%, -20px), use top: 22px/right: 0px
Updated CSS
a::after {
width: 20px;
height: 1px;
content: " ";
background: black;
position: absolute;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
top: 10px;
right: -22px;
}
a:hover::after {
width: 100%;
height: 2px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
top: 22px;
right: 0px;
}