Endless/Seamless Carousel - View More Button - Gradient Text

Design help General
1

Hello, I’ve got a few questions.

Is it possible to make an endless carousel that seamlessly repeats? The way I have it so far has a clear end to it, where there can be a lot of empty space, but once you click the arrow to slide it over again, all of the slides suddenly appear in the starting order, rather than being seamless. It’d also be nice if I could have it flow from side to side rather than distinct slide changes, if that makes sense.

I also want to have a “view more” button around the button of the “Featured Items” section, where clicking on it extends the page and ads more items. I’m guessing this probably takes some custom code, but I’m hoping to build this site while keeping my free membership, since this is my first site and I’m learning as I go.

This should have a simple answer I think. Is it possible to put a gradient on text? I can see that there’s no direct option to do this, but perhaps there’s some sort of trick that allows you to do this?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Xiox,

  1. Yes, you can loop the animation by creating the interaction and at the end repeating the initial state group. Then set Loop at the bottom in the Interactions panel.

  2. The view more button for feature section, not sure which part you’re referring to. If you could be more specific here.

  3. For gradient text, there are ways to do this, but it’s much easier to create in a vector program; PS, Affinity, AI. Then export as SVG. Import to your assets in Webflow. Definitely SVG, so you can scale the text as you like.

3

About the gradient text: I’m sure you’ve found some kind of workaround, but in case you still need a simple, elegant solution, try using background-clip. You’ll need a paid account or site plan, because this uses custom code, but it works really well, and the text remains indexable by search engines.

To do that, you want to give your text element a gradient background, like this:

Bildschirmfoto 2020-05-12 um 17.23.48

Then add an embed element after the text with the following code:

<style>
    .feature-quote {
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
    }
</style>

(Replace “feature-quote” with whichever tag you’re using)

That should do the trick! :smile: