Hi all, I’m sure this is a common design pattern in webflow, but I couldn’t find an example of it or make sense of the triggers and arrangements to best use.
I have a CMS collection of testimonials, and I want to have them fade in and out of a fixed location, with no user interaction (no hover, no click, no scrolling needed to trigger it).
My approach was…
Bind the collection to collection display component
Limit it to 10
Sort it randomly
To get the fade-in place effect, I think I need to-
Wrap each in a DIV or Link block (they are clickable, to go to the full text)
Mark all of them as hidden and opacity 0%
And then, via some kind of timer trigger, fade in item 1, wait 5 seconds and fade it out
Continue through the list, and restart at the beginning once we’ve hit the last element.
Is there a reference or example for this?
Or am I barking up the wrong tree and need to find a jquery solution rather than using interactions?
You have the right approach, but it won’t work as described. If you have 1 collection list, then everything you set on any of the dynamic item will happen to others. So they’ll all fade in and out at the same time.
If you’re not reaching a limit, you can set 10 collection lists of 1 item, and proceed with the interactions as you describe them. It’s going to be a bit messy, 10 collection lists, 10 interactions… but should work.
Thanks Vincent, good point. One key part I’m missing is how to create a timer-based-interaction. Something which doesn’t require any user action (scroll, hover, etc) in order to function. Can you point me in the right direction on how to configure that?
It’s just occurred to me that the slider component may be able to do the effect I’m looking for if I disable the controls and attach interactions to the slide event.
WIth current Interaction system, that’s cumbersome. You need 10 interactions. Total time let’s say 10 seconds, one second of apparition each. So the first item shows up for one second, then you add a delay of 9 seconds. The second one starts by a delay of one second, shows up one second, ends by a delay of 8 seconds… etc.
To add a delay, just add a step and only set a duration on the bottom of the panel.
Once you’ve done that, if you want to change anything, you got to edit all the steps of all the interactions.
So it’s possible, just not simple to do, and hard to maintain.
How should they appear and disappear? Can’t you just us a slider element with fade effect, then put one collection list in each slide, set the thing to auto and loop and set the duration + time of transition ?
Thanks Vincent, you pointed out an important flaw in my thinking on the slider as well- that it can’t be bound to a collection. Since I have no idea how many testimonials my client will add, there’s no good way to manage that.
The nearest I could get is an arbitrary N slides, each with a randomly-sorted collection list limit = 1. But the user would see a number of repeats, and occasionally the same testimonial more than once in a row.
Thanks also for the explanation on how delays work. I’ll start exploring interactions but since this is collection-driven, I’ll explore some Jquery approaches to see if I can get the best of both worlds.
Design is also making choices and defining volumetry. Open your concerns to your clients and you’ll maybe be surprised how they can understand that. Better have a good interaction that draws attention to important content, rather than forcing your system to be compatible with any number of slides… Just define a max amount of slides. A good number is 6
You can define for example 6 slides, then hide the empty slides with a filter. Like if that is not defined, then hide the slide. You’ll see that you’ll beobliged to show an empty slider at the end but that can be well dressed with a site’s image and that not a terrible solution at all.
For delays, Interactions 2.0 is waaay better. And it’s already in beta testing so it should be released soon.
