Greenstock GSAP Test

Developer
Daniel Murphy
Size
5,401 Kb
Views
20,240
  1. Greenstock GSAP Test Previews
  2. Greenstock GSAP Test HTML Codes
  3. Greenstock GSAP Test CSS Codes
  4. Greenstock GSAP Test JS Codes

How do I make an greenstock gsap test?

What is a greenstock gsap test? How do you make a greenstock gsap test? This script and codes were developed by Daniel Murphy on 09 September 2022, Friday.

Greenstock GSAP Test Previews
IQ Test

Greenstock GSAP Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Greenstock GSAP Test</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="gsap-banner"> <div class="gsap-panel" id="panel3"> <div class="gsap-card"> <div class="cardFace front"> <h2>Myth: Newman is too expensive</h2> <h3>Discover how affordable a quality education at Newman University can be.</h3> <button class="play start-button">Click to Start</button> </div> <div class="cardFace back"> <div class="cardface-inner"> <div class="cost-action"> <p>The information to follow is based on:</p> <ul> <li>2017-18 School Year Estimates</li> <li>Incoming Freshman</li> <li>High School GPA - 3.25</li> <li>ACT Score - 27</li> <li>Kansas Resident</li> <li>On Campus Housing</li> </ul> <div class="cost-block"> <p>How much will it cost?</p> <button type="button" class="btn btn-default play">Find out</button> </div> </div> <div class="tuition-fees"> <table class="table"> <tbody> <tr> <td colspan="3"><h3 class="text-center">Tuition & Fees</h3></td> </tr> <tr> <th></th> <th>Newman</th> <th>4-Yr Public</th> </tr> <tr> <td>Est. Tuition & Fees</td> <td>$29,360</td> <td>$7,947</td> </tr> <tr> <td>Est. Room & Board</td> <td>8,292</td> <td>8,440</td> </tr> <tr> <td>Est. Books & Tuition</td> <td>1,000</td> <td>1,000</td> </tr> <tr> <td>Total Est. Expenses</td> <td class="nu-tuition-fees-total total" data-count="38652">0</td> <td class="pub-tuition-fees-total total" data-count="17387">0</td> </tr> </tbody> </table> </div> <div class="savings-action"> <p>But don't worry! See how we compare in grants and scholarships.</p> <button type="button" class="btn btn-default play">View the Discounts</button> </div> <div class="grants-scholarships"> <table class="table"> <tbody> <tr> <td colspan="3"><h3 class="text-center">Grants & Scholarships</h3></td> </tr> <tr> <th></th> <th>Newman</th> <th>4-Yr Public</th> </tr> <tr> <td>Est. Pell Grant</td> <td>$1,470</td> <td>$1,470</td> </tr> <tr> <td>Est. Other Grants &amp; Scholarships</td> <td>3,500</td> <td>1,100</td> </tr> <tr> <td>Institutional Scholarships/Grants</td> <td>21,930</td> <td>2,000</td> </tr> <tr> <td>Total Est. Tuition & Scholarships</td> <td class="nu-grants-scholarships-total total" data-count="26900">0</td> <td class="pub-grants-scholarships-total total" data-count="4570">0</td> </tr> </tbody> </table> </div> <div class="bottom-line-action"> <p>That's better. Now let's compare the bottom line by including the cost and financial aid.</p> <button type="button" class="btn btn-default play">Get the Bottom Line</button> </div> <div class="bottom-line"> <table class="table"> <tbody> <tr> <td colspan="3"><h3 class="text-center">Bottom Line Comparison</h3></td> </tr> <tr> <th></th> <th>Newman</th> <th>4-Yr Public</th> </tr> <tr> <td>Total Estimated Expenses</td> <td>$38,652</td> <td>$17,387</td> </tr> <tr> <td>Less: Total Est. Grants & Scholarships</td> <td>-26,900</td> <td>-4,570</td> </tr> <tr> <td>Less: Federal Direct Loan</td> <td>-5,500</td> <td>-5,500</td> </tr> <tr> <td>Total Out of Pocket Expenses</td> <td class="nu-oop total" data-count="6252">0</td> <td class="public-oop total" data-count="7317">0</td> </tr> </tbody> </table> </div> <div class="call-to-action"> <p>Newman University is surprisingly more affordable than most people think when it comes down to the bottom line.</p> <a href="" id="showSavings" class="btn btn-primary">View Scholarships</a> </div> </div> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.4/numeral.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Greenstock GSAP Test - Script Codes CSS Codes

