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

              
                <body>
      <div class="limitless">
       <!-- <?xml version="1.0" encoding="UTF-8"?> -->
            <svg width="457px" height="366px" viewBox="0 0 457 366" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com 
        <title>lc</title>
        <desc>Created with Sketch.</desc>-->
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Artboard" transform="translate(-62.000000, -63.000000)">
                <g id="lc" transform="translate(62.000000, 63.000000)">
                    <circle id="circle1" stroke="#FFFFFF" cx="273" cy="183" r="68.5"></circle>
                    <circle id="circle2" stroke="#FFFFFF" cx="273.5" cy="182.5" r="127"></circle>
                    <circle id="circle3" stroke="#FFFFFF" cx="274" cy="183" r="182.5"></circle>
                    <polygon id="Triangle" fill="#212228" transform="translate(153.000000, 183.209013) rotate(-270.000000) translate(-153.000000, -183.209013) " points="153 90.2090128 233.5 276.209013 72.5 276.209013"></polygon>
                    <g id="limitless_creation" transform="translate(0.000000, 154.000000)" fill-rule="nonzero">
                        <circle id="smallbigcircle" fill="#FFFFFF" cx="273.426" cy="29" r="29"></circle>
                        <circle id="blackpoint" fill="#212228" transform="translate(273.426000, 29.000000) scale(-1, 1) rotate(-180.000000) translate(-273.426000, -29.000000) " cx="273.426" cy="29" r="5"></circle>
                        <g id="copy" transform="translate(0.000000, 19.880000)" fill="#FFFFFF">
                            <polygon id="Path" points="9.54791801e-15 15.12 9.54791801e-15 0.126 3.129 0.126 3.129 15.12"></polygon>
                            <path d="M5.02539,15.12 L5.02539,4.158 L8.15439,4.158 L8.15439,15.12 L5.02539,15.12 Z M4.98339,2.688 L4.98339,1.31006317e-12 L8.19639,1.31006317e-12 L8.19639,2.688 L4.98339,2.688 Z" id="Shape"></path>
                            <path d="M26.3048,15.12 L26.3048,8.547 C26.3048,7.749 26.1368,7.175 25.8008,6.825 C25.4788,6.475 24.9608,6.3 24.2468,6.3 C23.4488,6.3 22.7278,6.601 22.0838,7.203 C21.8458,7.427 21.6568,7.693 21.5168,8.001 C21.3768,8.295 21.3068,8.603 21.3068,8.925 L21.3068,15.12 L18.1778,15.12 L18.1778,8.547 C18.1778,7.763 18.0098,7.196 17.6738,6.846 C17.3518,6.482 16.8338,6.3 16.1198,6.3 C15.2798,6.3 14.5588,6.622 13.9568,7.266 C13.4388,7.812 13.1798,8.442 13.1798,9.156 L13.1798,15.12 L10.0508,15.12 L10.0508,4.158 L13.1168,4.158 L13.1168,5.922 C14.2228,4.522 15.5948,3.822 17.2328,3.822 C18.1428,3.822 18.9128,4.011 19.5428,4.389 C20.1728,4.753 20.6348,5.285 20.9288,5.985 C21.5168,5.257 22.1748,4.718 22.9028,4.368 C23.6308,4.004 24.4568,3.822 25.3808,3.822 C26.6828,3.822 27.6838,4.186 28.3838,4.914 C29.0838,5.628 29.4338,6.657 29.4338,8.001 L29.4338,15.12 L26.3048,15.12 Z" id="Path"></path>
                            <path d="M31.2363,15.12 L31.2363,4.158 L34.3653,4.158 L34.3653,15.12 L31.2363,15.12 Z M31.1943,2.688 L31.1943,1.31006317e-12 L34.4073,1.31006317e-12 L34.4073,2.688 L31.1943,2.688 Z" id="Shape"></path>
                            <path d="M44.3257,14.868 C43.3457,15.176 42.3167,15.33 41.2387,15.33 C39.8527,15.33 38.8447,15.022 38.2147,14.406 C37.5847,13.776 37.2697,12.782 37.2697,11.424 L37.2697,6.489 L35.1487,6.489 L35.1487,4.158 L37.2697,4.158 L37.2697,1.239 L40.3987,1.239 L40.3987,4.158 L43.9897,4.158 L43.9897,6.489 L40.3987,6.489 L40.3987,11.319 C40.3987,11.865 40.5317,12.271 40.7977,12.537 C41.0637,12.789 41.4837,12.915 42.0577,12.915 C42.6597,12.915 43.2757,12.817 43.9057,12.621 L44.3257,14.868 Z" id="Path"></path>
                            <polygon id="Path" points="45.1016 15.12 45.1016 0.126 48.2306 0.126 48.2306 15.12"></polygon>
                            <path d="M52.542,10.395 C52.556,10.941 52.703,11.424 52.983,11.844 C53.277,12.264 53.676,12.593 54.18,12.831 C54.698,13.069 55.293,13.188 55.965,13.188 C57.603,13.188 58.618,12.691 59.01,11.697 L61.929,11.697 C61.635,12.971 60.984,13.916 59.976,14.532 C58.982,15.148 57.61,15.456 55.86,15.456 C53.872,15.456 52.325,14.959 51.219,13.965 C50.127,12.971 49.581,11.578 49.581,9.786 C49.581,8.638 49.833,7.616 50.337,6.72 C50.855,5.81 51.59,5.103 52.542,4.599 C53.508,4.081 54.635,3.822 55.923,3.822 C57.883,3.822 59.395,4.319 60.459,5.313 C61.537,6.293 62.076,7.672 62.076,9.45 L62.076,10.395 L52.542,10.395 Z M59.157,8.484 C59.129,7.714 58.828,7.119 58.254,6.699 C57.68,6.265 56.882,6.048 55.86,6.048 C54.992,6.048 54.25,6.279 53.634,6.741 C53.032,7.203 52.696,7.784 52.626,8.484 L59.157,8.484 Z" id="Shape"></path>
                            <path d="M71.3755,7.329 C71.2215,6.867 70.9205,6.531 70.4725,6.321 C70.0245,6.097 69.3945,5.985 68.5825,5.985 C66.8465,5.985 65.9785,6.363 65.9785,7.119 C65.9785,7.427 66.1395,7.658 66.4615,7.812 C66.7835,7.966 67.3995,8.113 68.3095,8.253 L69.7585,8.463 C71.0325,8.645 72.0125,8.883 72.6985,9.177 C73.3845,9.457 73.8675,9.821 74.1475,10.269 C74.4415,10.703 74.5885,11.256 74.5885,11.928 C74.5885,13.09 74.1055,13.972 73.1395,14.574 C72.1735,15.162 70.7455,15.456 68.8555,15.456 C66.9375,15.456 65.4675,15.141 64.4455,14.511 C63.4235,13.881 62.8285,12.922 62.6605,11.634 L65.6635,11.634 C65.9015,12.684 66.9515,13.209 68.8135,13.209 C69.7795,13.209 70.4795,13.118 70.9135,12.936 C71.3475,12.754 71.5645,12.46 71.5645,12.054 C71.5645,11.746 71.3825,11.508 71.0185,11.34 C70.6685,11.172 70.0385,11.025 69.1285,10.899 L67.7845,10.71 C66.0345,10.444 64.8025,10.052 64.0885,9.534 C63.3885,9.002 63.0385,8.218 63.0385,7.182 C63.0385,6.118 63.5215,5.292 64.4875,4.704 C65.4675,4.116 66.8325,3.822 68.5825,3.822 C70.2765,3.822 71.5855,4.081 72.5095,4.599 C73.4335,5.103 74.0425,5.901 74.3365,6.993 L71.3755,7.329 Z" id="Path"></path>
                            <path d="M83.7017,7.329 C83.5477,6.867 83.2467,6.531 82.7987,6.321 C82.3507,6.097 81.7207,5.985 80.9087,5.985 C79.1727,5.985 78.3047,6.363 78.3047,7.119 C78.3047,7.427 78.4657,7.658 78.7877,7.812 C79.1097,7.966 79.7257,8.113 80.6357,8.253 L82.0847,8.463 C83.3587,8.645 84.3387,8.883 85.0247,9.177 C85.7107,9.457 86.1937,9.821 86.4737,10.269 C86.7677,10.703 86.9147,11.256 86.9147,11.928 C86.9147,13.09 86.4317,13.972 85.4657,14.574 C84.4997,15.162 83.0717,15.456 81.1817,15.456 C79.2637,15.456 77.7937,15.141 76.7717,14.511 C75.7497,13.881 75.1547,12.922 74.9867,11.634 L77.9897,11.634 C78.2277,12.684 79.2777,13.209 81.1397,13.209 C82.1057,13.209 82.8057,13.118 83.2397,12.936 C83.6737,12.754 83.8907,12.46 83.8907,12.054 C83.8907,11.746 83.7087,11.508 83.3447,11.34 C82.9947,11.172 82.3647,11.025 81.4547,10.899 L80.1107,10.71 C78.3607,10.444 77.1287,10.052 76.4147,9.534 C75.7147,9.002 75.3647,8.218 75.3647,7.182 C75.3647,6.118 75.8477,5.292 76.8137,4.704 C77.7937,4.116 79.1587,3.822 80.9087,3.822 C82.6027,3.822 83.9117,4.081 84.8357,4.599 C85.7597,5.103 86.3687,5.901 86.6627,6.993 L83.7017,7.329 Z" id="Path"></path>
                            <path d="M104.404,11.151 C104.194,12.523 103.571,13.587 102.535,14.343 C101.499,15.085 100.127,15.456 98.419,15.456 C96.417,15.456 94.856,14.959 93.736,13.965 C92.63,12.957 92.077,11.543 92.077,9.723 C92.077,8.561 92.329,7.539 92.833,6.657 C93.337,5.761 94.072,5.068 95.038,4.578 C96.0041,4.074 97.145,3.822 98.461,3.822 C100.043,3.822 101.331,4.165 102.325,4.851 C103.319,5.523 103.949,6.489 104.215,7.749 L101.065,8.106 C100.897,7.49 100.589,7.021 100.141,6.699 C99.707,6.377 99.147,6.216 98.461,6.216 C97.481,6.216 96.711,6.524 96.151,7.14 C95.591,7.742 95.3111,8.575 95.3111,9.639 C95.3111,10.731 95.5841,11.578 96.1301,12.18 C96.69,12.768 97.474,13.062 98.482,13.062 C99.238,13.062 99.854,12.901 100.33,12.579 C100.806,12.243 101.107,11.767 101.233,11.151 L104.404,11.151 Z" id="Path"></path>
                            <path d="M105.564,15.12 L105.564,4.158 L108.63,4.158 L108.63,5.943 C109.708,4.627 111.031,3.969 112.599,3.969 C112.963,3.969 113.369,4.004 113.817,4.074 L113.46,6.678 C113.04,6.594 112.634,6.552 112.242,6.552 C111.192,6.552 110.324,6.846 109.638,7.434 C109.008,7.994 108.693,8.638 108.693,9.366 L108.693,15.12 L105.564,15.12 Z" id="Path"></path>
                            <path d="M116.368,10.395 C116.382,10.941 116.529,11.424 116.809,11.844 C117.103,12.264 117.502,12.593 118.006,12.831 C118.524,13.069 119.119,13.188 119.791,13.188 C121.429,13.188 122.444,12.691 122.836,11.697 L125.755,11.697 C125.461,12.971 124.81,13.916 123.802,14.532 C122.808,15.148 121.436,15.456 119.686,15.456 C117.698,15.456 116.151,14.959 115.045,13.965 C113.953,12.971 113.407,11.578 113.407,9.786 C113.407,8.638 113.659,7.616 114.163,6.72 C114.681,5.81 115.416,5.103 116.368,4.599 C117.334,4.081 118.461,3.822 119.749,3.822 C121.709,3.822 123.221,4.319 124.285,5.313 C125.363,6.293 125.902,7.672 125.902,9.45 L125.902,10.395 L116.368,10.395 Z M122.983,8.484 C122.955,7.714 122.654,7.119 122.08,6.699 C121.506,6.265 120.708,6.048 119.686,6.048 C118.818,6.048 118.076,6.279 117.46,6.741 C116.858,7.203 116.522,7.784 116.452,8.484 L122.983,8.484 Z" id="Shape"></path>
                            <path d="M135.622,15.12 L135.622,13.629 C134.978,14.245 134.285,14.7 133.543,14.994 C132.815,15.274 131.975,15.414 131.023,15.414 C129.581,15.414 128.475,15.127 127.705,14.553 C126.935,13.965 126.55,13.132 126.55,12.054 C126.55,10.85 127.054,9.954 128.062,9.366 C129.07,8.778 130.659,8.456 132.829,8.4 L135.517,8.337 L135.517,7.917 C135.517,7.301 135.293,6.832 134.845,6.51 C134.397,6.174 133.76,6.006 132.934,6.006 C131.352,6.006 130.407,6.454 130.099,7.35 L127.264,7.077 C127.488,5.971 128.076,5.152 129.028,4.62 C129.994,4.088 131.331,3.822 133.039,3.822 C136.693,3.822 138.52,5.264 138.52,8.148 L138.52,15.12 L135.622,15.12 Z M135.517,10.185 L132.892,10.248 C131.758,10.276 130.925,10.423 130.393,10.689 C129.875,10.941 129.616,11.326 129.616,11.844 C129.616,12.292 129.805,12.635 130.183,12.873 C130.575,13.111 131.135,13.23 131.863,13.23 C132.451,13.23 132.99,13.16 133.48,13.02 C133.97,12.866 134.383,12.649 134.719,12.369 C135.251,11.949 135.517,11.417 135.517,10.773 L135.517,10.185 Z" id="Shape"></path>
                            <path d="M148.146,14.868 C147.166,15.176 146.137,15.33 145.059,15.33 C143.673,15.33 142.665,15.022 142.035,14.406 C141.405,13.776 141.09,12.782 141.09,11.424 L141.09,6.489 L138.969,6.489 L138.969,4.158 L141.09,4.158 L141.09,1.239 L144.219,1.239 L144.219,4.158 L147.81,4.158 L147.81,6.489 L144.219,6.489 L144.219,11.319 C144.219,11.865 144.352,12.271 144.618,12.537 C144.884,12.789 145.304,12.915 145.878,12.915 C146.48,12.915 147.096,12.817 147.726,12.621 L148.146,14.868 Z" id="Path"></path>
                            <path d="M148.922,15.12 L148.922,4.158 L152.051,4.158 L152.051,15.12 L148.922,15.12 Z M148.88,2.688 L148.88,1.31006317e-12 L152.093,1.31006317e-12 L152.093,2.688 L148.88,2.688 Z" id="Shape"></path>
                            <path d="M166.589,9.597 C166.589,11.389 165.987,12.817 164.783,13.881 C163.579,14.931 161.955,15.456 159.911,15.456 C157.867,15.456 156.271,14.945 155.123,13.923 C153.975,12.901 153.401,11.487 153.401,9.681 C153.401,8.519 153.667,7.497 154.199,6.615 C154.731,5.733 155.494,5.047 156.488,4.557 C157.496,4.067 158.686,3.822 160.058,3.822 C162.102,3.822 163.698,4.333 164.846,5.355 C166.008,6.363 166.589,7.777 166.589,9.597 Z M163.355,9.639 C163.355,8.547 163.061,7.707 162.473,7.119 C161.899,6.517 161.073,6.216 159.995,6.216 C158.931,6.216 158.105,6.517 157.517,7.119 C156.929,7.721 156.635,8.561 156.635,9.639 C156.635,10.731 156.922,11.578 157.496,12.18 C158.084,12.768 158.91,13.062 159.974,13.062 C161.038,13.062 161.864,12.768 162.452,12.18 C163.054,11.578 163.355,10.731 163.355,9.639 Z" id="Shape"></path>
                            <path d="M176.839,15.12 L176.839,8.61 C176.839,7.798 176.643,7.21 176.251,6.846 C175.873,6.482 175.264,6.3 174.424,6.3 C173.976,6.3 173.528,6.384 173.08,6.552 C172.646,6.72 172.268,6.958 171.946,7.266 C171.358,7.826 171.064,8.456 171.064,9.156 L171.064,15.12 L167.935,15.12 L167.935,4.158 L171.001,4.158 L171.001,5.922 C172.177,4.522 173.689,3.822 175.537,3.822 C176.965,3.822 178.057,4.186 178.813,4.914 C179.583,5.628 179.968,6.657 179.968,8.001 L179.968,15.12 L176.839,15.12 Z" id="Path"></path>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </svg> 
      </div>
      <div class="invisible"></div>
