scroll animation — week 21/52

index.html

<div class="intro">
  <div class="intro-content">
    <h1 class="intro-title intro-text">MUSTAFA KEMAL ATATÜRK</h1>
    <h2 class="intro-subtitle intro-text">FATHER OF THE TURKS</h2>

    <div class="bio">
      <div class="bio-content">
        <p> Atatürk was a Turkish nationalist leader and founder and first president of the republic of Turkey.</p>
        <p>
          Mustafa Kemal Atatürk was born in 1881 in Salonika (now Thessaloniki) in what was then the Ottoman Empire. His father was a minor official and later a timber merchant. When Atatürk was 12, he was sent to military school and then to the military academy
          in Istanbul, graduating in 1905.</p>
        <p>
          In 1911, he served against the Italians in Libya and then in the Balkan Wars (1912 - 1913). He made his military reputation repelling the Allied invasion at the Dardanelles in 1915.</p>
        <p>
          In May 1919, Atatürk began a nationalist revolution in Anatolia, organising resistance to the peace settlement imposed on Turkey by the victorious Allies. This was particularly focused on resisting Greek attempts to seize Smyrna and its hinterland. Victory
          over the Greeks enabled him to secure revision of the peace settlement in the Treaty of Lausanne.</p>
        <p>
          In 1921, Atatürk established a provisional government in Ankara. The following year the Ottoman Sultanate was formally abolished and, in 1923, Turkey became a secular republic with Atatürk as its president. He established a single party regime that lasted
          almost without interruption until 1945.</p>
        <p>
          He launched a programme of revolutionary social and political reform to modernise Turkey. These reforms included the emancipation of women, the abolition of all Islamic institutions and the introduction of Western legal codes, dress, calendar and alphabet,
          replacing the Arabic script with a Latin one. Abroad he pursued a policy of neutrality, establishing friendly relations with Turkey's neighbours.
        </p>
        <p>
          In 1935, when surnames were introduced in Turkey, he was given the name Atatürk, meaning 'Father of the Turks'. He died on 10 November 1938.</p>
      </div>
    </div>
  </div>
  <div class="intro-overlay"></div>
</div>
<div class="scroll-down">
  <svg stroke="#fff" fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"/></svg>
</div>

script.babel

const controller = new ScrollMagic.Controller();
const flightPath = {
  curviness: 1.6,
  values: [
    { webkitClipPath: 'circle(50% at 30% 110%)' },
    { webkitClipPath: 'circle(35% at -10% 40%)' },
    { webkitClipPath: 'circle(50% at 80% 34%)' },
    { webkitClipPath: 'circle(90% at 54% 34%)' }
  ]
};

const bioHeight = document.querySelector('.bio').offsetHeight + 10;

const introTween = new TimelineMax({onStart: () => { document.querySelector('.scroll-down') && document.querySelector('.scroll-down').remove(); }});
introTween
  .set('.bio', { height: 0 })
  .to('.intro', 5, { bezier: flightPath })
  .staggerFromTo('.intro-text', 2, { autoAlpha: 0, y: 60 }, { autoAlpha: 1, y: 0 }, .4, '-=2')
  .to('.intro-overlay', 4, { backgroundColor: 'rgba(0,0,0,.9)' }, 'bio')
  .to('.intro-content', 4, { height: '100%' }, 'bio')
  .to('.bio', 3, { height: bioHeight, autoAlpha: 1 },'bio+=.2')
  .staggerFromTo('.bio-content > *', 1, { autoAlpha: 0, y: 50 }, { autoAlpha: 1, y: 0 }, .4, 'bio+=.4')
  .set('.intro-content', { overflow: 'auto'})


const introScene = new ScrollMagic.Scene({
  triggerElement: '.intro',
  duration: 2000,
  triggerHook: 0
})
.setPin('.intro')
.setTween(introTween)
.addTo(controller)

window.addEventListener('resize', () => {
   new ScrollMagic.Scene({
  triggerElement: '.intro',
  duration: 2000,
  triggerHook: 0
})
.setPin('.intro')
.setTween(introTween)
.addTo(controller)
.addIndicators();
});
 
window.addEventListener('resize', () => {
 window.location.reload(false);
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js"></script>

scroll-animation-week-21-52.markdown

scroll animation — week 21/52

It works only Chrome and Safari.

A Pen by Beibit Sakhanov on CodePen.

License.

style.scss

* { box-sizing: border-box; }
body {background-color: #000; } 

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100, 300,400,600,700|Karla&display=swap');

$title-font: 'Josefin Sans', sans-serif;
$body-font: 'Karla', serif;

html, body { height: 100%; }

.intro {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url(https://cdn.travelatelier.com/wp-content/uploads/2016/07/mustafa-kemal-ataturk.jpg);
  background-repeat: no-repeat;
  clip-path: circle(10% at 50% 34%);

  &-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  
  &-title {
    font-size: 2.8em;
    color: #fff; 
    margin: 0;
    font-weight: 700;
    font-family: $title-font;
    text-shadow: 0 4px 8px rgba(0,0,0,.4);
    
    @media (max-width: 768px) {
      font-size: 1.5em;
    }
  }
  
  &-subtitle {
    font-size: 1.2em;
    color: #fff;
    font-family: $title-font;
    margin: .2em 0 0;
    font-weight: 400;
    
    @media (max-width: 768px) {
      font-size: .8em;
    }
  }
  
  &-content {
    width: 100%;
    padding: 6%;
    font-family: $body-font;
    font-size: 1.2em;
    line-height: 1.5;
    font-weight: 300;
    position: relative;
    z-index: 1;
  }
  
  &-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
  }
}

.bio {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  color: rgba(#fff, .65);
  font-size: 16px;
}

.scroll-down {
  position: fixed;
  bottom: 40px;
  left: calc(50% - 11px);
  width: 22px;
  height: 22px;
  animation-name: scroll;
  animation-duration: .5s;
  opacity: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}


@keyframes scroll {
  100% {
    opacity: 1;
    transform: translateY(24px);
  }
}