Looped Animation: running text

Design help Animations & Interactions
1

I’ve created a text interaction, but for some reason it is not looping seamlessly. At the end of the interaction there’s a moments where it glitches, although the X position is the same in the beginning and end.
(Two interactions one for mobile portrait and one for all the other break points)

Here is my public share link:
https://preview.webflow.com/preview/monk-01?utm_medium=preview_link&utm_source=designer&utm_content=monk-01&preview=326098acbe53edb6a435f4062c34775a&mode=preview

2

You want a seamless loop for your marquee animation, so instead of making the text line move -100vw, which ends up in an arbitrary, uncontrollable distance, calculate the number of pixels used to write 1 portion of the text + the space after. [website_under_contruction_] That’s 226px.

image
image1524×564 103 KB

So alter your animation, make it move 226px, then hide & move back to zero in 0ms, then loop. It should already be better, and you won’t need such a looooong line of text.

Now for the rest of the website, there’s 2 things that can or may be fixed.

  1. at the moment nothing constraint the website in the viewport, there’s a huge horizontal scroll to the right. By passing .header to overflow:hidden you can fix this.

image

  1. you have a huge amount of interactions. I don’t really know how you website works, can you show me? I have the intuition that you could use much less interactions (like possibly one unique interaction) by using appropriate limits. If you explain to me how the site works I can maybe find something to simplify your IX structure.
3

Thank you!
But don’t I then have to create a separate interaction for each break point ? (if I create in px rather that VW)

this is the link for the published site. There is a huge number of interactions, one for each modal opening.
I am hoping to make each window draggable, when I find the right code for that.

4

I guess if you already do all that work, and if it is working, then let’s not change it.

Next time you build something, come back for help if you want to make sure you’re using IX in the best possible and simplest way.

Can you tell me what to search for in order to see some results?

5

@vincent I’m running into a similar issue as Medina. I cannot get the text animation to seamlessly roll across the screen. There’s a bit of a gap and I’m not sure how to fix it. Could you help a brother out?

Here’s the read-only link Any help would be much appreciated!!!

Best,

-Adam