Create a ScrollTrigger - SVG Text Mask Animation with source code and live demo - ScrollTrigger - SVG Text Mask.

Home > Etc > Codepen > ScrollTrigger - SVG Text Mask

So this project is based on the Music Player,

This is a recreation of Unfold's
Parallax Scene:(https://dribbble.com/unfold)
https://cdn.dribbble.com/users/14268/screenshots/3275340/northface.gif
Mountain imagery from www.worldwildlife.org

Support me by you can Subscribe to my YouTube channel.
Link is avaible any where in the page.

We are not the original owner of this project.

HTML

First, Create an HTML file with the name of index.html and paste the code given below, in your HTML file. Remember, you’ve to create a file with .html extension.

Note*: Click on the HTML Code then press ctrl + A to select the whole HTML Code, then ctrl + C to copy.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> ScrollTrigger: SVG Text Mask</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>


<div class="scrollDist"></div>
<div class="main">
  <svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
    <mask id="m">
      <g class="cloud1">
        <rect fill="#fff" width="100%" height="801" y="799" />
        <image xlink:href="https://assets.codepen.io/721952/cloud1Mask.jpg" width="1200" height="800"/>
      </g>
    </mask>
    
    <image class="sky" xlink:href="https://assets.codepen.io/721952/sky.jpg"  width="1200" height="590" />
    <image class="mountBg" xlink:href="https://assets.codepen.io/721952/mountBg.png" width="1200" height="800"/>    
    <image class="mountMg" xlink:href="https://assets.codepen.io/721952/mountMg.png" width="1200" height="800"/>    
    <image class="cloud2" xlink:href="https://assets.codepen.io/721952/cloud2.png" width="1200" height="800"/>    
    <image class="mountFg" xlink:href="https://assets.codepen.io/721952/mountFg.png" width="1200" height="800"/>
    <image class="cloud1" xlink:href="https://assets.codepen.io/721952/cloud1.png" width="1200" height="800"/>
    <image class="cloud3" xlink:href="https://assets.codepen.io/721952/cloud3.png" width="1200" height="800"/>
    <text fill="#fff" x="350" y="200">SOMRAJ</text>
    <polyline class="arrow" fill="#fff" points="599,250 599,289 590,279 590,282 600,292 610,282 610,279 601,289 601,250" />
    
    <g mask="url(#m)">
      <rect fill="#fff" width="100%" height="100%" />      
      <text x="350" y="200" fill="#162a43">CODROID</text>
    </g>
    
    <rect id="arrowBtn" width="100" height="100" opacity="0" x="550" y="220" style="cursor:pointer"/>
  </svg>
</div>

  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'></script><script  src="./script.js"></script>

</body>
</html>

Css

Second, Create a CSS file with the name of style.css and paste the code given below, in your CSS file. Remember, you’ve to create a file with .css extension.

Note*: Click on the Css Code then press ctrl + A to select the whole Css Code, then ctrl + C to copy.

JavaScript

Third, Create a JS file with the name of script.js and paste the code given below in your Javascript file. Remember, you’ve to create a file with .js extension.

Note*: Click on the JS Code then press ctrl + A to select the whole JS Code, then ctrl + C to copy.

gsap.set('.main', {position:'fixed', background:'#fff', width:'100%', maxWidth:'1200px', height:'100%', top:0, left:'50%', x:'-50%'})
gsap.set('.scrollDist', {width:'100%', height:'200%'})
gsap.timeline({scrollTrigger:{trigger:'.scrollDist', start:'top top', end:'bottom bottom', scrub:1}})
    .fromTo('.sky', {y:0},{y:-200}, 0)
    .fromTo('.cloud1', {y:100},{y:-800}, 0)
    .fromTo('.cloud2', {y:-150},{y:-500}, 0)
    .fromTo('.cloud3', {y:-50},{y:-650}, 0)
    .fromTo('.mountBg', {y:-10},{y:-100}, 0)
    .fromTo('.mountMg', {y:-30},{y:-250}, 0)
    .fromTo('.mountFg', {y:-50},{y:-600}, 0)

$('#arrowBtn').on('mouseenter', (e)=>{ gsap.to('.arrow', {y:10, duration:0.8, ease:'back.inOut(3)', overwrite:'auto'}); })
$('#arrowBtn').on('mouseleave', (e)=>{ gsap.to('.arrow', {y:0, duration:0.5, ease:'power3.out', overwrite:'auto'}); })
$('#arrowBtn').on('click', (e)=>{ gsap.to(window, {scrollTo:innerHeight, duration:1.5, ease:'power1.inOut'}); }) // scrollTo requires the ScrollTo plugin (not to be confused w/ ScrollTrigger)

One-Tap to Get the File

Note*: After Clicking the Download button wait for sometime.
If the source file dosen't start to download, then allow this site to download files in your system.

Frequently Asked Questions

Q 1: Can I use this Source Code without giving credits ?

Ans: Yes, you can use but if your bring this projects, then should give us a credit at footer, because it takes alot time make all thess kinds of projects now if you ask that I want to bring it online but I will not give any credits to the developers & the provider then it is very wrong.

Q 2: Actually I want to bring this project online but I don't want to give credits ?

Ans: Ok, we have problem but also you cannot claim that it is made by you.
It is not all about flex you should increase you knowledge.

Q 3: If I am bringing this project online and not giving credits & claiming it is developed by me then ?

Ans: Ok, 1-3 times you will be warned and your that site will be suspended.
Still if you continue, then it can become to a legal things.