GSAP Animation with TweenMax
How do I make an gsap animation with tweenmax?
What is a gsap animation with tweenmax? How do you make a gsap animation with tweenmax? This script and codes were developed by Andy Hullinger on 15 September 2022, Thursday.
GSAP Animation with TweenMax - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>GSAP Animation with TweenMax</title> <link href='https://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *{margin:0; padding:0; box-sizing: border-box;
}
body{ text-align:center;
}
button{ width:80px; height:30px; margin-top:10px;
}
/*comment out to view original layout*/
/*#banner{ background-image:url(https://s.cdpn.io/1412/gsap_banner_layout.jpg);
}*/
#banner{ position:absolute; width:300px; height: 250px; border:1px solid grey; overflow:hidden; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
h1,h2,h3{ position:absolute; font-family:"Raleway"; font-weight:400;}
h1{ font-size:72px; font-weight:200; top:6px;left:10px;
}
h2{ font-size:18px; left:14px;
}
#txt1{ top:80px;
}
#txt2{ top:100px;
}
h3{ width:100%; height:40px; padding:4px 10px; font-size:20px; text-align:left; background-color:rgba(255,255,255,0.8); color:rgba(0,160,200,.7); font-size:20px; top:220px;
}
img{ position:absolute; top:40px; left:-300px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="banner"> <img id="photo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/gsap_banner_product.png"/> <h1 id="hed">iOS7</h1> <h2 id="txt1">The mobile OS with a</h2> <h2 id="txt2">whole new perspective.</h2> <h3 id="cta"><em>Learn more ></em></h3>
</div>
<!--<button id="replay"> replay </button>--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.8/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
GSAP Animation with TweenMax - Script Codes CSS Codes
*{margin:0; padding:0; box-sizing: border-box;
}
body{ text-align:center;
}
button{ width:80px; height:30px; margin-top:10px;
}
/*comment out to view original layout*/
/*#banner{ background-image:url(https://s.cdpn.io/1412/gsap_banner_layout.jpg);
}*/
#banner{ position:absolute; width:300px; height: 250px; border:1px solid grey; overflow:hidden; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
h1,h2,h3{ position:absolute; font-family:"Raleway"; font-weight:400;}
h1{ font-size:72px; font-weight:200; top:6px;left:10px;
}
h2{ font-size:18px; left:14px;
}
#txt1{ top:80px;
}
#txt2{ top:100px;
}
h3{ width:100%; height:40px; padding:4px 10px; font-size:20px; text-align:left; background-color:rgba(255,255,255,0.8); color:rgba(0,160,200,.7); font-size:20px; top:220px;
}
img{ position:absolute; top:40px; left:-300px;
}
GSAP Animation with TweenMax - Script Codes JS Codes
var myBannerTimeline = new TimelineLite();
myBannerTimeline.from('#photo',3, {top:'-=400', left:'+=600', ease:'Quad.easeOut'}) .from('#hed', 1, {scale:0, ease:'Back.easeOut'}) .from('#txt1', .5, {opacity:0, top:'-=20'}) .from('#txt2', 1.5 , {alpha:0, top:'-=30', ease:'Back.easeOut'}) .from('#cta', 2, {alpha:0}) .from('#cta>em', .5 , {alpha:0});
myBannerTimeline.add(TweenMax.to('#cta', .5, {'backgroundColor':'rgba(200,255,255,1)', repeat:1, yoyo:true}));
myBannerTimeline.timeScale(1.3);
Developer | Andy Hullinger |
Username | andyhullinger |
Uploaded | September 15, 2022 |
Rating | 3.5 |
Size | 2,993 Kb |
Views | 30,360 |
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!
Name | Size |
My Quote Assignment | 1,673 Kb |
Banner Example | 3,025 Kb |
Solved By Flexbox - an excerpt | 6,971 Kb |
A Pen by Andy Hullinger | 2,227 Kb |
Mageractive Class 1 | 2,505 Kb |
Simple photo captions | 2,030 Kb |
Rolling Stone Example | 5,809 Kb |
Simple example infographic pen | 2,618 Kb |
Example Infographic | 3,882 Kb |
Clean SVG Map of USA | 15,013 Kb |
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!
Name | Username | Size |
Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
A Pen by Alex Edwards | Exards | 8,218 Kb |
Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
SlideupBoxes | Gavra | 23,772 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!