Passport Flip Open with GSAP

Developer
John Heiner
Size
3,400 Kb
Views
38,456
  1. Passport Flip Open with GSAP Previews
  2. Passport Flip Open with GSAP HTML Codes
  3. Passport Flip Open with GSAP CSS Codes
  4. Passport Flip Open with GSAP JS Codes

How do I make an passport flip open with gsap?

GSAP Flip open and stamp. What is a passport flip open with gsap? How do you make a passport flip open with gsap? This script and codes were developed by John Heiner on 14 November 2022, Monday.

Passport Flip Open with GSAP Previews
IQ Test

Passport Flip Open with GSAP - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Passport Flip Open with GSAP</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="passport"> <div class="pp-back"> <div class="back-cover"></div> <div class="paper"> <div class="line line-1"></div> <div class="line line-2"></div> <div class="line line-3"></div> <div class="line line-4"></div> <div class="line line-5"></div> <div class="line line-6"></div> <div class="line line-7"></div> <div class="photo"></div> <div class="stamp"></div> </div> </div> <div class="pp-cover"> <div class="front"></div> <div class="back"></div> </div>
</div> <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.11.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Passport Flip Open with GSAP - Script Codes CSS Codes

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { background: #262523; position: relative;
}
.passport { width: 350px; height: 450px; display: inline-block; left: 250px; top: 50px; position: absolute;
}
.passport .pp-cover { position: absolute; left: 350px;
}
.passport .pp-cover .front { position: absolute; top: 0; left: 0; z-index: 50; border-radius: 0 50px 50px 0; background-image: linear-gradient(25deg, #00558a, #008cbd); display: block; height: 450px; width: 350px;
}
.passport .pp-cover .back { z-index: 40; border-radius: 50px 0px 0px 50px; position: absolute; top: 0; left: 0; background-color: #efefef; display: block; height: 440px; width: 340px; box-shadow: -10px 0px 0 #39425a, 0px 10px 0 #39425a; background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 100%);
}
.passport .pp-back { position: absolute; left: 350px;
}
.passport .pp-back .paper { border-radius: 0 50px 50px 0; position: absolute; top: 0; left: 0; background-color: #fff; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 30%); display: block; height: 440px; width: 340px;
}
.passport .pp-back .paper .stamp { background: #e74242; width: 100px; height: 300px; display: block; position: absolute; top: 100px; left: 200px;
}
.passport .pp-back .paper .photo { background: black; width: 150px; height: 150px; display: inline-block; top: 260px; left: 30px; position: absolute;
}
.passport .pp-back .paper .line { width: 8px; position: absolute; top: 40px; display: block; background: #39425a;
}
.passport .pp-back .paper .line.line-1 { height: 175px; left: 40px;
}
.passport .pp-back .paper .line.line-2 { height: 175px; left: 80px;
}
.passport .pp-back .paper .line.line-3 { height: 175px; left: 120px;
}
.passport .pp-back .paper .line.line-4 { height: 175px; left: 160px;
}
.passport .pp-back .paper .line.line-5 { height: 370px; left: 210px;
}
.passport .pp-back .paper .line.line-6 { height: 370px; left: 250px;
}
.passport .pp-back .paper .line.line-7 { height: 370px; left: 290px;
}
.passport .pp-back .back-cover { position: absolute; top: 0; left: 0; border-radius: 0 50px 50px 0; background: #39425a; display: block; height: 450px; width: 350px;
}

Passport Flip Open with GSAP - Script Codes JS Codes

TweenLite.set(".passport", {perspective:1600});
TweenLite.set(".pp-cover", {transformStyle:"preserve-3d"});
TweenLite.set([".back", ".front"], {backfaceVisibility:"hidden"});
TweenLite.set(".back", {rotationY:-180});
TweenLite.set(".stamp", {rotation: -10, autoAlpha: 0, scale: 5});
//TweenLite.set(".pp-cover", {rotationY:-45, });
/*TweenMax.to(".box-wrapper", 2, {rotation:360,repeat:-1,ease: Linear.easeNone});*/
var tl = new TimelineMax({ delay: 1, repeat: -1, repeatDelay: 1
});
tl.to('.pp-cover', 0.9, {rotationY: -180, transformOrigin: 'left center', ease: Power4.easeInOut}, 'open')
.to('.passport', 0.4,{rotation:90, transformOrigin: '450px 125px', ease: Power4.easeInOut}, 'open+=0.25')
.to('.stamp', 0.25, {scale: 1, autoAlpha: 1, ease: Power4.easeOut}, "+=0.3")
.to('.passport', 0.1, {scale: 0.98, ease: Power4.easeOut}, "-=0.1")
.to('.passport', 0.1, {scale: 1, ease: Power4.easeOut})
;
//tl.stop();
/*tl.play('open');*/
tl.timeScale(1);
Passport Flip Open with GSAP - Script Codes
Passport Flip Open with GSAP - Script Codes
Home Page Home
Developer John Heiner
Username johnheiner
Uploaded November 14, 2022
Rating 3
Size 3,400 Kb
Views 38,456
Do you need developer help for Passport Flip Open with GSAP?

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!

John Heiner (johnheiner) Script Codes
Name
Loading Icon
Some Button Styles
Loading Animation
Unboxed Technology Footer Animation
Breaking Lists at specific points without floats.
A Pen by John Heiner
Animated River Depth measurement
Social Icon System
Rounded Triangle
Canvas Mask Page Intro Animation
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!