Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section style="height:100vh; background:aqua;"></section>
<section>
  <div class="container">
<div id="whyNot" class="whynot">
   <div class="why">
     <h5>You are satisfied with what you have now.</h5><p>If you don't have the drive to prosper in life, then xyz may not be for you.</p>
   </div>
   <div class="why">
     <h5>You enjoy doing the same repetitive tasks every day.</h5><p>If you don’t like being with people who spend more time on research than routine work, then xyz may not be for you.</p>    
     </div>
   <div class="why"><h5>You doubt big ideas and risks.</h5><p>If you spend more time finding excuses for, than solutions to, a problem; then zyz may not be for you.</p></div>
  <div class="why"><h5>You started liking current technology more than future possibilities.</h5><p>If you think you are not good enough to change technology, then zyz may not be for you.</p>  
   </div>
   <div class="why"><h5>You believe your growth is a personal matter and the company should not take any interest in it.</h5><p>If you don’t like weekly knowledge sharing seminars and company take interest in your personal growth then zyz may not be for you.</p>
   </div>
   <div class="why"><h5>You think the company should never care about employee’s growth unless asked by employee.</h5><p>If you think facilitating employee is waste of resources, then zyz may not be for you.</p></div><div class="why"><h5>You don’t like working in a free environment.</h5><p>If you think you can only work well if someone puts a lot of restrictions on your work, then zyz may not be for you.</p></div>
   <div class="why"><h5>If you think work is a duty and not a passion;</h5><p>and if you get frustrated among people who are too good to be true, then zyz
     may not be for you.</p></div>
</div>
  </div>
</section> 
  <section style="height:100vh; background:aqua;">
              
            
!

CSS

              
                *,*::before,*::after{
  margin:0;
  padding: 0;
}
html{
  font-size:10px;
}

.whynot{
    display: flex;
    flex-direction: column;
    margin: 8rem 0;
    
}

.why{
    border: solid red;
    text-align: left;
    flex-basis: 50%;
    max-width: 50%;
    opacity: 0;
    border: 2px solid;
    margin: 2rem 0;
    h5{
        font-size: 25px;
        line-height: 34px;
        color: #262626;
    }
    p{
        font-size: 16px;
        line-height: 25px;
        color: #828282;
    }
    &:nth-child(odd){
        align-self: flex-start;
        // transform: translateX(50%);
    }
    &:nth-child(even){
        align-self: flex-end;
        // transform: translateX(-50%);
    }

}
              
            
!

JS

              
                const wn = document.querySelectorAll('.why');
wn.forEach((e,i)=>{
  gsap.set(e,{ autoAlpha:0 });
    ScrollTrigger.create({
      trigger: e,
      start: "top center",
      markers:true,
      scrub:1,
      invalidateOnRefresh:true,
      id:"dd" + i,
      end: `+=${e.offsetHeight}`,
      onEnter: () => {
        console.log("Enter", i);
        return animate(e);
      },
      onLeave: () => {
        console.log("Leave", i);
       return reverseAnimate(e);
      },
      onEnterBack: () => {
        console.log("Enter Back", i);
        return animate(e);
      },
      onLeaveBack: () => {
        console.log("Leave Back", i);
        return reverseAnimate(e);
      },
    });
})


function animate(e) {
    gsap.fromTo(
      e,
      { autoAlpha: 0, y:100 },
      { autoAlpha: 1, y:0, duration: 1, ease: "power2.out" }
    );
  }

  function reverseAnimate(e) {
    gsap.fromTo(
     e,
      { autoAlpha: 1, y:0 },
      { autoAlpha: 0, y:-100, duration: 0.3, ease: "power2.in" }
    );
  }
              
            
!
999px

Console