Bootstrap Snippet Scroll reveal animations using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="cInnerContent">
  <h1 class="header-section gs_reveal ipsType_center">Scroll reveal animations</h1>
  
  <div class="features">
    <div class="feature ipsSpacer_bottom_double ipsGrid ipsGrid_collapsePhone">
      <div class="featured-image-container ipsGrid_span5 gs_reveal gs_reveal_fromLeft">
        <div class="card">
          <img width="479" src="https://picsum.photos/479/479?index=1" alt="">
        </div>
      </div>
      <div class="ipsGrid_span7 ipsType_left">
        <h2 class="heading_large gs_reveal">Create amazing <strong>SVG</strong> animations</h2>
        <p class="gs_reveal"><a href="https://greensock.com/drawsvg/">DrawSVGPlugin</a> allows you to progressively reveal (or hide) SVG strokes to make them look like they're being drawn. <a href="https://greensock.com/morphsvg/">MorphSVGPlugin</a> to Morph any SVG shape into any other shape smoothly regardless of the number of points in each. <a href="/docs/v3/Plugins/MotionPathPlugin">MotionPathPlugin</a> allows you to easily move any object along a path.</p>
      </div>
    </div>
    <div class="feature ipsSpacer_bottom_double ipsGrid ipsGrid_collapsePhone">
      <div class="ipsGrid_span7 ipsType_right">
        <h2 class="heading_large gs_reveal">Supercharge immersive <strong>WebGL</strong> experiences</h2>
        <p class="gs_reveal">GreenSock is used in some of the most popular <a href="//threejs.org/">Three.js</a> powered WebGL projects. Animate any object in a scene. <a href="https://greensock.com/PixiPlugin/">PixiPlugin</a> makes animating <a href="//www.pixijs.com/">Pixi.js</a> objects with GSAP a breeze. Animate position, scale, color effects and more with all the power and control of GSAP and the rendering speed of Pixi.js.</p>
      </div>
      <div class="featured-image-container ipsGrid_span5 gs_reveal gs_reveal_fromRight">
        <div class="card">
          <img width="479" src="https://picsum.photos/479/479?index=2" alt="">
        </div>
      </div>
    </div>
    <div class="feature ipsSpacer_bottom_double ipsGrid ipsGrid_collapsePhone">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Styles from the GreenSock website */
body {
  font-weight: 300;
}
.ipsType_right {
  text-align: right;
}
.ipsType_center {
  text-align: center;
}
.cInnerContent {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
.ipsSpacer_bottom_double {
  margin-bottom: 30px;
}
.ipsGrid {
  display: inline-block;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.ipsGrid::before, .ipsGrid::after {
  display: table;
  content: "";
  line-height: 0;
}
.ipsGrid > [class*=ipsGrid_span] {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function animateFrom(elem, direction) {
  direction = direction || 1;
  var x = 0,
      y = direction * 200;
  if(elem.classList.contains("gs_reveal_fromLeft")) {
    x = -300;
    y = 300;
  } else if (elem.classList.contains("gs_reveal_fromRight")) {
    x = 300;
    y = 300;
  }
  elem.style.transform = "translate(" + x + "px, " + y + "px)";
  elem.style.opacity = "0";
  gsap.fromTo(elem, {x: x, y: y, autoAlpha: 0}, {
    duration: 2.25,   
    x: 0,
    y: 0, 
    autoAlpha: 1, 
    ease: "expo", 
   // overwrite: "auto"
  });
}
function hide(elem) {
  gsap.set(elem, {autoAlpha: 0});
}
document.addEventListener("DOMContentLoaded", function() {
  gsap.registerPlugin(ScrollTrigger);
  
  gsap.utils.toArray(".gs_reveal").forEach(function(elem) {
    hide(elem); // assure that the element is hidden when scrolled into view
    
    ScrollTrigger.create({
      trigger: elem,
      onEnter: function() { animateFrom(elem) }, 
      onEnterBack: function() { animateFrom(elem, -1) },
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Scroll reveal animations"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Scroll reveal animations" Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Scroll reveal animations"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY