Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <div class="message">Scroll down ↓</div>
<div class="shape shape1 shapeShadow"></div>
<div class="shape shape1"></div>
<div class="shape shape2 shapeShadow"></div>
<div class="shape shape2"></div>
<div class="shape shape3 shapeShadow"></div>
<div class="shape shape3"></div>
<div class="message message-end">The end</div>

              
            
!

CSS

              
                @import url('https://rsms.me/inter/inter-ui.css');
body {
  --size: 30vh;
  background: linear-gradient(45deg, pink, pink 40%, white);
  display: flex;
  font-family: 'Inter UI', sans-serif;
  height: calc(402vh + var(--size));
  margin: 0;
  place-content: center;
}
.message {
  align-items: center;
  color: #404045;
  display: flex;
  height: 100vh;
  font-size: 8vh;
  font-weight: 900;
}
.message-end {
  top: calc(302vh + var(--size));
  position: absolute;
}
.shape {
  bottom: calc(var(--size) * -1);
  height: var(--size);
  position: absolute;
  width: var(--size);
}
.shape1 {
  background: linear-gradient(200deg, orange, orange 40%, cyan);
  clip-path: polygon(var(--c0) var(--c1),var(--c2) var(--c3),var(--c4) var(--c5),var(--c6) var(--c7),var(--c8) var(--c9),var(--c10) var(--c11),var(--c12) var(--c13),var(--c14) var(--c15),var(--c16) var(--c17),var(--c18) var(--c19),var(--c20) var(--c21),var(--c22) var(--c23),var(--c24) var(--c25),var(--c26) var(--c27),var(--c28) var(--c29),var(--c30) var(--c31),var(--c32) var(--c33),var(--c34) var(--c35),var(--c36) var(--c37),var(--c38) var(--c39),var(--c40) var(--c41),var(--c42) var(--c43),var(--c44) var(--c45),var(--c46) var(--c47),var(--c48) var(--c49),var(--c50) var(--c51),var(--c52) var(--c53),var(--c54) var(--c55),var(--c56) var(--c57),var(--c58) var(--c59),var(--c60) var(--c61),var(--c62) var(--c63),var(--c64) var(--c65),var(--c66) var(--c67),var(--c68) var(--c69),var(--c70) var(--c71),var(--c72) var(--c73),var(--c74) var(--c75),var(--c76) var(--c77),var(--c78) var(--c79),var(--c80) var(--c81),var(--c82) var(--c83),var(--c84) var(--c85),var(--c86) var(--c87),var(--c88) var(--c89),var(--c90) var(--c91),var(--c92) var(--c93),var(--c94) var(--c95),var(--c96) var(--c97),var(--c98) var(--c99),var(--c100) var(--c101),var(--c102) var(--c103),var(--c104) var(--c105),var(--c106) var(--c107),var(--c108) var(--c109),var(--c110) var(--c111),var(--c112) var(--c113),var(--c114) var(--c115),var(--c116) var(--c117),var(--c118) var(--c119),var(--c120) var(--c121),var(--c122) var(--c123),var(--c124) var(--c125),var(--c126) var(--c127));
}
.shape2 {
  background: linear-gradient(20deg, #6e9eff, #6e9eff 20%, magenta);
  bottom: calc(-100vh - var(--size));
  clip-path: polygon(var(--p2_0) var(--p2_1),var(--p2_2) var(--p2_3),var(--p2_4) var(--p2_5),var(--p2_6) var(--p2_7),var(--p2_8) var(--p2_9),var(--p2_10) var(--p2_11),var(--p2_12) var(--p2_13),var(--p2_14) var(--p2_15),var(--p2_16) var(--p2_17),var(--p2_18) var(--p2_19),var(--p2_20) var(--p2_21),var(--p2_22) var(--p2_23),var(--p2_24) var(--p2_25),var(--p2_26) var(--p2_27),var(--p2_28) var(--p2_29),var(--p2_30) var(--p2_31),var(--p2_32) var(--p2_33),var(--p2_34) var(--p2_35),var(--p2_36) var(--p2_37),var(--p2_38) var(--p2_39),var(--p2_40) var(--p2_41),var(--p2_42) var(--p2_43),var(--p2_44) var(--p2_45),var(--p2_46) var(--p2_47),var(--p2_48) var(--p2_49),var(--p2_50) var(--p2_51),var(--p2_52) var(--p2_53),var(--p2_54) var(--p2_55),var(--p2_56) var(--p2_57),var(--p2_58) var(--p2_59),var(--p2_60) var(--p2_61),var(--p2_62) var(--p2_63),var(--p2_64) var(--p2_65),var(--p2_66) var(--p2_67),var(--p2_68) var(--p2_69),var(--p2_70) var(--p2_71),var(--p2_72) var(--p2_73),var(--p2_74) var(--p2_75),var(--p2_76) var(--p2_77),var(--p2_78) var(--p2_79),var(--p2_80) var(--p2_81),var(--p2_82) var(--p2_83),var(--p2_84) var(--p2_85),var(--p2_86) var(--p2_87),var(--p2_88) var(--p2_89),var(--p2_90) var(--p2_91),var(--p2_92) var(--p2_93),var(--p2_94) var(--p2_95),var(--p2_96) var(--p2_97),var(--p2_98) var(--p2_99),var(--p2_100) var(--p2_101),var(--p2_102) var(--p2_103),var(--p2_104) var(--p2_105),var(--p2_106) var(--p2_107),var(--p2_108) var(--p2_109),var(--p2_110) var(--p2_111),var(--p2_112) var(--p2_113),var(--p2_114) var(--p2_115),var(--p2_116) var(--p2_117),var(--p2_118) var(--p2_119),var(--p2_120) var(--p2_121),var(--p2_122) var(--p2_123),var(--p2_124) var(--p2_125),var(--p2_126) var(--p2_127));
}
.shape3 {
  background: linear-gradient(20deg, #ff5200, #ff5200 15%, #26fff5);
  bottom: calc(-200vh - var(--size));
  clip-path: polygon(var(--p3_0) var(--p3_1),var(--p3_2) var(--p3_3),var(--p3_4) var(--p3_5),var(--p3_6) var(--p3_7),var(--p3_8) var(--p3_9),var(--p3_10) var(--p3_11),var(--p3_12) var(--p3_13),var(--p3_14) var(--p3_15),var(--p3_16) var(--p3_17),var(--p3_18) var(--p3_19),var(--p3_20) var(--p3_21),var(--p3_22) var(--p3_23),var(--p3_24) var(--p3_25),var(--p3_26) var(--p3_27),var(--p3_28) var(--p3_29),var(--p3_30) var(--p3_31),var(--p3_32) var(--p3_33),var(--p3_34) var(--p3_35),var(--p3_36) var(--p3_37),var(--p3_38) var(--p3_39),var(--p3_40) var(--p3_41),var(--p3_42) var(--p3_43),var(--p3_44) var(--p3_45),var(--p3_46) var(--p3_47),var(--p3_48) var(--p3_49),var(--p3_50) var(--p3_51),var(--p3_52) var(--p3_53),var(--p3_54) var(--p3_55),var(--p3_56) var(--p3_57),var(--p3_58) var(--p3_59),var(--p3_60) var(--p3_61),var(--p3_62) var(--p3_63),var(--p3_64) var(--p3_65),var(--p3_66) var(--p3_67),var(--p3_68) var(--p3_69),var(--p3_70) var(--p3_71),var(--p3_72) var(--p3_73),var(--p3_74) var(--p3_75),var(--p3_76) var(--p3_77),var(--p3_78) var(--p3_79),var(--p3_80) var(--p3_81),var(--p3_82) var(--p3_83),var(--p3_84) var(--p3_85),var(--p3_86) var(--p3_87),var(--p3_88) var(--p3_89),var(--p3_90) var(--p3_91),var(--p3_92) var(--p3_93),var(--p3_94) var(--p3_95),var(--p3_96) var(--p3_97),var(--p3_98) var(--p3_99),var(--p3_100) var(--p3_101),var(--p3_102) var(--p3_103),var(--p3_104) var(--p3_105),var(--p3_106) var(--p3_107),var(--p3_108) var(--p3_109),var(--p3_110) var(--p3_111),var(--p3_112) var(--p3_113),var(--p3_114) var(--p3_115),var(--p3_116) var(--p3_117),var(--p3_118) var(--p3_119),var(--p3_120) var(--p3_121),var(--p3_122) var(--p3_123),var(--p3_124) var(--p3_125),var(--p3_126) var(--p3_127),var(--p3_128) var(--p3_129),var(--p3_130) var(--p3_131),var(--p3_132) var(--p3_133),var(--p3_134) var(--p3_135),var(--p3_136) var(--p3_137),var(--p3_138) var(--p3_139),var(--p3_140) var(--p3_141),var(--p3_142) var(--p3_143),var(--p3_144) var(--p3_145),var(--p3_146) var(--p3_147),var(--p3_148) var(--p3_149),var(--p3_150) var(--p3_151),var(--p3_152) var(--p3_153),var(--p3_154) var(--p3_155),var(--p3_156) var(--p3_157),var(--p3_158) var(--p3_159),var(--p3_160) var(--p3_161),var(--p3_162) var(--p3_163),var(--p3_164) var(--p3_165),var(--p3_166) var(--p3_167),var(--p3_168) var(--p3_169),var(--p3_170) var(--p3_171),var(--p3_172) var(--p3_173),var(--p3_174) var(--p3_175),var(--p3_176) var(--p3_177),var(--p3_178) var(--p3_179),var(--p3_180) var(--p3_181),var(--p3_182) var(--p3_183),var(--p3_184) var(--p3_185),var(--p3_186) var(--p3_187),var(--p3_188) var(--p3_189),var(--p3_190) var(--p3_191),var(--p3_192) var(--p3_193),var(--p3_194) var(--p3_195),var(--p3_196) var(--p3_197),var(--p3_198) var(--p3_199),var(--p3_200) var(--p3_201),var(--p3_202) var(--p3_203),var(--p3_204) var(--p3_205),var(--p3_206) var(--p3_207),var(--p3_208) var(--p3_209),var(--p3_210) var(--p3_211),var(--p3_212) var(--p3_213),var(--p3_214) var(--p3_215),var(--p3_216) var(--p3_217),var(--p3_218) var(--p3_219),var(--p3_220) var(--p3_221),var(--p3_222) var(--p3_223),var(--p3_224) var(--p3_225),var(--p3_226) var(--p3_227),var(--p3_228) var(--p3_229),var(--p3_230) var(--p3_231),var(--p3_232) var(--p3_233),var(--p3_234) var(--p3_235),var(--p3_236) var(--p3_237),var(--p3_238) var(--p3_239),var(--p3_240) var(--p3_241),var(--p3_242) var(--p3_243),var(--p3_244) var(--p3_245),var(--p3_246) var(--p3_247),var(--p3_248) var(--p3_249),var(--p3_250) var(--p3_251),var(--p3_252) var(--p3_253),var(--p3_254) var(--p3_255));
}
.shapeShadow {
  background: #000007;
  bottom: calc(-1.5vh - var(--size));
  margin-left: 1.5vh;
  opacity: .7;
}
.shape2.shapeShadow {
  bottom: calc(-102vh - var(--size));
}
.shape3.shapeShadow {
  bottom: calc(-202vh - var(--size));
}

              
            
!

JS

              
                let instances = [];
instances.push(basicScroll.create({
  elem: document.querySelector('.shape1'),
  from: 'middle-bottom',
  to: 'middle-middle',
  props: {
    '--c0': { 'from': '99.5%', 'to': '66.12%' },'--c1': { 'from': '50%', 'to': '0%' },'--c2': { 'from': '99.24%', 'to': '66.12%' },'--c3': { 'from': '55.11%', 'to': '6.25%' },'--c4': { 'from': '98.49%', 'to': '66.12%' },'--c5': { 'from': '60.07%', 'to': '12.5%' },'--c6': { 'from': '97.26%', 'to': '66.12%' },'--c7': { 'from': '64.86%', 'to': '18.75%' },'--c8': { 'from': '95.59%', 'to': '66.12%' },'--c9': { 'from': '69.45%', 'to': '25%' },'--c10': { 'from': '93.5%', 'to': '66.12%' },'--c11': { 'from': '73.82%', 'to': '31.25%' },'--c12': { 'from': '91.01%', 'to': '66.12%' },'--c13': { 'from': '77.94%', 'to': '37.5%' },'--c14': { 'from': '88.15%', 'to': '66.12%' },'--c15': { 'from': '81.79%', 'to': '43.75%' },'--c16': { 'from': '84.94%', 'to': '66.12%' },'--c17': { 'from': '85.34%', 'to': '50%' },'--c18': { 'from': '81.41%', 'to': '66.12%' },'--c19': { 'from': '88.57%', 'to': '56.25%' },'--c20': { 'from': '77.58%', 'to': '66.12%' },'--c21': { 'from': '91.45%', 'to': '62.5%' },'--c22': { 'from': '73.48%', 'to': '66.12%' },'--c23': { 'from': '93.95%', 'to': '68.75%' },'--c24': { 'from': '69.13%', 'to': '66.12%' },'--c25': { 'from': '96.06%', 'to': '75%' },'--c26': { 'from': '64.56%', 'to': '66.12%' },'--c27': { 'from': '97.74%', 'to': '81.25%' },'--c28': { 'from': '59.79%', 'to': '66.12%' },'--c29': { 'from': '98.97%', 'to': '87.5%' },'--c30': { 'from': '54.85%', 'to': '66.12%' },'--c31': { 'from': '99.73%', 'to': '93.75%' },'--c32': { 'from': '49.76%', 'to': '66.12%' },'--c33': { 'from': '99.99%', 'to': '100%' },'--c34': { 'from': '44.67%', 'to': '63.56%' },'--c35': { 'from': '99.73%', 'to': '100%' },'--c36': { 'from': '39.73%', 'to': '61%' },'--c37': { 'from': '98.97%', 'to': '100%' },'--c38': { 'from': '34.96%', 'to': '58.44%' },'--c39': { 'from': '97.74%', 'to': '100%' },'--c40': { 'from': '30.39%', 'to': '55.88%' },'--c41': { 'from': '96.06%', 'to': '100%' },'--c42': { 'from': '26.04%', 'to': '53.32%' },'--c43': { 'from': '93.95%', 'to': '100%' },'--c44': { 'from': '21.94%', 'to': '50.76%' },'--c45': { 'from': '91.45%', 'to': '100%' },'--c46': { 'from': '18.11%', 'to': '48.2%' },'--c47': { 'from': '88.57%', 'to': '100%' },'--c48': { 'from': '14.58%', 'to': '45.64%' },'--c49': { 'from': '85.34%', 'to': '100%' },'--c50': { 'from': '11.37%', 'to': '45.64%' },'--c51': { 'from': '81.79%', 'to': '95.09%' },'--c52': { 'from': '8.51%', 'to': '45.64%' },'--c53': { 'from': '77.94%', 'to': '90.18%' },'--c54': { 'from': '6.02%', 'to': '45.64%' },'--c55': { 'from': '73.82%', 'to': '85.27%' },'--c56': { 'from': '3.93%', 'to': '45.64%' },'--c57': { 'from': '69.45%', 'to': '80.36%' },'--c58': { 'from': '2.26%', 'to': '45.64%' },'--c59': { 'from': '64.86%', 'to': '75.45%' },'--c60': { 'from': '1.03%', 'to': '45.64%' },'--c61': { 'from': '60.07%', 'to': '70.54%' },'--c62': { 'from': '0.28%', 'to': '45.64%' },'--c63': { 'from': '55.11%', 'to': '65.63%' },'--c64': { 'from': '0.02%', 'to': '45.64%' },'--c65': { 'from': '50%', 'to': '60.72%' },'--c66': { 'from': '0.28%', 'to': '45.64%' },'--c67': { 'from': '44.89%', 'to': '55.81%' },'--c68': { 'from': '1.03%', 'to': '45.64%' },'--c69': { 'from': '39.93%', 'to': '50.9%' },'--c70': { 'from': '2.26%', 'to': '45.64%' },'--c71': { 'from': '35.14%', 'to': '45.99%' },'--c72': { 'from': '3.93%', 'to': '45.64%' },'--c73': { 'from': '30.55%', 'to': '41.08%' },'--c74': { 'from': '6.02%', 'to': '45.64%' },'--c75': { 'from': '26.18%', 'to': '36.17%' },'--c76': { 'from': '8.51%', 'to': '45.64%' },'--c77': { 'from': '22.06%', 'to': '31.26%' },'--c78': { 'from': '11.37%', 'to': '45.64%' },'--c79': { 'from': '18.21%', 'to': '26.35%' },'--c80': { 'from': '14.58%', 'to': '45.64%' },'--c81': { 'from': '14.66%', 'to': '21.44%' },'--c82': { 'from': '18.11%', 'to': '43.93%' },'--c83': { 'from': '11.43%', 'to': '22.34%' },'--c84': { 'from': '21.94%', 'to': '42.22%' },'--c85': { 'from': '8.55%', 'to': '23.24%' },'--c86': { 'from': '26.04%', 'to': '40.51%' },'--c87': { 'from': '6.05%', 'to': '24.14%' },'--c88': { 'from': '30.39%', 'to': '38.8%' },'--c89': { 'from': '3.94%', 'to': '25.04%' },'--c90': { 'from': '34.96%', 'to': '37.14%' },'--c91': { 'from': '2.26%', 'to': '26%' },'--c92': { 'from': '39.73%', 'to': '35.48%' },'--c93': { 'from': '1.03%', 'to': '26.96%' },'--c94': { 'from': '44.67%', 'to': '33.82%' },'--c95': { 'from': '0.27%', 'to': '27.92%' },'--c96': { 'from': '49.76%', 'to': '32.16%' },'--c97': { 'from': '0.01%', 'to': '28.88%' },'--c98': { 'from': '54.85%', 'to': '30.01%' },'--c99': { 'from': '0.27%', 'to': '25.12%' },'--c100': { 'from': '59.79%', 'to': '27.86%' },'--c101': { 'from': '1.03%', 'to': '21.36%' },'--c102': { 'from': '64.56%', 'to': '25.71%' },'--c103': { 'from': '2.26%', 'to': '17.6%' },'--c104': { 'from': '69.13%', 'to': '23.56%' },'--c105': { 'from': '3.94%', 'to': '13.84%' },'--c106': { 'from': '73.48%', 'to': '26.51%' },'--c107': { 'from': '6.05%', 'to': '12.11%' },'--c108': { 'from': '77.58%', 'to': '29.46%' },'--c109': { 'from': '8.55%', 'to': '10.38%' },'--c110': { 'from': '81.41%', 'to': '32.41%' },'--c111': { 'from': '11.43%', 'to': '8.65%' },'--c112': { 'from': '84.94%', 'to': '35.36%' },'--c113': { 'from': '14.66%', 'to': '6.92%' },'--c114': { 'from': '88.15%', 'to': '38.31%' },'--c115': { 'from': '18.21%', 'to': '5.19%' },'--c116': { 'from': '91.01%', 'to': '41.26%' },'--c117': { 'from': '22.06%', 'to': '3.46%' },'--c118': { 'from': '93.5%', 'to': '44.21%' },'--c119': { 'from': '26.18%', 'to': '1.73%' },'--c120': { 'from': '95.59%', 'to': '47.16%' },'--c121': { 'from': '30.55%', 'to': '0%' },'--c122': { 'from': '97.26%', 'to': '51.9%' },'--c123': { 'from': '35.14%', 'to': '0%' },'--c124': { 'from': '98.49%', 'to': '56.64%' },'--c125': { 'from': '39.93%', 'to': '0%' },'--c126': { 'from': '99.24%', 'to': '61.38%' },'--c127': { 'from': '44.89%', 'to': '0%' }
  }
}));

instances.push(basicScroll.create({
  elem: document.querySelector('.shape2'),
  from: 'middle-bottom',
  to: 'middle-middle',
  props: {
    '--p2_0': { 'from': '99.5%', 'to': '86.49%' },'--p2_1': { 'from': '50%', 'to': '81.5%' },'--p2_2': { 'from': '99.24%', 'to': '86.49%' },'--p2_3': { 'from': '55.11%', 'to': '90.75%' },'--p2_4': { 'from': '98.49%', 'to': '86.49%' },'--p2_5': { 'from': '60.07%', 'to': '100%' },'--p2_6': { 'from': '97.26%', 'to': '69.54%' },'--p2_7': { 'from': '64.86%', 'to': '100%' },'--p2_8': { 'from': '95.59%', 'to': '52.58%' },'--p2_9': { 'from': '69.45%', 'to': '100%' },'--p2_10': { 'from': '93.5%', 'to': '35.62%' },'--p2_11': { 'from': '73.82%', 'to': '100%' },'--p2_12': { 'from': '91.01%', 'to': '18.66%' },'--p2_13': { 'from': '77.94%', 'to': '100%' },'--p2_14': { 'from': '88.15%', 'to': '18.66%' },'--p2_15': { 'from': '81.79%', 'to': '83.82%' },'--p2_16': { 'from': '84.94%', 'to': '26.65%' },'--p2_17': { 'from': '85.34%', 'to': '75.82%' },'--p2_18': { 'from': '81.41%', 'to': '34.65%' },'--p2_19': { 'from': '88.57%', 'to': '67.82%' },'--p2_20': { 'from': '77.58%', 'to': '42.65%' },'--p2_21': { 'from': '91.45%', 'to': '59.82%' },'--p2_22': { 'from': '73.48%', 'to': '50.65%' },'--p2_23': { 'from': '93.95%', 'to': '51.82%' },'--p2_24': { 'from': '69.13%', 'to': '56.36%' },'--p2_25': { 'from': '96.06%', 'to': '45.31%' },'--p2_26': { 'from': '64.56%', 'to': '59.9%' },'--p2_27': { 'from': '97.74%', 'to': '39.64%' },'--p2_28': { 'from': '59.79%', 'to': '61.78%' },'--p2_29': { 'from': '98.97%', 'to': '34.76%' },'--p2_30': { 'from': '54.85%', 'to': '62.41%' },'--p2_31': { 'from': '99.73%', 'to': '30.63%' },'--p2_32': { 'from': '49.76%', 'to': '61.68%' },'--p2_33': { 'from': '99.99%', 'to': '25.02%' },'--p2_34': { 'from': '44.67%', 'to': '59.48%' },'--p2_35': { 'from': '99.73%', 'to': '20.9%' },'--p2_36': { 'from': '39.73%', 'to': '55.98%' },'--p2_37': { 'from': '98.97%', 'to': '18.37%' },'--p2_38': { 'from': '34.96%', 'to': '51.25%' },'--p2_39': { 'from': '97.74%', 'to': '17.53%' },'--p2_40': { 'from': '30.39%', 'to': '46.1%' },'--p2_41': { 'from': '96.06%', 'to': '18.67%' },'--p2_42': { 'from': '26.04%', 'to': '42.2%' },'--p2_43': { 'from': '93.95%', 'to': '22.1%' },'--p2_44': { 'from': '21.94%', 'to': '39.74%' },'--p2_45': { 'from': '91.45%', 'to': '27.12%' },'--p2_46': { 'from': '18.11%', 'to': '38.92%' },'--p2_47': { 'from': '88.57%', 'to': '33.13%' },'--p2_48': { 'from': '14.58%', 'to': '28.23%' },'--p2_49': { 'from': '85.34%', 'to': '33.13%' },'--p2_50': { 'from': '11.37%', 'to': '17.54%' },'--p2_51': { 'from': '81.79%', 'to': '33.13%' },'--p2_52': { 'from': '8.51%', 'to': '17.8%' },'--p2_53': { 'from': '77.94%', 'to': '28.7%' },'--p2_54': { 'from': '6.02%', 'to': '18.59%' },'--p2_55': { 'from': '73.82%', 'to': '24.46%' },'--p2_56': { 'from': '3.93%', 'to': '19.91%' },'--p2_57': { 'from': '69.45%', 'to': '20.41%' },'--p2_58': { 'from': '2.26%', 'to': '21.76%' },'--p2_59': { 'from': '64.86%', 'to': '16.56%' },'--p2_60': { 'from': '1.03%', 'to': '24.11%' },'--p2_61': { 'from': '60.07%', 'to': '12.97%' },'--p2_62': { 'from': '0.28%', 'to': '26.89%' },'--p2_63': { 'from': '55.11%', 'to': '9.77%' },'--p2_64': { 'from': '0.02%', 'to': '30.09%' },'--p2_65': { 'from': '50%', 'to': '6.95%' },'--p2_66': { 'from': '0.28%', 'to': '33.71%' },'--p2_67': { 'from': '44.89%', 'to': '4.52%' },'--p2_68': { 'from': '1.03%', 'to': '37.72%' },'--p2_69': { 'from': '39.93%', 'to': '2.54%' },'--p2_70': { 'from': '2.26%', 'to': '42.04%' },'--p2_71': { 'from': '35.14%', 'to': '1.13%' },'--p2_72': { 'from': '3.93%', 'to': '46.68%' },'--p2_73': { 'from': '30.55%', 'to': '0.28%' },'--p2_74': { 'from': '6.02%', 'to': '51.63%' },'--p2_75': { 'from': '26.18%', 'to': '0%' },'--p2_76': { 'from': '8.51%', 'to': '59.03%' },'--p2_77': { 'from': '22.06%', 'to': '0.47%' },'--p2_78': { 'from': '11.37%', 'to': '65.49%' },'--p2_79': { 'from': '18.21%', 'to': '1.89%' },'--p2_80': { 'from': '14.58%', 'to': '71%' },'--p2_81': { 'from': '14.66%', 'to': '4.25%' },'--p2_82': { 'from': '18.11%', 'to': '75.57%' },'--p2_83': { 'from': '11.43%', 'to': '7.56%' },'--p2_84': { 'from': '21.94%', 'to': '79.17%' },'--p2_85': { 'from': '8.55%', 'to': '11.69%' },'--p2_86': { 'from': '26.04%', 'to': '81.74%' },'--p2_87': { 'from': '6.05%', 'to': '16.56%' },'--p2_88': { 'from': '30.39%', 'to': '83.28%' },'--p2_89': { 'from': '3.94%', 'to': '22.17%' },'--p2_90': { 'from': '34.96%', 'to': '83.79%' },'--p2_91': { 'from': '2.26%', 'to': '28.52%' },'--p2_92': { 'from': '39.73%', 'to': '83.61%' },'--p2_93': { 'from': '1.03%', 'to': '31.99%' },'--p2_94': { 'from': '44.67%', 'to': '83.08%' },'--p2_95': { 'from': '0.27%', 'to': '35.36%' },'--p2_96': { 'from': '49.76%', 'to': '82.19%' },'--p2_97': { 'from': '0.01%', 'to': '38.64%' },'--p2_98': { 'from': '54.85%', 'to': '80.95%' },'--p2_99': { 'from': '0.27%', 'to': '41.82%' },'--p2_100': { 'from': '59.79%', 'to': '79.41%' },'--p2_101': { 'from': '1.03%', 'to': '44.94%' },'--p2_102': { 'from': '64.56%', 'to': '77.58%' },'--p2_103': { 'from': '2.26%', 'to': '48.07%' },'--p2_104': { 'from': '69.13%', 'to': '75.46%' },'--p2_105': { 'from': '3.94%', 'to': '51.22%' },'--p2_106': { 'from': '73.48%', 'to': '73.05%' },'--p2_107': { 'from': '6.05%', 'to': '54.39%' },'--p2_108': { 'from': '77.58%', 'to': '70.42%' },'--p2_109': { 'from': '8.55%', 'to': '57.61%' },'--p2_110': { 'from': '81.41%', 'to': '67.57%' },'--p2_111': { 'from': '11.43%', 'to': '60.95%' },'--p2_112': { 'from': '84.94%', 'to': '64.51%' },'--p2_113': { 'from': '14.66%', 'to': '64.42%' },'--p2_114': { 'from': '88.15%', 'to': '61.24%' },'--p2_115': { 'from': '18.21%', 'to': '68.02%' },'--p2_116': { 'from': '91.01%', 'to': '56.23%' },'--p2_117': { 'from': '22.06%', 'to': '73.41%' },'--p2_118': { 'from': '93.5%', 'to': '51.22%' },'--p2_119': { 'from': '26.18%', 'to': '78.8%' },'--p2_120': { 'from': '95.59%', 'to': '48.59%' },'--p2_121': { 'from': '30.55%', 'to': '81.49%' },'--p2_122': { 'from': '97.26%', 'to': '50.07%' },'--p2_123': { 'from': '35.14%', 'to': '81.49%' },'--p2_124': { 'from': '98.49%', 'to': '52.38%' },'--p2_125': { 'from': '39.93%', 'to': '81.49%' },'--p2_126': { 'from': '99.24%', 'to': '69.43%' },'--p2_127': { 'from': '44.89%', 'to': '81.49%' }
  }
}));


instances.push(basicScroll.create({
  elem: document.querySelector('.shape3'),
  from: 'middle-bottom',
  to: 'middle-middle',
  props: {
    '--p3_0': { 'from': '0%', 'to': '41.14%' },'--p3_1': { 'from': '50%', 'to': '59.12%' },'--p3_2': { 'from': '0.13%', 'to': '41.14%' },'--p3_3': { 'from': '47.44%', 'to': '54.56%' },'--p3_4': { 'from': '0.26%', 'to': '41.14%' },'--p3_5': { 'from': '44.88%', 'to': '50%' },'--p3_6': { 'from': '0.64%', 'to': '41.14%' },'--p3_7': { 'from': '42.4%', 'to': '45.44%' },'--p3_8': { 'from': '1.02%', 'to': '41.14%' },'--p3_9': { 'from': '39.92%', 'to': '40.88%' },'--p3_10': { 'from': '1.63%', 'to': '43.76%' },'--p3_11': { 'from': '37.52%', 'to': '40.88%' },'--p3_12': { 'from': '2.24%', 'to': '46.37%' },'--p3_13': { 'from': '35.12%', 'to': '40.88%' },'--p3_14': { 'from': '3.08%', 'to': '48.98%' },'--p3_15': { 'from': '32.82%', 'to': '40.88%' },'--p3_16': { 'from': '3.92%', 'to': '51.59%' },'--p3_17': { 'from': '30.52%', 'to': '40.88%' },'--p3_18': { 'from': '4.97%', 'to': '54.59%' },'--p3_19': { 'from': '28.33%', 'to': '40.64%' },'--p3_20': { 'from': '6.02%', 'to': '57.18%' },'--p3_21': { 'from': '26.14%', 'to': '39.94%' },'--p3_22': { 'from': '7.27%', 'to': '59.36%' },'--p3_23': { 'from': '24.08%', 'to': '38.77%' },'--p3_24': { 'from': '8.52%', 'to': '61.13%' },'--p3_25': { 'from': '22.02%', 'to': '37.13%' },'--p3_26': { 'from': '9.95%', 'to': '62.52%' },'--p3_27': { 'from': '20.1%', 'to': '35.12%' },'--p3_28': { 'from': '11.38%', 'to': '63.52%' },'--p3_29': { 'from': '18.18%', 'to': '32.89%' },'--p3_30': { 'from': '12.99%', 'to': '64.12%' },'--p3_31': { 'from': '16.4%', 'to': '30.44%' },'--p3_32': { 'from': '14.6%', 'to': '64.32%' },'--p3_33': { 'from': '14.62%', 'to': '27.77%' },'--p3_34': { 'from': '16.37%', 'to': '64.14%' },'--p3_35': { 'from': '13.01%', 'to': '25.7%' },'--p3_36': { 'from': '18.14%', 'to': '63.6%' },'--p3_37': { 'from': '11.4%', 'to': '23.77%' },'--p3_38': { 'from': '20.05%', 'to': '62.69%' },'--p3_39': { 'from': '9.96%', 'to': '21.97%' },'--p3_40': { 'from': '21.96%', 'to': '61.42%' },'--p3_41': { 'from': '8.52%', 'to': '20.31%' },'--p3_42': { 'from': '24.01%', 'to': '59.78%' },'--p3_43': { 'from': '7.27%', 'to': '18.92%' },'--p3_44': { 'from': '26.06%', 'to': '57.75%' },'--p3_45': { 'from': '6.02%', 'to': '17.92%' },'--p3_46': { 'from': '28.23%', 'to': '55.33%' },'--p3_47': { 'from': '4.97%', 'to': '17.32%' },'--p3_48': { 'from': '30.4%', 'to': '52.53%' },'--p3_49': { 'from': '3.92%', 'to': '17.12%' },'--p3_50': { 'from': '32.69%', 'to': '50.38%' },'--p3_51': { 'from': '3.08%', 'to': '17.27%' },'--p3_52': { 'from': '34.98%', 'to': '48.34%' },'--p3_53': { 'from': '2.24%', 'to': '17.71%' },'--p3_54': { 'from': '37.36%', 'to': '46.41%' },'--p3_55': { 'from': '1.62%', 'to': '18.44%' },'--p3_56': { 'from': '39.74%', 'to': '44.6%' },'--p3_57': { 'from': '1%', 'to': '19.46%' },'--p3_58': { 'from': '42.21%', 'to': '43.08%' },'--p3_59': { 'from': '0.62%', 'to': '20.72%' },'--p3_60': { 'from': '44.68%', 'to': '42%' },'--p3_61': { 'from': '0.24%', 'to': '22.21%' },'--p3_62': { 'from': '47.22%', 'to': '41.35%' },'--p3_63': { 'from': '0.11%', 'to': '23.93%' },'--p3_64': { 'from': '49.76%', 'to': '41.13%' },'--p3_65': { 'from': '-0.02%', 'to': '25.88%' },'--p3_66': { 'from': '52.3%', 'to': '30.58%' },'--p3_67': { 'from': '0.11%', 'to': '25.88%' },'--p3_68': { 'from': '54.84%', 'to': '20.03%' },'--p3_69': { 'from': '0.24%', 'to': '25.88%' },'--p3_70': { 'from': '57.31%', 'to': '20.3%' },'--p3_71': { 'from': '0.62%', 'to': '21.98%' },'--p3_72': { 'from': '59.78%', 'to': '21.12%' },'--p3_73': { 'from': '1%', 'to': '18.37%' },'--p3_74': { 'from': '62.16%', 'to': '22.49%' },'--p3_75': { 'from': '1.62%', 'to': '15.04%' },'--p3_76': { 'from': '64.54%', 'to': '24.4%' },'--p3_77': { 'from': '2.24%', 'to': '12%' },'--p3_78': { 'from': '66.83%', 'to': '26.76%' },'--p3_79': { 'from': '3.08%', 'to': '9.27%' },'--p3_80': { 'from': '69.12%', 'to': '29.48%' },'--p3_81': { 'from': '3.92%', 'to': '6.88%' },'--p3_82': { 'from': '71.29%', 'to': '32.56%' },'--p3_83': { 'from': '4.97%', 'to': '4.83%' },'--p3_84': { 'from': '73.46%', 'to': '35.99%' },'--p3_85': { 'from': '6.02%', 'to': '3.12%' },'--p3_86': { 'from': '75.51%', 'to': '39.69%' },'--p3_87': { 'from': '7.27%', 'to': '1.77%' },'--p3_88': { 'from': '77.56%', 'to': '43.55%' },'--p3_89': { 'from': '8.52%', 'to': '0.8%' },'--p3_90': { 'from': '79.47%', 'to': '47.58%' },'--p3_91': { 'from': '9.96%', 'to': '0.22%' },'--p3_92': { 'from': '81.38%', 'to': '51.77%' },'--p3_93': { 'from': '11.4%', 'to': '0.03%' },'--p3_94': { 'from': '83.15%', 'to': '58.9%' },'--p3_95': { 'from': '13.01%', 'to': '0.47%' },'--p3_96': { 'from': '84.92%', 'to': '65.31%' },'--p3_97': { 'from': '14.62%', 'to': '1.78%' },'--p3_98': { 'from': '86.53%', 'to': '71%' },'--p3_99': { 'from': '16.4%', 'to': '3.96%' },'--p3_100': { 'from': '88.14%', 'to': '75.97%' },'--p3_101': { 'from': '18.18%', 'to': '7.02%' },'--p3_102': { 'from': '89.57%', 'to': '80.02%' },'--p3_103': { 'from': '20.1%', 'to': '10.88%' },'--p3_104': { 'from': '91%', 'to': '82.92%' },'--p3_105': { 'from': '22.02%', 'to': '15.53%' },'--p3_106': { 'from': '92.25%', 'to': '84.66%' },'--p3_107': { 'from': '24.08%', 'to': '20.97%' },'--p3_108': { 'from': '93.5%', 'to': '85.24%' },'--p3_109': { 'from': '26.14%', 'to': '27.21%' },'--p3_110': { 'from': '94.55%', 'to': '84.98%' },'--p3_111': { 'from': '28.33%', 'to': '30.56%' },'--p3_112': { 'from': '95.6%', 'to': '84.21%' },'--p3_113': { 'from': '30.52%', 'to': '33.82%' },'--p3_114': { 'from': '96.44%', 'to': '82.93%' },'--p3_115': { 'from': '32.82%', 'to': '37%' },'--p3_116': { 'from': '97.28%', 'to': '81.14%' },'--p3_117': { 'from': '35.12%', 'to': '40.09%' },'--p3_118': { 'from': '97.89%', 'to': '78.92%' },'--p3_119': { 'from': '37.52%', 'to': '42.94%' },'--p3_120': { 'from': '98.5%', 'to': '76.31%' },'--p3_121': { 'from': '39.92%', 'to': '45.46%' },'--p3_122': { 'from': '98.88%', 'to': '73.31%' },'--p3_123': { 'from': '42.4%', 'to': '47.65%' },'--p3_124': { 'from': '99.26%', 'to': '69.92%' },'--p3_125': { 'from': '44.88%', 'to': '49.5%' },'--p3_126': { 'from': '99.39%', 'to': '73.69%' },'--p3_127': { 'from': '47.44%', 'to': '51%' },'--p3_128': { 'from': '99.52%', 'to': '77.01%' },'--p3_129': { 'from': '50%', 'to': '52.89%' },'--p3_130': { 'from': '99.39%', 'to': '79.89%' },'--p3_131': { 'from': '52.56%', 'to': '55.16%' },'--p3_132': { 'from': '99.26%', 'to': '82.32%' },'--p3_133': { 'from': '55.12%', 'to': '57.82%' },'--p3_134': { 'from': '98.88%', 'to': '84.25%' },'--p3_135': { 'from': '57.6%', 'to': '60.82%' },'--p3_136': { 'from': '98.5%', 'to': '85.63%' },'--p3_137': { 'from': '60.08%', 'to': '64.16%' },'--p3_138': { 'from': '97.89%', 'to': '86.46%' },'--p3_139': { 'from': '62.48%', 'to': '67.85%' },'--p3_140': { 'from': '97.28%', 'to': '86.74%' },'--p3_141': { 'from': '64.88%', 'to': '71.88%' },'--p3_142': { 'from': '96.44%', 'to': '86.45%' },'--p3_143': { 'from': '67.18%', 'to': '76.18%' },'--p3_144': { 'from': '95.6%', 'to': '85.59%' },'--p3_145': { 'from': '69.48%', 'to': '80.16%' },'--p3_146': { 'from': '94.55%', 'to': '84.15%' },'--p3_147': { 'from': '71.67%', 'to': '83.81%' },'--p3_148': { 'from': '93.5%', 'to': '82.13%' },'--p3_149': { 'from': '73.86%', 'to': '87.13%' },'--p3_150': { 'from': '92.25%', 'to': '79.64%' },'--p3_151': { 'from': '75.92%', 'to': '90.08%' },'--p3_152': { 'from': '91%', 'to': '76.73%' },'--p3_153': { 'from': '77.98%', 'to': '92.66%' },'--p3_154': { 'from': '89.57%', 'to': '73.39%' },'--p3_155': { 'from': '79.9%', 'to': '94.88%' },'--p3_156': { 'from': '88.14%', 'to': '69.63%' },'--p3_157': { 'from': '81.82%', 'to': '96.73%' },'--p3_158': { 'from': '86.53%', 'to': '65.55%' },'--p3_159': { 'from': '83.6%', 'to': '98.16%' },'--p3_160': { 'from': '84.92%', 'to': '61.21%' },'--p3_161': { 'from': '85.38%', 'to': '99.18%' },'--p3_162': { 'from': '83.15%', 'to': '56.61%' },'--p3_163': { 'from': '86.99%', 'to': '99.79%' },'--p3_164': { 'from': '81.38%', 'to': '51.75%' },'--p3_165': { 'from': '88.6%', 'to': '99.99%' },'--p3_166': { 'from': '79.47%', 'to': '48.8%' },'--p3_167': { 'from': '90.04%', 'to': '99.89%' },'--p3_168': { 'from': '77.56%', 'to': '45.85%' },'--p3_169': { 'from': '91.48%', 'to': '99.59%' },'--p3_170': { 'from': '75.51%', 'to': '42.9%' },'--p3_171': { 'from': '92.73%', 'to': '99.09%' },'--p3_172': { 'from': '73.46%', 'to': '39.95%' },'--p3_173': { 'from': '93.98%', 'to': '98.38%' },'--p3_174': { 'from': '71.29%', 'to': '37.09%' },'--p3_175': { 'from': '95.03%', 'to': '97.46%' },'--p3_176': { 'from': '69.12%', 'to': '34.35%' },'--p3_177': { 'from': '96.08%', 'to': '96.32%' },'--p3_178': { 'from': '66.83%', 'to': '31.74%' },'--p3_179': { 'from': '96.92%', 'to': '94.96%' },'--p3_180': { 'from': '64.54%', 'to': '29.25%' },'--p3_181': { 'from': '97.76%', 'to': '93.38%' },'--p3_182': { 'from': '62.16%', 'to': '26.97%' },'--p3_183': { 'from': '98.38%', 'to': '91.58%' },'--p3_184': { 'from': '59.78%', 'to': '24.93%' },'--p3_185': { 'from': '99%', 'to': '89.55%' },'--p3_186': { 'from': '57.31%', 'to': '23.12%' },'--p3_187': { 'from': '99.38%', 'to': '87.28%' },'--p3_188': { 'from': '54.84%', 'to': '21.55%' },'--p3_189': { 'from': '99.76%', 'to': '84.78%' },'--p3_190': { 'from': '52.3%', 'to': '20.28%' },'--p3_191': { 'from': '99.89%', 'to': '82.02%' },'--p3_192': { 'from': '49.76%', 'to': '19.37%' },'--p3_193': { 'from': '100.02%', 'to': '79.01%' },'--p3_194': { 'from': '47.22%', 'to': '18.83%' },'--p3_195': { 'from': '99.89%', 'to': '75.75%' },'--p3_196': { 'from': '44.68%', 'to': '18.65%' },'--p3_197': { 'from': '99.76%', 'to': '72.24%' },'--p3_198': { 'from': '42.21%', 'to': '29.2%' },'--p3_199': { 'from': '99.38%', 'to': '72.24%' },'--p3_200': { 'from': '39.74%', 'to': '39.75%' },'--p3_201': { 'from': '99%', 'to': '72.24%' },'--p3_202': { 'from': '37.36%', 'to': '39.98%' },'--p3_203': { 'from': '98.38%', 'to': '74.42%' },'--p3_204': { 'from': '34.98%', 'to': '40.68%' },'--p3_205': { 'from': '97.76%', 'to': '76.42%' },'--p3_206': { 'from': '32.69%', 'to': '41.84%' },'--p3_207': { 'from': '96.92%', 'to': '78.23%' },'--p3_208': { 'from': '30.4%', 'to': '43.46%' },'--p3_209': { 'from': '96.08%', 'to': '79.85%' },'--p3_210': { 'from': '28.23%', 'to': '45.43%' },'--p3_211': { 'from': '95.03%', 'to': '81.18%' },'--p3_212': { 'from': '26.06%', 'to': '47.59%' },'--p3_213': { 'from': '93.98%', 'to': '82.13%' },'--p3_214': { 'from': '24.01%', 'to': '49.94%' },'--p3_215': { 'from': '92.73%', 'to': '82.7%' },'--p3_216': { 'from': '21.96%', 'to': '52.48%' },'--p3_217': { 'from': '91.48%', 'to': '82.89%' },'--p3_218': { 'from': '20.05%', 'to': '55.44%' },'--p3_219': { 'from': '90.04%', 'to': '82.69%' },'--p3_220': { 'from': '18.14%', 'to': '58.06%' },'--p3_221': { 'from': '88.6%', 'to': '82.08%' },'--p3_222': { 'from': '16.37%', 'to': '60.34%' },'--p3_223': { 'from': '86.99%', 'to': '81.06%' },'--p3_224': { 'from': '14.6%', 'to': '62.27%' },'--p3_225': { 'from': '85.38%', 'to': '79.63%' },'--p3_226': { 'from': '12.99%', 'to': '63.81%' },'--p3_227': { 'from': '83.6%', 'to': '77.89%' },'--p3_228': { 'from': '11.38%', 'to': '64.91%' },'--p3_229': { 'from': '81.82%', 'to': '75.96%' },'--p3_230': { 'from': '9.95%', 'to': '65.57%' },'--p3_231': { 'from': '79.9%', 'to': '73.83%' },'--p3_232': { 'from': '8.52%', 'to': '65.79%' },'--p3_233': { 'from': '77.98%', 'to': '71.5%' },'--p3_234': { 'from': '7.27%', 'to': '65.55%' },'--p3_235': { 'from': '75.92%', 'to': '68.16%' },'--p3_236': { 'from': '6.02%', 'to': '64.84%' },'--p3_237': { 'from': '73.86%', 'to': '65.42%' },'--p3_238': { 'from': '4.97%', 'to': '63.65%' },'--p3_239': { 'from': '71.67%', 'to': '63.27%' },'--p3_240': { 'from': '3.92%', 'to': '61.99%' },'--p3_241': { 'from': '69.48%', 'to': '61.71%' },'--p3_242': { 'from': '3.08%', 'to': '59.93%' },'--p3_243': { 'from': '67.18%', 'to': '60.59%' },'--p3_244': { 'from': '2.24%', 'to': '57.5%' },'--p3_245': { 'from': '64.88%', 'to': '59.79%' },'--p3_246': { 'from': '1.63%', 'to': '54.7%' },'--p3_247': { 'from': '62.48%', 'to': '59.31%' },'--p3_248': { 'from': '1.02%', 'to': '51.53%' },'--p3_249': { 'from': '60.08%', 'to': '59.15%' },'--p3_250': { 'from': '0.64%', 'to': '48.92%' },'--p3_251': { 'from': '57.6%', 'to': '59.15%' },'--p3_252': { 'from': '0.26%', 'to': '46.31%' },'--p3_253': { 'from': '55.12%', 'to': '59.15%' },'--p3_254': { 'from': '0.13%', 'to': '43.7%' },'--p3_255': { 'from': '52.56%', 'to': '59.15%' }
  }
}));


instances.forEach((instance) => {
  instance.start();
});

window.onresize = function() {
  instances.forEach((instance) => {
    instance.calculate()
    instance.update()
  });
}

              
            
!
999px

Console