</body>
              
            
!

CSS

              
                :root {
  --dark: #212228;
  --light: #fff;
  --green: #28a92b;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--dark);
}

.limitless {
  /*display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  height: 200vh;
  width: 100%;*/
}
.invisible{
  height: 100vh;
  background-color: blue;
}


              
            
!

JS

              
                gsap.registerPlugin(ScrollTrigger);
 
let tl = gsap.timeline({  
  scrollTrigger: {    
    trigger: '.limitless',
    start: "top top",
    end:"bottom top",
    markers: true,
    toggleActions: "none reset restart none", 
  }  
})

tl.set("#circle1", {
  transformOrigin: "center center",
  scale: 0.7
})
tl.set("#circle2", {
  transformOrigin: "center center",
  scale: 0.7
})
tl.set("#circle3", {
  transformOrigin: "center center",
  scale: 0.7
})
tl.set("#copy", {
  opacity: 0,
  x: -100
})

tl.to("#circle1", {
  duration: 2,
  scale: 1,
  transformOrigin: "center center",
  ease: "sine.inOut"
})

tl.to("#circle2", {
  duration: 2,
  scale: 1,
  transformOrigin: "center center",
  ease: "sine.inOut",
  delay: -1.5
})

tl.to("#circle3", {
  duration: 2,
  scale: 1,
  transformOrigin: "center center",
  ease: "sine.inOut",
  delay: -1.5
})

tl.to("#copy", {
  duration: 2,
  opacity: 1,
  x: 0,
  ease: "sine.inOut",
  delay: -3
})

window.addEventListener( 'load', function() {
  tl.play()  
})
              
            
!
999px

Console