How can I add scrolling text to my website?

Technical Q&A
1

Hi guys,

I would like to add a scrolling text on my website that goes from left to right, something that says FREE SHIPPING AND RETURNS. I looked everywhere but can’t find anything online.

Thank you

2

Hello [email removed] Lucien1201

I recommend you visit the page https://animista.net/ with it they can create elements that have a movement effect.

NOTE: You need to have a bit of CSS knowledge to be able to apply those effects on your page.

The page is easy to use:

  1. Choose the type of effect you want to show.
  2. Choose the type of element to which you want to apply an effect.
  3. Play around with the effect options and decide which one you like best.
  4. When you have the effect you want, click on the button at the top-right, it has the symbols “{}”.
  5. The two code snippets it throws at you have to be pasted into your theme’s main style sheet, preferably to the end of that file.
  6. Add the CSS class to the element to which you want to apply the effect you previously chose.
  7. Ready! Go to your page and the item should see the effect you want.

Regards.

3

Great website, to be fair i have 0 experience with CSS so that seems very complicated haha but ill play around thank you!

4

Do not worry friend, if you need more help I will be happy to do it. I work managing multiple pages in Shopify, feel free to send me a message if you have further questions.

1 Like
5

How can i use the codes from Animista on my shopify website?? I need to change the first heading in the body. my website link is: https://iguanabyswastiparekh.com/

And I want to animate

HAND EMBROIDERED JEWELLERY

6

Hi @SankalpParekh

The general steps are:

  1. Choose the type of effect you want to show.
  2. Choose the type of element to which you want to apply an effect.
  3. Play around with the effect options and decide which one you like best.
  4. When you have the effect you want, click on the button at the top-right, it has the symbols “{}”.
  5. The two code snippets it throws at you have to be pasted into your theme’s main style sheet, preferably to the end of that file.
  6. Add the CSS class to the element to which you want to apply the effect you previously chose.
  7. Ready! Go to your page and the item should see the effect you want.

Keep in mind that it is important to have knowledge of CSS and HTML, as well as the way in which shopify themes are structured, in order to make modifications.
Because it may well be a permanent animation (which is what you would achieve by following the list of general steps that I share with you) or maybe you want something more elaborate to be able to activate or deactivate the animation from the theme editor.

The latter implies involving a developer, I hope it helps you and do not hesitate to contact me.

7

Can you give me an example?

This is the section where I want the effect to work:

#shopify-section-template–19440923214142__0f193bb2-b232-43b9-b38d-8ebf4f929eee

and these are coding I got from animista

Autoprefixer

.tracking-in-expand-fwd {
-webkit-animation: tracking-in-expand-fwd 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation: tracking-in-expand-fwd 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

Keyframes

/* ----------------------------------------------

/**

  • animation tracking-in-expand-fwd

*/
@-webkit-keyframes tracking-in-expand-fwd {
0% {
letter-spacing: -0.5em;
-webkit-transform: translateZ(-700px);
transform: translateZ(-700px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
@keyframes tracking-in-expand-fwd {
0% {
letter-spacing: -0.5em;
-webkit-transform: translateZ(-700px);
transform: translateZ(-700px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}

According to my knowledge this should be the working code:

#shopify-section-template--19440923214142__0f193bb2-b232-43b9-b38d-8ebf4f929eee { -webkit-animation: tracking-in-expand-fwd 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation: tracking-in-expand-fwd 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; } /* ---------------------------------------------- * Generated by Animista on 2023-6-22 16:37:30 * Licensed under FreeBSD License. * See [http://animista.net/license](http://animista.net/license) for more info. * w: [http://animista.net](http://animista.net), t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation tracking-in-expand-fwd * ---------------------------------------- */ @-webkit-keyframes tracking-in-expand-fwd { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px); transform: translateZ(-700px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes tracking-in-expand-fwd { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px); transform: translateZ(-700px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } }

Is this the correct way to put the code in theme.liquid file?

ALSO HOW DO I make it on scroll down only? It randomly worked only. But all the animation run the moment I open the wesbite. I want them to work when i scroll down the page and reach the specific section. PLEASE HELP

8

Hi @SankalpParekh

To accomplish this, you first need a way to determine which section of your page is currently in the viewport. A common way to do this is by using JavaScript’s getBoundingClientRect() method in combination with the viewport height. Here is an example of how you could do this:

window.addEventListener('scroll', () => {
  // Get the specific section of your page
  const section = document.querySelector('#shopify-section-template--19440923214142__0f193bb2-b232-43b9-b38d-8ebf4f929eee');

  // getBoundingClientRect provides information about the element's position
  const bounding = section.getBoundingClientRect();

  if (
    bounding.top >= 0 &&
    bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
  ) {
    // The section is in the viewport, so activate the animation
    section.classList.add('tracking-in-expand-fwd');
  } else {
    // The section is not in the viewport, turn off the animation
    section.classList.remove('tracking-in-expand-fwd');
  }
});

This code listens for the scroll event and then, for each section on your page, checks to see if the section is inside the viewport. If it is, add the animate class to the section (which could trigger your animations). If it isn’t, remove the animate class (which could stop or disable your animations).

Of course, you will have to adapt this code to your specific needs. You’ll need to replace ‘section’ with the correct selector for your sections and replace ‘animate’ with the class that triggers your animations.

Also, note that this code assumes that you want to trigger animations when the section is completely within the viewport. If you want to trigger the animations as soon as any part of the section is visible, you can set the conditions in the if statement.

Remember to place the animist code to be able to show the animation. Also remember that for things like this it is always better to look for a developer, since something like this can completely break the functionality of your site if it is not done correctly. Greetings.