Button To Delivery Truck Animation - csshint

Check out this Button To Delivery Truck Animation Using css and js. Designed by Nerdmanship.

HTML

[code language=”html”]

<!–

THIS IS ONE PART OF THREE

Check out the others here:
https://codepen.io/collection/DgggNa/

–>

</g>
<g transform="translate(88.09 271.165)">
<use data-click=’btn’ fill="#FFF" xlink:href="#path-1" class=’clickable’/>
</g>
</g>
</g>
</svg>

[/code]

CSS / SCSS

[code language=”css”]

body {
background:#52C1BC;
}

#ship-it {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 600px;
overflow: visible;
}

.hidden {
visibility: hidden;
}

.wip {
opacity:0.5;
}

.clickable {
cursor: pointer;
opacity: 0.01;
}
[/code]

JS/ Babel

[code language=”js”]

// Animatables
var list = document.querySelector(‘[data-anim=list]’),
listBg = document.querySelector(‘[data-anim=list-bg]’),
items = document.querySelectorAll(‘[data-anim=list-item]’),
ripple = document.querySelector(‘[data-anim=ripple]’),
ripple = document.querySelector(‘[data-anim=ripple]’),
btnBg = document.querySelector(‘[data-anim=btn-bg]’),
btnLabel = document.querySelector(‘[data-anim=btn-label]’),
btnShadow = document.querySelector(‘[data-anim=btn-shadow]’),
frontGroup = document.querySelector(‘[data-anim=front-group]’),
frontWheels = document.querySelectorAll(‘[data-anim=front-wheel]’),
frontWheelBack = document.querySelector(‘[data-anim=front-wheel-back]’),
backWheels = document.querySelectorAll(‘[data-anim=back-wheel]’),
backWheelsBack = document.querySelectorAll(‘[data-anim=back-wheel-back]’),
containerParts = document.querySelectorAll(‘[data-anim=container-part]’),
containerLip = document.querySelector(‘[data-anim=container-lip]’),
container = document.querySelector(‘[data-anim=container]’),
truckBtn = document.querySelector(‘[data-anim=truck-btn]’),
shippedBtn = document.querySelector(‘[data-anim=btn-shipped]’);

// Interactive
var btnArea = document.querySelector(‘[data-click=btn]’);

// Listeners
btnArea.addEventListener(‘click’, btnHandler);

// Handlers
function btnHandler(e) {
getBtnTl( getClickCoords(e) ).play();
shipItTl.restart();
}

// Animations
TweenLite.defaultEase = Back.easeOut.config(1);

function getBtnTl(coords) {
var btnTl = new TimelineMax({ paused:true });

btnTl
.fromTo(btnShadow, 0, { autoAlpha:1 }, { autoAlpha:0 }, 0)
.to(ripple, 0, { x: coords.x, y:coords.y }, 0)
.fromTo(ripple, 0.5, { autoAlpha:0.5, scale: 0,}, { autoAlpha:0, scale: 20, transformOrigin: ‘center’, ease: Power1.easeOut }, 0);

return btnTl;
}

var shipItTl = new TimelineMax({ paused:true, onComplete:reset }),
listTl = new TimelineMax({ paused:true }),
truckTl = new TimelineMax({ paused:true });

shipItTl
.add( listTl.play(), 0 )
.add( truckTl.play(), 0.2 );

listTl
.to(list, 0.3, { y:-10, ease: Power1.easeInOut}, 0)
.to(list, 0.05, { y:0, ease: Power1.easeIn}, 0.3)
.fromTo(items[0], 0.15, { y:0 }, { y:85, ease: Linear.easeNone }, 0.35)
.fromTo(items[1], 0.15, { y:0 }, { y:138, ease: Linear.easeNone }, 0.35)
.fromTo(items[2], 0.15, { y:0 }, { y:178, ease: Linear.easeNone }, 0.35)
.fromTo(items, 0, { autoAlpha:1 }, { autoAlpha:0 }, 0.5)
.to([btnBg, btnLabel], 0.15, { scaleX: 1.05, transformOrigin: ‘center’, ease:Power1.easeInOut, repeat:1, yoyo:true }, 0.5)
.to([btnBg, btnLabel], 0.15, { scaleY: 0.95, ease:Power1.easeInOut, repeat:1, yoyo:true }, 0.5);

truckTl
.set(frontGroup, { x:-50, scale:0.84, transformOrigin: ‘left top’, autoAlpha:1 })
.set([frontWheels, frontWheelBack], { y:-25, autoAlpha:1 })
.set(frontWheels[1], { autoAlpha:0 })
.set(container, { scale:0.98, transformOrigin: ‘right top’, autoAlpha:1 })
.set([containerParts,containerLip], { y:-15, autoAlpha:1 })
.set(containerParts[2], { autoAlpha:0.5 })
.set([backWheels, backWheelsBack], { y:-30, autoAlpha:1 })
.to(container, 0.5, { scale:1 }, 0)
.staggerTo(containerParts, 0.5, { y:0 }, -0.1, 0.2)
.to(containerLip, 0.5, { y:0 }, 0.6)
.staggerTo(backWheelsBack, 0.5, { y:0 }, -0.1, 0.55)
.staggerTo(backWheels, 0.5, { y:0 }, 0.1, 0.6)
.to(frontGroup, 0.6, { scale:1, x:0, ease: Back.easeOut.config(1.4) }, 0.7)
.to(frontWheelBack, 0.5, { y:0 }, 0.8)
.to(frontWheels, 0.5, { y:0, ease:Back.easeOut.config(5.4) }, 0.9)
.to(frontWheels[1], 0, { autoAlpha:1 }, 1.05)
.to(shippedBtn, 0, { autoAlpha:1 }, 1.05)
.fromTo(truckBtn, 1.2, { x:0 }, { x:’+=1000′, ease: Back.easeIn.config(0.5) }, 1.4)
.fromTo(truckBtn, 0.5, { autoAlpha:1 }, { autoAlpha:0, ease: Power1.easeIn }, 2);

function reset() {

var resetTl = new TimelineMax({ paused:true });

resetTl
.set(items, { y:0 })
.set(truckBtn, { x:0 })
.set(frontGroup, { x:-50, scale:0.84, transformOrigin: ‘left top’, autoAlpha:1 })
.set([frontWheels, frontWheelBack], { y:-25, autoAlpha:1 })
.set(frontWheels[1], { autoAlpha:0 })
.set(container, { scale:0.98, transformOrigin: ‘right top’, autoAlpha:1 })
.set([containerParts,containerLip], { y:-15, autoAlpha:1 })
.set(containerParts[2], { autoAlpha:0.5 })
.set([backWheels, backWheelsBack], { y:-30, autoAlpha:1 })
.to(items, 0.5, { autoAlpha:1, y:0, ease: Power1.easeInOut }, 0.01)
.to(truckBtn, 0.5, { autoAlpha:1, ease: Power1.easeInOut }, 0.01);

resetTl.restart();
};

// Functions
function getClickCoords(e) {

var svgRect = document.querySelector(‘#ship-it’).getBoundingClientRect(),
btnRect = document.querySelector(‘[data-anim=btn-bg]’).getBoundingClientRect(),
pixelCoordSample = btnRect.left-svgRect.left,
svgCoordSample = 88,
normFactor = pixelCoordSample/svgCoordSample,
src = {
x: e.clientX,
y: e.clientY,
xMin: btnRect.left,
xMax: btnRect.left + btnRect.width,
yMin: btnRect.top,
yMax: btnRect.top + btnRect.height
},
rpl = {
xMin: -(btnRect.width)/2/normFactor,
xMax: (btnRect.width)/2/normFactor,
yMin: -(btnRect.height)/2/normFactor,
yMax: (btnRect.height)/2/normFactor,
offset: parseInt(ripple.getAttribute(‘r’)),
};

var coords = {
x: map(src.x, src.xMin, src.xMax, rpl.xMin, rpl.xMax) + rpl.offset,
y: map(src.y, src.yMin, src.yMax, rpl.yMin, rpl.yMax) + rpl.offset
};

return coords;
}

// Returns a value on destination range based on the input value on source range
function map(value, sourceMin, sourceMax, destinationMin, destinationMax) {
return destinationMin + (destinationMax – destinationMin) * ((value – sourceMin) / (sourceMax – sourceMin)) || 0;
}

[/code]

UI Motion – Shipping Concept

<br /> See the Pen <a href='https://codepen.io/nerdmanship/pen/veWyKg'>UI Motion – Shipping Concept</a> by Nerdmanship<br /> (<a href='https://codepen.io/nerdmanship'>@nerdmanship</a>) on <a href='https://codepen.io/'>CodePen</a>.<br />

UI Motion – Shipping Concept

You may also like