<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TweenMax.js+SVG 融化的冰淇淋</title>
<style>
#box {
position: absolute;
width: 550px;
height: 550px;
top: 50%;
left: 50%;
margin-top: -275px;
margin-left: -275px;
}
svg {
overflow: visible;
}
.red {
fill: #d83137;
}
.blue {
fill: #18a3d7;
}
.white {
fill: #e6e7e8;
}
.stick {
fill: #f4d5a3;
}
.stickshdw {
fill: #d9b580;
}
.drip1 {
fill: #e6e7e8;
opacity: 0;
}
.drip2 {
fill: #18a3d7;
opacity: 0;
}
.drip3 {
fill: #d83137;
opacity: 0;
}
.shadow {
fill: url("#grad1");
}
.highlight {
fill: url("#grad2");
}
stop.g1 {
stop-color: #fff;
stop-opacity: 0;
}
stop.g2 {
stop-color: #43445d;
stop-opacity: 0;
}
stop.g3 {
stop-color: #ae2e3a;
}
stop.g4 {
stop-color: #fff;
stop-opacity: 0.2;
}
stop.g5 {
stop-color: #fff;
stop-opacity: 0.2;
}
stop.g6 {
stop-color: #fff;
stop-opacity: 0.6;
}
#bars {
position: fixed;
bottom: 0;
height: 30px;
width: 100%;
}
#red {
height: 10px;
background: #d83137;
}
#white {
height: 10px;
background: #e6e7e8;
}
#blue {
height: 10px;
background: #18a3d7;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #252532;
}
</style>
</head>
<body>
<!--// PATHS ////-->
<!--// HTML ////-->
<div id="box">
<!--POP-->
<svg id="pop" viewBox="0 0 501 501">
<!--STICK-->
<path d="M160.8,370.5l-37.6,59.7c0,0-8.5,12,4.2,18.7s22.6-6.7,22.6-6.7l36.2-57 C186.2,385.2,179.1,366.5,160.8,370.5z" class="stickshdw"></path>
<path d="M152.8,390.2c-10.7,17.3-21.3,34.7-21.3,34.7s-14.7,16,0,24c11.6,6.3,20-8,20-8l26.7-44 C178.2,396.8,161.9,375.4,152.8,390.2z" class="stick"></path>
<!--RED WHITE BLUE-->
<path d="M176.5,253.8l-30.3,49.7c0,0-10.7,18.7-2.7,32c-1.3,4-10.7,22.7,6.7,38.7 c6.7,1.3,21.3,5.3,26.7,13.3c5.3,8,20,8.7,29.3,6c4-4,10.7-4,17.3-1.3c8,2.7,12-0.7,21.3-15.3c9.3-14.7,42.7-65.3,42.7-65.3 L176.5,253.8z" class="white"></path>
<path d="M218.2,184.8l-45.3,73.3c0,0,9.3,16,6.7,21.3s-14.7,24,5.3,34.7c12,2.7,19.3-8.9,32,9.3 c10.7,15.3,30.7,18.7,48-2.7c6.7,0,14.3,3.7,19.7-3c5.3-6.7,46.7-70.3,46.7-70.3L218.2,184.8z" class="blue"></path>
<path d="M356.5,208.5c13.3-22.7,20-36,20-60c0-17.3,7-31.7,13.7-45c25.3-37.3-16-54.7-16-54.7 c-34.7-17.3-37.3-1.3-57.3,25.3c-12,16-18.4,19.8-36,29.3c-27.4,14.9-62.7,80-62.7,80s13.3,10.7,9.3,18.7s2.7,25.3,12,28 c9.3,2.7,26.7,6.7,29.3,16c2.7,9.3,6.7,13.3,28,13.3c8-1.3,21.7-6.7,29.7-2.7L356.5,208.5z"
class="red"></path>
<!--SHADOW HIGHLIGHT-->
<path d="M151.5,370.8c0,0,124.2-193.4,134.7-212c10.7-14.7,28-26.7,33.3-24c5.3,2.7,5.3,24-6.7,42.7 c-14,21.8-137.3,206.7-137.3,206.7S167.5,373.5,151.5,370.8z M220.8,386.8c0,0,113.3-169.3,126.7-190.7s4-34.7,4-22.7s-24,44-24,44 l-112,166.7L220.8,386.8z M270.2,136.2c10.7-10.7,17.3-13.3,12-14.7c-5.3-1.3-13.3,8-28,22.7c-14.7,14.7-98.7,154.7-105.3,168 c-6.7,13.3-4,18.7-4,18.7S259.5,146.8,270.2,136.2z"
class="shadow"></path>
<path d="M344.8,51.5c0,0,8,13.3,28,21.3s-17.3,5.3-25.3-4S339.5,48.8,344.8,51.5z M317.8,94.2 c-2.2,3-5.9,6.4-11.7,9.6s-2.3,10.6,6.7,3.7c9-6.9,23.4-20.1,15.9-21.8C326.8,85.3,324.7,84.9,317.8,94.2z M280,127.3 c0,0-26.7,23.2-41.8,57.6c-11.4,25.9,9.3-14.7,16-18.7s18.7,1.3,16,10.7c-2.7,9.3,13.3-16,13.3-16s-20,5.3-14.7-5.3 c5.3-10.7,13.1-17.4,14.7-21.3C290.5,116.8,280,127.3,280,127.3z M292.8,227.5c1.2,0.8,16-20,22.7-28s12,10.7,16,8 s9.3-18.7,2.7-13.3c-6.7,5.3-14.7-4-12-9.3c2.7-5.3,2.7-24,0-10.7c-2.7,13.3-19.4,36.1-19.4,36.1 C296.1,219.6,290.4,225.9,292.8,227.5z M144.3,334.6c0,0,1.2,3.8-1.5,14.5c-2.7,10.7,78.5-134.3,78.3-135.6 c-1.3-6.5-76.8,119.8-76.8,119.8V334.6z M190.8,381.8c0,0,65.8-110.8,58.9-107.3c-7.6,3.9-70.9,108.8-70.9,108.8 C181.4,392.6,190.8,381.8,190.8,381.8z M242.2,380.8c3.4-4.5,9.6-15.7,15.7-27.1c0.9-1.8-1.6-3.2-2.7-1.6l-28.5,37.6 C226.8,392.4,234.2,391.5,242.2,380.8z"
class="highlight"></path>
<!--DRIP DROPS-->
<ellipse cx="229.6" cy="396.1" rx="5.5" ry="9" class="drip1"></ellipse>
<ellipse cx="267.5" cy="350.2" rx="5.5" ry="9" class="drip2"></ellipse>
<ellipse cx="300.8" cy="290.2" rx="5.5" ry="9" class="drip3"></ellipse>
<defs>
<!--SHADOW GRADIENT-->
<linearGradient id="grad1" x1="180" y1="360" x2="340" y2="130" gradientUnits="userSpaceOnUse">
<stop offset="0" class="g1"></stop>
<stop offset="0.1" class="g2"></stop>
<stop offset="1" class="g3"></stop>
</linearGradient>
</defs>
<defs>
<!--HIGHLIGHT GRADIENT -->
<radialGradient id="grad2" cx="240" cy="270" r="300" gradientTransform="matrix(0.5351 -0.8448 0.1356 8.588348e-002 73.2079 448.8734)" gradientUnits="userSpaceOnUse">
<stop offset="0" class="g3"></stop>
<stop offset="0.4" class="g4"></stop>
<stop offset="0.4" class="g5"></stop>
</radialGradient>
</defs>
</svg>
</div>
<!--BOTTOM BARS-->
<div id="bars">
<div id="red"></div>
<div id="white"></div>
<div id="blue"></div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src='js/TweenMax.min.js'></script>
<script src='js/snap.svg-min.js'></script>
<script>
//// GSAP VARIABLES ////
var Box = $('#box');
var Drip1 = $('.drip1');
var Drip2 = $('.drip2');
var Drip3 = $('.drip3');
//// SNAP VARIABLES ////
var s = Snap('#pop');
var red = s.select('.red');
var blue = s.select('.blue');
var white = s.select('.white');
//// GSAP ////
var tl = new TimelineMax();
function animationTimeline() {
tl.to(
Box, 0.65, {
onStart: function() {
red1();
}
}
);
tl.to(
Box, 0.65, {
onStart: function() {
red2();
}
}
);
tl.to(
Box, 0.65, {
onStart: function() {
blue1();
}
}
);
tl.to(
Box, 0.65, {
onStart: function() {
blue2();
}
}
);
tl.to(
Box, 0.65, {
onStart: function() {
white1();
}
}
);
tl.to(
Box, 0.65, {
onStart: function() {
white2();
}
}
);
tl.to(
Box, 0.65, {
onComplete: function() {
tl.restart();
}
}
);
};
//// SNAP SVG ////
function red1() {
red.animate({
'path': 'M356.5,208.5c13.3-22.7,20-36,20-60c0-17.3,7-31.7,13.7-45c25.3-37.3-16-54.7-16-54.7 c-34.7-17.3-37.3-1.3-57.3,25.3c-12,16-18.4,19.8-36,29.3c-27.4,14.9-62.7,80-62.7,80s13.3,10.7,9.3,18.7s2.7,25.3,12,28 c9.3,2.7,26.7,6.7,29.3,16c2.7,9.3,6.7,13.3,28,13.3c8-1.3,21.7-6.7,29.7-2.7L356.5,208.5z'
}, 2400, mina.bounce);
};
function red2() {
red.animate({
'path': 'M352.9,216.5c13.3-22.7,24-44,24-68c0-17.3,7-31.7,13.7-45c25.3-37.3-16-54.7-16-54.7 c-34.7-17.3-37.3-1.3-57.3,25.3c-12,16-18.4,19.8-36,29.3c-27.4,14.9-62.7,80-62.7,80s13.3,10.7,9.3,18.7s2.7,25.3,12,28 c9.3,2.7,23.1,8.5,29.3,16c41.3,50,17,86.7,31,86c10-0.7,5-37.3,23.3-66L352.9,216.5z'
}, 3800, mina.ease);
TweenMax.to(Drip3, 0.1, {
x: -2,
scale: 0.5,
opacity: 1,
delay: 4.3
});
TweenMax.to(Drip3, 2, {
scale: 1.3,
y: 800,
delay: 4.3
});
TweenMax.to(Drip3, 0, {
opacity: 0,
