GSAP Starter Template

gsap-starter-template.markdown

GSAP Starter Template

A Pen by Hasan ALDOY on CodePen.

License.

index.html

<h1 id="heading">
  مرحبًا بكم
</h1>
<p>This pen loads all the GSAP files<br /> Fork and enjoy!</p>

script.js

gsap.registerPlugin(SplitText);

gsap.set("h1", { opacity: 1 });

let split = SplitText.create("#heading", { type: "chars" });
//now animate each character into place from 20px below, fading in:
gsap.from(split.chars, {
  y: 20,
  autoAlpha: 0,
  stagger: 0.05
});

scripts

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/CustomBounce.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/CustomEase.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/CustomWiggle.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/Draggable.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/DrawSVGPlugin.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/EaselPlugin.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/EasePack.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/Flip.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/GSDevTools.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/InertiaPlugin.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/MorphSVGPlugin.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/MotionPathHelper.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js"></script>
<script src="https://unpkg.com/gsap/dist/Observer.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/PhysicsPropsPlugin.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/Physics2DPlugin.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/PixiPlugin.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrambleTextPlugin.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollSmoother.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollToPlugin.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/SplitText.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/TextPlugin.min.js"></script>

style.css

body {
  font-family: Tajawal, sans-serif;
  background-color: #0e100f;
  color: #fffce1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
}

p {
  max-width: 70ch;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1.3;
}

h1 {
  opacity: 0;
}