Reveal text horizontal on scroll

Site URL: https://www.mgfoodstuff.squarespace.com

I'd like to create the same text transition that happens on Squarespace's own homepage: https://www.squarespace.com/

Specifically the 'Sell Anything' text that moves horizontally as you scroll down.

Anyone know how to achieve this?

It looks complex. You can find free code on Codepen.io, then share its url, we can convert it to Squarespace code for you

5 hours ago, tuanphan said:

It looks complex. You can find free code on Codepen.io, then share its url, we can convert it to Squarespace code for you

Thank you! Think something like this would work? https://codepen.io/hericdk/pen/VwvOqby

Add a Code Block > Paste this code

<div class="text-wrapper">
  <div class="text-container">
    <h1 class="h1">eu sou um texto que vai para a esquerda</h1>
  </div>
</div>

<div class="text-wrapper2">
  <h2>fim</h2>
</div
  <style>
  .text-wrapper {
  height: 250vh;
  background: #eee;
  position: relative;
  z-index: 0;
}

.text-wrapper2 {
  height: 100vh;
  background: #fff;
  position: relative;
  z-index: 2;
}

.text-container {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  position: fixed;
  top: 30%;
  width: 100%;
}

h2, .h1 {
  font-size: 120px;
  word-break: keep-all;
  color: #444;
  transform: translateX(0px);
  margin-left: 30%; /* começa no meio*/
}

h2 {
  padding: 50px 0;
  margin: 0;
  text-align: center;
}

  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function ($) {
  $(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    // Pra deixar mais lento só dividir o scroll por / 2 ou 3
    // para ele ficar mais tempo na tela aumentar a altura do wrapper
    $(".h1").css("transform", "translateX(-" + scroll + "px)");
  });
});

</script>

On 5/9/2022 at 8:55 AM, tuanphan said:

Add a Code Block > Paste this code

<div class="text-wrapper">
  <div class="text-container">
    <h1 class="h1">eu sou um texto que vai para a esquerda</h1>
  </div>
</div>

<div class="text-wrapper2">
  <h2>fim</h2>
</div
  <style>
  .text-wrapper {
  height: 250vh;
  background: #eee;
  position: relative;
  z-index: 0;
}

.text-wrapper2 {
  height: 100vh;
  background: #fff;
  position: relative;
  z-index: 2;
}

.text-container {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  position: fixed;
  top: 30%;
  width: 100%;
}

h2, .h1 {
  font-size: 120px;
  word-break: keep-all;
  color: #444;
  transform: translateX(0px);
  margin-left: 30%; /* começa no meio*/
}

h2 {
  padding: 50px 0;
  margin: 0;
  text-align: center;
}

  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function ($) {
  $(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    // Pra deixar mais lento só dividir o scroll por / 2 ou 3
    // para ele ficar mais tempo na tela aumentar a altura do wrapper
    $(".h1").css("transform", "translateX(-" + scroll + "px)");
  });
});

</script>

 

Thanks so much! It doesn't seem to work when I paste it into code block. Should I be doing anything else? Putting the script into header code injection?

On 5/13/2022 at 11:12 PM, prcreative said:

Thanks so much! It doesn't seem to work when I paste it into code block. Should I be doing anything else? Putting the script into header code injection?

Can you share link to page where you added Code Block? We can check easier

12 hours ago, tuanphan said:

Can you share link to page where you added Code Block? We can check easier

yes, no problem. It is: https://mgfoodstuff.squarespace.com/home-1

Password: crowncreative

Thanks

11 hours ago, prcreative said:

yes, no problem. It is: https://mgfoodstuff.squarespace.com/home-1

Password: crowncreative

Thanks

A typo

Edit this line

<div class="text-wrapper2">
  <h2>fim</h2>
</div

to this

<div class="text-wrapper2">
  <h2>fim</h2>
</div>

Thank you for spotting this typo! It still doesn't seem to want to work though 😞 

On 5/18/2022 at 1:54 AM, prcreative said:

Thank you for spotting this typo! It still doesn't seem to want to work though 😞 

 

Do you still need help?

21 hours ago, tuanphan said:

Do you still need help?

Yes please, I'm not sure why it's broken 😞