Skip to content

Instantly share code, notes, and snippets.

@senormedia

senormedia/exploring-ui-animation-1.markdown

Created January 7, 2019 08:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save senormedia/3d239f08ad8980d995577d5bf7af98fe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save senormedia/3d239f08ad8980d995577d5bf7af98fe to your computer and use it in GitHub Desktop.
Download ZIP
Exploring UI Animation #1
Raw
exploring-ui-animation-1.markdown

Exploring UI Animation #1

Exploring a slider concept designed by @ErnestAsanov and by the awesome team at Tubik Studio.

A Pen by mario s maselli on CodePen.

License.

Raw
index.html
<div class="slider-wrapper">
<div class="slider">
<div class="slide-navigation__squares">
<div class="squares-wrapper">
<div class="squares-slider">
<span class="square"></span>
<span class="square"></span>
<span class="square red"></span>
<span class="square "></span>
<span class="square"></span>
</div>
</div>
</div>
<div class="slides-container">
<div class="slide-wrapper">
<div class="slide" data-order="1">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/photo-1428908728789-d2de25dbd4e2.jpeg" alt="" />
<div class="slide-content">
<h1>Discover</h1>
<h2>The warm heart of Nordic Beauty</h2>
<div class="slide-txt">
<p>The Nordic Countries varied landscapes offer wonderful scenery for any journey, no matter by land or sea. How you choose to travel will depend on where you go.</p>
<button>Show regions</button>
</div>
</div>
</div>
<div class="slide" data-order="2">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/todo-banner.jpg" alt="" />
<div class="slide-content">
<h1>To do</h1>
<h2>Close encounters with nature</h2>
<div class="slide-txt">
<p>There's never a bad time to visit the Nordic countries! When you should visit will depend on which types of activities or natural phenomena interest you most.</p>
<button>Activities</button>
</div>
</div>
</div>
<div class="slide" data-order="3">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/plan-banner_copy.jpg" alt="" />
<div class="slide-content">
<h1>Plan</h1>
<h2>Top attractions in the nordics</h2>
<div class="slide-txt">
<p>June, July and August is the best time to travel, this is when you can expect the warmest weather, longest daylight hours and best availability of outdoor activities.</p>
<button>Reservations</button>
</div>
</div>
</div>
</div>
</div>
<div class="slide-navigation__txt">
<ul>
<li><span data-order="1">Discover</span></li>
<li><span data-order="2">To do</span></li>
<li><span data-order="3">Plan</span></li>
</ul>
</div>
</div>
</div>
Raw
script.js
/*
Inspired by the work of the guys at Tubik Studio.
Dribble: https://dribbble.com/Tubik.
https://dribbble.com/shots/2710181-Tubik-Studio-Ice.
*/
var initialSlide = $('.slides-container [data-order="1"]');
var initalSelected = $('.slide-navigation__txt [data-order="1"]');
var mq_medium = window.matchMedia( '(min-width: 860px)' );
var mq_big = window.matchMedia( '(min-width: 1200px)' );
function activate_slide(order){
var unactiveSlide = $('.slide.active');
var activeSlide = $('.slides-container [data-order="'+order+'"]');
if( !(activeSlide.hasClass('active')) ){
slide_in(activeSlide);
slide_out(unactiveSlide);
}
}
function slide_in(slide) {
var _this = slide;
animation_in(slide);
_this.addClass('active');
TweenMax.to(_this, 1, {autoAlpha:1}, '-=1');
}
function slide_out(slide){
var _this = slide;
_this.css( 'z-index', '2' );
_this.removeClass('active');
TweenMax.to(_this, 1, {autoAlpha:0, onComplete: removeZ});
function removeZ(){
_this.css( 'z-index', '1' );
}
animation_out(slide);
}
function animation_in(slide){
var title = slide.find('h1');
var subtitle = $(slide).find('h2');
var text = $(slide).find('p');
var button = $(slide).find('button');
var image = $(slide).find('img');
TweenMax.fromTo(title, 0.6,{autoAlpha:0, x:100}, {autoAlpha:0.6, x:0, ease: Power2.easeOut});
TweenMax.fromTo(subtitle, 0.5,{autoAlpha:0, x:-200}, {autoAlpha:1, x:0, ease: Power2.easeOut},'-0.1');
TweenMax.fromTo(text, 0.8,{autoAlpha:0, x:50}, {autoAlpha:1, x:0, ease: Power2.easeOut});
TweenMax.fromTo(button, 0.5,{autoAlpha:0 }, {autoAlpha:1});
TweenMax.to(image, 0, {autoAlpha:1,scale:1});
}
function animation_out(slide){
var title = slide.find('h1');
var subtitle = $(slide).find('h2');
var text = $(slide).find('p');
var button = $(slide).find('button');
var image = $(slide).find('img');
TweenMax.to(title, 0.6, {autoAlpha:0, x:0});
TweenMax.to(subtitle, 0.5, {autoAlpha:0, x:200});
TweenMax.to(text, 0.5,{autoAlpha:0});
TweenMax.to(button, 0.5,{autoAlpha:0});
TweenMax.to(image, 1, {scale:1.1});
}
$('.slide-navigation__txt span').on('click', function(){
var _this = $(this);
var order = _this.data('order');
var spans = $('.slide-navigation__txt span');
var current = $('.active').data('order');
spans.removeClass('active');
_this.addClass('active');
activate_slide(order);
stagger_squares(order, current);
});
function stagger_squares(order, current) {
var mq = 0.7;
var moveY;
var squares = $('.slide-navigation__squares .square');
var staggerTime = -0.12;
if( order < current ) {
staggerTime = staggerTime * -1;
}
if( mq_medium.matches) { mq = 1 }
if( mq_big.matches) { mq = 1.3 }
moveY = (order-1) * (15 * mq );
TweenMax.staggerTo(squares, 0.1, {y: moveY}, staggerTime);
}
$(document).ready(function() {
initialSlide.addClass('active');
initalSelected.addClass('active');
TweenMax.to(initialSlide, 0.5, {autoAlpha:1});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
Raw
style.scss
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,900,800,500,700,600);
*, *::after,*::before{
box-sizing:border-box;
}
html, body {
font-size:6px;
background:#fbfbfb;
padding:40px 20px;
font-family: 'Work Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@media (min-width: 860px) {
font-size:8px;
padding:30px 50px;
}
@media (min-width: 1200px) {
font-size:10px;
}
}
.slider-wrapper {
position:relative;
max-width: 90rem;
min-width: 480px;
background:#fff;
margin: 0 auto;
overflow:hidden;
box-shadow: 0 0 35px 20px #DDE5EE;
.slider{
position:relative;
height: 65rem;
padding: 5rem 0;
&::after {
content: "";
display: table;
clear: both;
}
.slide-wrapper {
position:relative;
display:block;
width:100%;
height:100%;
}
}
.slide-navigation__squares, .slide-navigation__txt {
width:10%;
position:relative;
float:left;
overflow:hidden;
&::after {
content: "";
display: table;
clear: both;
}
}
.slide-navigation__txt {
display:block;
height:100%;
&::after {
content: "";
display: table;
clear: both;
}
ul {
margin:0;
list-style:none;
padding:0;
position:absolute;
display:table-cell;
width: 30rem;
transform:rotate(90deg);
transform-origin:0;
margin-left:calc(50% - 0.14rem);
&::after {
content: "";
display: table;
clear: both;
}
}
li {
text-transform:uppercase;
letter-spacing:0.2rem;
margin: 0 1.2rem;
position:relative;
float:left;
font-size:1.2rem;
font-weight:600;
color:#A1A5B8;
span {
cursor:pointer;
transition: all 0.5s ease;
display:block;
&.active{
transform: scale(1.1, 1.1);
color: #E34D67;
}
}
}
}
.slide-navigation__squares{
display:block;
height:100%;
.squares-wrapper{
position:absolute;
margin-left: calc(50% - 0.4rem);
bottom: 5rem;
height: 4.6rem;
overflow:hidden;
}
.squares-slider{
position:relative;
display:block;
margin-top:-2.5rem;
transform:translateY(-2.5rem);
}
.square{
width: 0.6rem;
height:0.6rem;
display:block;
margin:1.3rem 0;
background:#A1A5B8;
&.red{
background: #E34D67;
}
}
}
.slides-container {
position:relative;
width:80%;
float:left;
height:100%;
}
.slide {
position:absolute;
display:block;
width:100%;
height:100%;
opacity:0;
visibility:hidden;
overflow:hidden;
z-index:1;
img {
max-width:100%;
display:block;
height:100%;
object-fit:cover;
}
.slide-content{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
padding: 5rem 5.8rem;
overflow:hidden;
h1 {
text-transform:uppercase;
color:white;
font-weight:900;
font-size:10rem;
text-align:center;
margin:0;
opacity:0.6;
position:relative;
}
h2 {
color:#E34D67;
font-size:4.8rem;
max-width:80%;
margin:0;
margin-top:-6rem;
font-weight:900;
line-height:1;
position:relative;
}
}
.slide-txt{
position:relative;
display:block;
width:100;
margin-top:6rem;
&::after {
content: "";
display: table;
clear: both;
}
p {
margin:0;
max-width:55%;
color:#666666;
font-size:1.2rem;
line-height:1.4;
float:left;
}
button {
display:block;
float:right;
width:18rem;
text-align:center;
background:transparent;
background-color:transparent;
border:0.28rem solid #E34D67;
text-transform:uppercase;
padding:0.8rem 0.5rem;
font-size:1.5rem;
color: #E34D67;
font-weight:600;
letter-spacing:0.2rem;
outline:none;
overflow:hidden;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment