Created
April 27, 2023 05:07
-
-
Save mfrancois3k/76b5a5b20e34dc5a3f19cdbfbbfa86d9 to your computer and use it in GitHub Desktop.
Gsap Simple loading page wipe #effects #gsap #JavaScript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Apply margin and padding to all elements */ | |
| *{ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /* Set font and hide overflow on body */ | |
| body{ | |
| font-family: 'Monument'; | |
| overflow: hidden; | |
| } | |
| /* Define styles for the animation container */ | |
| .animation{ | |
| position: absolute; /* Position absolutely */ | |
| top: 0; /* Align to the top */ | |
| left: 0; /* Align to the left */ | |
| height: 100vh; /* Set height to full viewport height */ | |
| display: flex; /* Use flexbox for layout */ | |
| align-items: center; /* Center vertically */ | |
| white-space: nowrap; /* Don't wrap text */ | |
| background-color: black; /* Set background color */ | |
| color: white; /* Set text color */ | |
| overflow: hidden; /* Hide overflow */ | |
| justify-content: center; /* Center horizontally */ | |
| z-index: 100; /* Set z-index to 100 */ | |
| width: 100%; /* Set width to full viewport width */ | |
| } | |
| /* Define styles for the animated text */ | |
| .animate{ | |
| font-size: 100px; /* Set font size */ | |
| text-transform: uppercase; /* Transform text to uppercase */ | |
| color: #e0e0e0; /* Set text color */ | |
| animation: animate 10s linear infinite; /* Apply animation */ | |
| } | |
| /* Define animation */ | |
| @keyframes animate { | |
| 0%{ | |
| transform: translateX(-100%); /* Move text left */ | |
| } | |
| 100%{ | |
| transform: translateX(100%); /* Move text right */ | |
| } | |
| } | |
| /* Define styles for the highlighted text */ | |
| .animate span{ | |
| -webkit-text-fill-color: transparent; /* Set text fill color to transparent */ | |
| -webkit-text-stroke: 1px #39ff14; /* Add stroke to text */ | |
| margin-left: 10px; /* Add left margin */ | |
| margin-right: 10px; /* Add right margin */ | |
| } | |
| /* Define styles for the main content container */ | |
| .container{ | |
| position: absolute; /* Position absolutely */ | |
| top: 0; /* Align to the top */ | |
| left: 0; /* Align to the left */ | |
| display: flex; /* Use flexbox for layout */ | |
| align-items: center; /* Center vertically */ | |
| justify-content: center; /* Center horizontally */ | |
| background-color: #f7f7f7; /* Set background color */ | |
| width: 100%; /* Set width to full viewport width */ | |
| height: 100vh; /* Set height to full viewport height */ | |
| } | |
| /* Define styles for the main heading */ | |
| .container h1{ | |
| color: black; /* Set text color */ | |
| font-family: 'Neutral Face'; /* Set font */ | |
| text-transform: uppercase; /* Transform text to uppercase */ | |
| overflow: hidden; /* Hide overflow */ | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Wait for the page to load before executing any JavaScript code | |
| window.addEventListener("load", function() { | |
| // Create a timeline object using GSAP library | |
| const timeline = gsap.timeline(); | |
| // Fade out the "loading" animation after a delay of 3 seconds | |
| timeline.to(".animate", { | |
| delay: 3, | |
| duration: .5, | |
| opacity: 0 | |
| }); | |
| // Slide up the "loading" animation after a delay of 1 second | |
| timeline.to(".animation", { | |
| delay: 1, | |
| duration: 1, | |
| y: "100%", | |
| ease: "power4.out" | |
| }); | |
| // Set the z-index of the "loading" animation to -1 | |
| timeline.to(".animation", { | |
| zIndex: -1 | |
| }); | |
| // Animate the heading in the main container element | |
| timeline.from(".container h1", { | |
| delay: .5, | |
| duration: .8, | |
| skewY: 10, | |
| y: 100, | |
| x: -199, | |
| opacity: 0 | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <!-- animation --> | |
| <div class="animation"> | |
| <h1 class="animate">loading<span>loading</span>loading<span>loading</span></h1> | |
| <h1 class="animate">loading<span>loading</span>loading<span>loading</span></h1> | |
| <h1 class="animate">loading<span>loading</span>loading<span>loading</span></h1> | |
| <h1 class="animate">loading<span>loading</span>loading<span>loading</span></h1> | |
| <h1 class="animate">loading<span>loading</span>loading<span>loading</span></h1> | |
| <h1 class="animate">loading<span>loading</span>loading<span>loading</span></h1> | |
| </div> | |
| <!-- main-page --> | |
| <div class="container"> | |
| <h1>Taimoor Shahzada</h1> | |
| </div> | |
| <!-- script --> | |
| <script src="js/script.js"></script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment