Hello Kitty Puppet Example TweenMax

Developer
Andy Hullinger
Size
2,576 Kb
Views
30,360
  1. Hello Kitty Puppet Example TweenMax Previews
  2. Hello Kitty Puppet Example TweenMax HTML Codes
  3. Hello Kitty Puppet Example TweenMax CSS Codes
  4. Hello Kitty Puppet Example TweenMax JS Codes

How do I make an hello kitty puppet example tweenmax?

KEY POINTS! • original image in photoshop is 300px x 300px • each part is absolutely positioned inside a parent (that same size as the original image). What is a hello kitty puppet example tweenmax? How do you make a hello kitty puppet example tweenmax? This script and codes were developed by Andy Hullinger on 15 September 2022, Thursday.

Hello Kitty Puppet Example TweenMax Previews
IQ Test

Hello Kitty Puppet Example TweenMax - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hello Kitty Puppet Example TweenMax</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="puppet"> <li class="back wheel"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/HK-backwheel.png"/</li> <li class="front wheel"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/HK-frontwheel.png"/</li> <li class="scooter"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/HK-scooter.png"/></li> <li class="kitty"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/HK-kitty.png"/</li> <li class="head"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/HK-head.png"/</li>
</ul>
<footer></footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hello Kitty Puppet Example TweenMax - Script Codes CSS Codes

.puppet { position: relative; width: 300px; height: 300px; top: 50px; left: 600px;
}
.puppet li { position: absolute;
/* outline:1px solid red; */
}
/* position all the separate pieces */
.scooter{bottom: 0;left: 0;}
.kitty{top: 65px; left: 130px;}
.head{top: 0; left: 80px;}
.front{bottom: 12px; left:8px;}
.back{bottom: 8px; right:30px;}
/* adjust "anchor points" where needed SEE:https://css-tricks.com/almanac/properties/t/transform-origin/*/
.head{-webkit-transform-origin:120px 110px;transform-origin:120px 110px}
.puppet{-webkit-transform-origin:240px 280px;transform-origin:240px 280px}
/* ground just for fun */
footer{height: 200px;background-color: pink;margin-top: 30px;}

Hello Kitty Puppet Example TweenMax - Script Codes JS Codes

// spin wheelse
TweenMax.to('.wheel', 1, {rotation:"-=360", repeat:-1, ease:Power0.easeNone});
// bounce kitty
TweenMax.to('.kitty, .head', .1, {y:"-=4", repeat:-1, yoyo:true});
//drive in scooter
TweenMax.from('.puppet', 3, {x:"+=1000"});
//pop a wheelie
TweenMax.to('.puppet', .5, {delay:3, rotation:"+=30", x:"-=200", ease:Power1.easeIn});
TweenMax.to('.head', 1, {delay:2.8, rotation:"+=20", ease:Bounce.easeOut});
// speed up wheelse
TweenMax.to('.wheel', .3, {delay:3.5, rotation:"-=360", repeat:-1, ease:Power0.easeNone});
//drive off
TweenMax.to('.puppet', 1, {delay:4, x:"-=800",ease:Power2.easeIn});
Hello Kitty Puppet Example TweenMax - Script Codes
Hello Kitty Puppet Example TweenMax - Script Codes
Home Page Home
Developer Andy Hullinger
Username andyhullinger
Uploaded September 15, 2022
Rating 4
Size 2,576 Kb
Views 30,360
Do you need developer help for Hello Kitty Puppet Example TweenMax?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Hullinger (andyhullinger) Script Codes
Name
Simple photo captions
Banner Example
CSS type and layout - discrete elements
Semantic HTML for animated menus
MFA iteration example
Clean SVG Map of USA
Example Responsive Resume
My Quote Assignment
Presentation Template with Animation
Rolling Stone Example
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!