Community forum for knowledge and support

Updated 5 months ago

Reversing the animation on banner-15

At a glance

A community member brought the Banner-15 component to their project and wanted to reverse the animation so the text runs right to left instead of left to right. They tried changing the starting point of the marquee animation, but it didn't work well. Other community members tried to help, but couldn't find a solution. Eventually, one community member, Andre, found the solution. They explained that in addition to changing the initial position to -100% instead of 100%, they also needed to change the alignment of one of the parent divs to the left to make the marquee run right to left without any gaps. The community members were happy to have the mystery solved.

Useful resources

Hey! I brought Banner-15 to my project and I was wondering what is the way to reverse the animation on it. So instead of the text running left to right, it runs right to left. I thought it would be as simple as changing the start position of the marquee, but it doesn't work well. Any tips? https://www.relume.io/components/banner-15

E
A
M
15 comments

I guess you would need to change the animation itself in the interactions panel

If u share a read-only link I can try to help!

Hi . Thanks for the help. It would be great. I tried changing the starting point in the animation, but it does not work really well and I'm unsure why. Here is the link πŸ™‚ https://preview.webflow.com/preview/amazing-folio?utm_medium=preview_link&utm_source=d[…]o&preview=8d33493f92859bba0148edfaa21f79b9&workflow=preview

Yeah that is weird! I don't know why it's not working. Seems like it would be a really simple fix

I'm sure will be able to help. Sorry I couldn't!

No worries! Thank you for looking into it πŸ™‚ I appreciate you

Not a problem 😊

Any insights ? 🀞

thanks for the bump - got it on my list to take a look at just had a couple of meetings this afternoon.

Yeah very strange for sure, I've been digging into this and all of the obvious ways to reverse this don't seem to work. There must be some sort of equation that we are missing here. I'll have to put this down for now and come back to it.

Thanks for the attention πŸ™‚

Right. I had some thought about this and I found a way out πŸ™‚ it was simpler than I thought and I’m happy it works. In the interaction panel, we were right about changing the initial position to -100% instead of 100%, but there was one extra step we were missing, which was to change the alignment of one of the parent divs. Originally, for the marquee to run left to right, .banner_component needed to be aligned to the right. By alining .banner_component to the left it makes possible for the marquee to run right to left with no gaps. Mystery solved. Thank you all for contributing

Attachment
image.png

Wow, nice find! Well done Andre

Gosh thats awesome Andre! I was so close...I think I just had the wrong values in the reverse along with the alignment....I love solved mysteries!

Add a reply
Sign up and join the conversation on Slack