.html { margin: 0; padding: 0;
}
body { background: #333;
}
.total { font-size: 22px;
}
.start-button { background: none; border: 4px solid #fff; color: #fff; margin: 40px auto; width: 150px; display: block; font-size: 20px; transition: .3s;
}
.start-button:hover { color: orange; border: 4px solid orange; transition: .3s; background: #333;
}
.savings-action,
.bottom-line-action,
.cost-block,
.call-to-action { background: #444; border: 2px solid orange; width: 100%; height: 160px; padding: 15px; margin: auto; font-size: 18px; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; color: #eee; position: absolute;
}
.savings-action button,
.bottom-line-action button,
.cost-block button,
.call-to-action button { cursor: pointer;
}
.cost-block { top: 200px;
}
.cost-action { top: 40px; left: 0; right: 0; bottom: 0; position: absolute; margin: auto; font-size: 18px; color: #eee; width: 350px;
}
.savings-action,
.bottom-line-action,
.call-to-action { margin-top: 2000px;
}
table { color: #eee; position: relative; font-size: 1.5em; margin-top: 10px;
}
.tuition-fees,
.grants-scholarships,
.bottom-line { position: absolute; width: 100%; transition: .5s; opacity: 0;
}
table { font-size: 16px;
}
.total { border-top: 1px single #333;
}
.gsap-banner { position: relative; border: 1px solid #111; width: 80%; margin: 30px auto; top: 0; overflow: hidden; background: rgba(255, 255, 255, 0.5);
}
/*.banner img,*/
.panel,
.gsap-card { position: absolute;
}
#panel3 { width: 80% !important; margin-left: 10%;
}
.gsap-card { height: 625px; top: -1000px; position: relative; /* -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1);*/
}
.cardface-inner { margin-left: 2%; padding: 15px 0; position: relative; width: 96%; display: block; overflow: hidden; height: 625px;
}
.cardFace { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; min-height: 233px; image-rendering: auto;
}
.front { background: #b52c34; /*outline:0 none transparent; border:1px solid #999;*/ border-radius: 8px; padding: 20px;
}
.front h2,
.front h3 { text-align: center; color: #fff; margin-top: 40px;
}
.front h2 { margin-top: 100px;
}
.back { background: #333; /*outline:0 none transparent; border:1px solid #999;*/ border-radius: 8px; width: 100%;
}

Greenstock GSAP Test - Script Codes JS Codes

