hi,
i’m making a website that is supposed to have a scrolling text on loop on the homepage.
with that said, i’m having trouble creating an interaction for it to work.
can someone help me?
Here is the result i’m expecting [near “sqirl, away, specials”]: https://sqirlla.com/
Here is my site Read-Only: https://preview.webflow.com/preview/isabelas-marvelous-project?utm_medium=preview_link&utm_source=designer&utm_content=isabelas-marvelous-project&preview=11d2567dc1793f532f92612b066d3d29&mode=preview
thank you!
isabela
IVG
(^_^)
October 13, 2019, 6:06pm
2
Hi @isabelavdd
So you make a container div that will be the parent div of your text that you use in your animation, and set overflow to hidden.
Make the div with your text and place it in the container.
Set up your IX2 so that the initial state of the text div is outside of the container, and then setup your animation… something like this:
dont forget to hide/unhide your text when you put it back into the original position at the end of the scroll
then you set your animation to loop like this:
and voila your text loops infinitely!
hi ivg! thank you for your help
i forgot to say that i’m very new at webflow haha. this is my first time doing an interaction.
i tried what you told me, but i’m having 2 issues right now:
1 - i can’t seem to make the text scroll in a single line, it moves only inside the full block;
2 - can you show me the specific numbers you used at the animation steps?
here’s the ready only link again so you can see what i tried to do https://preview.webflow.com/preview/isabelas-marvelous-project?utm_medium=preview_link&utm_source=designer&utm_content=isabelas-marvelous-project&preview=11d2567dc1793f532f92612b066d3d29&mode=preview
thank you very much,
isabela
IVG
(^_^)
October 14, 2019, 3:54am
4
@isabelavdd
No problem, here is what you do.
You should adjust Div Block 19 to be 100VW wide
You should adjust Text Block 5 to be 117% wide (or however long so that the text remains in one line - keep increasing the width until the text fits into one line)
Open up your animation interaction and do the following:
Make sure to get all the units correctly - I use VW for movements and you can increase/decrease the time of the move to speed up / slow down the scroll… (look at the full size screen shots to see the values I used at the bottom of the screen)
Once you are done with those steps you should be good to go