//---------Counters------//
jQuery(document).ready(function($) { function countUp(topNum, outputSelector, speed, interval) { var counter = 0; var stopcount = parseInt(topNum); var countInterval = setInterval(function() { $(outputSelector).text(numeral(counter).format('$0,0')); counter = counter + interval; if (counter >= stopcount) { $(outputSelector).text(numeral(topNum).format('$0,0')); clearInterval(countInterval); } }, speed); } function newmanTuitionFees() { var inputSelector = $('.nu-tuition-fees-total'); var topNum = inputSelector.attr('data-count'); var outputSelector = '.nu-tuition-fees-total'; inputSelector.css('color', 'orange'); countUp(topNum, outputSelector, 3, 85); } function publicTuitionFees() { var inputSelector = $('.pub-tuition-fees-total'); var topNum = inputSelector.attr('data-count'); var outputSelector = '.pub-tuition-fees-total'; inputSelector.css('color', 'orange'); countUp(topNum, outputSelector, 3, 35); } function newmanGrantsScholarships() { var inputSelector = $('.nu-grants-scholarships-total'); var topNum = inputSelector.attr('data-count'); var outputSelector = '.nu-grants-scholarships-total'; inputSelector.css('color', 'orange'); countUp(topNum, outputSelector, 3, 80); } function publicGrantsScholarships() { var inputSelector = $('.pub-grants-scholarships-total'); var topNum = inputSelector.attr('data-count'); var outputSelector = '.pub-grants-scholarships-total'; inputSelector.css('color', 'orange'); countUp(topNum, outputSelector, 3, 20); } function newmanBottomLine() { var inputSelector = $('.nu-oop'); var topNum = inputSelector.attr('data-count'); var outputSelector = '.nu-oop'; inputSelector.css('color', 'orange'); countUp(topNum, outputSelector, 3, 20); } function publicBottomLine() { var inputSelector = $('.public-oop'); var topNum = inputSelector.attr('data-count'); var outputSelector = '.public-oop'; inputSelector.css('color', 'orange'); countUp(topNum, outputSelector, 3, 20); } //--------end counters--------// //---------GSAP Timeline-------// TweenLite.set("#panel3", { perspective: 800 }); TweenLite.set(".gsap-card", { transformStyle: "preserve-3d" }); TweenLite.set(".back", { rotationY: -180 }); TweenLite.set([".back", ".front"], { backfaceVisibility: "hidden" }); var tl = new TimelineMax({ delay: 0.2, //repeat:-1, //yoyo:true }) tl.to(".gsap-card", 1, { scale: .8, top: -10 }) .to(".gsap-card", 2, { rotationY: -10, }, "-=.2") .addPause() .to(".gsap-card", 2, { rotationY: -170, delay: .2 }, "-=.2") .to(".gsap-card", 1, { rotationY: -180, }, "-=.2") .addPause() .to(".cost-action,.cost-block", .5, { delay: .2, marginTop: -1000 }, "-=.2") .to(".tuition-fees", .5, { opacity: 100 }, "-=.2") .add(newmanTuitionFees, "-=.2") .add(publicTuitionFees, "-=.2") .to(".savings-action", .5, { delay: 2, marginTop: 400 }, "-=.2") .addPause() .to(".savings-action", .5, { delay: .2, marginTop: 1000 //display:inline; }, "-=.2") .to(".tuition-fees", .5, { marginTop: -1000 }, "-=.2") .to(".grants-scholarships", .5, { delay: 1, opacity: 100 }, "-=.2") .add(newmanGrantsScholarships, "-=.2") .add(publicGrantsScholarships, "-=.2") .to(".bottom-line-action", .5, { delay: 2, marginTop: 400 }, "-=.2") .addPause() .to(".bottom-line-action", .5, { delay: .2, marginTop: 1000 }, "-=.2") .to(".grants-scholarships", .5, { marginTop: -1000 }, "-=.2") .to(".bottom-line", .5, { delay: 1, opacity: 100 }, "-=.2") .add(newmanBottomLine, "-=.2") .add(publicBottomLine, "-=.2") .to(".call-to-action", .5, { delay: 2.5, marginTop: 400 }, "-=.2"); var play = $('.play'), restart = $('#restart'); play.click(function() { tl.play(); })
})
Greenstock GSAP Test - Script Codes
Greenstock GSAP Test - Script Codes
Home Page Home
Developer Daniel Murphy
Username dsm
Uploaded September 09, 2022
Rating 3
Size 5,401 Kb
Views 20,240
Do you need developer help for Greenstock GSAP Test?

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!

Daniel Murphy (dsm) Script Codes
Name
Thermometer
Speed Reader
Menu Item Limit
Flexbanner Center of a Center
US MAP SVG With Hover
Flex Test
For Freddy
Testing Buttons
GSAP Simple Slide with Toggle - Testing
Adaptive Quiz
Create amazing blog posts 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!