Slider interactivity

Design help Animations & Interactions
1

Is it possible to add interactivity to each slide (when click on next or previous )
eg: like in www.themepunch.com/codecanyon/revolution_wp/ ?

please help

2

Hi, currently it is not possible in the UI to trigger interactions (the animations on each slide) based on the state of the slider or when slide changes. However how interactions are triggered are being improved in near-future Webflow updates.

3

I checked out the link you posted. It doesn’t appear that those slides have any interactivity, just motion. Is that what you mean?

This is the only work-around I’ve come across for animated slides. Haven’t done it personally in Webflow… looks like a good bit of work to acheive:

4

Thanks for the replay Cyberdave.
looking forward to it.

5

Hey @Linkstoweb interactions and animations for sliders are coming this week. So look out for that!

1 Like
6

Update: Now you can add animations (interactions) on elements when slides slide-in and slide-out.

7

Thanks @thesergie.
Let’s try it out.

8

@thesergie Hey Sergie, I must be really dim because no matter how hard I try I can’t figure out how to get the Slider Interactions to work. I didn’t see a video about them and this seems to be the only post I can find about it so I’m posting my question here. Basically I want to have a few different headers fade into view when certain slides are displayed and then fade out of view when you switch to the next slide which would then trigger the next title to fade into view. Is this even possible? How do you specify which slide does what?

Thanks!

9

Hi @Dannoo13, I created a really quick example for you to look at, it is a full page slider, with two slides. Each slide has a container and a div, and there is an interaction on the Div on each slide called Slider Header, that causes the div in each slide to become visible and move down onto the slide when the current slide comes into view, and then is removed when the slider moves out of view:

http://example-slider-interaction.webflow.com/

Here is the preview link also:

https://webflow.com/design/example-slider-interaction?preview=d0d2ae19e56df6003e32aa32e402d622

You can see I have just one interaction, applied to each div to make those divs show and hide on slide move into view and move out of view. When you setup your interaction, the trigger to select is the Slider trigger. Does this help you ? Cheers, Dave

10

is it possible to make 3D transforms like here ?

I mean the cube transition (“default” slide setting).

11

Hi @Michel, not yet, you would need to use a different javascript 3rd party plugin for that, or code it yourself. What Webflow features is what you get in the Slider widet.

Of course, we always want to make new things, but we are focusing in on core features now, and will give love to special slider transisitions as soon as we can :smile:

Cheers, Dave

12

Hey Cyber Dave,

Yes that did help quite a bit. However, I’m wondering if there is a way to do this without the text block having to be contained within the slide. I’d like to have a series of headers in the space to the left of my slider that would change with each slide. The slider/container/div block/text block, method that you outlined is great but it restricts the header to being contained within slider window. I’d love to have a header that could be nested outside of the slider but still be affected by a change in slide. Is that illogical? If so, please excuse my ignorance, I’m still learning.

13

I suppose, now that I think on’t, perhaps the best way to achieve my desired effect would be to create a full section slider? Currently I have two columns nested within a section. In the right column I have my slider and in the left column I have a static header and (what I had hoped to be) several sub-headers that would fade in and out of view alongside their corresponding slides. I guess I could just create a section and fill it with a slider. Then create slides that would contain smaller images with a repeated header text to the left and then follow your method to give it the interactive sub headers that I so desire. Unless someone knows of an easier way.

Thanks again and sorry for my noobness!

14

Two more things;
Every time I said “text block” I meant to say “heading”, though, I’m sure you figured that out.
Also, in case my descriptions weren’t clear enough, here is my public link.

https://webflow.com/design/treca?preview=bac14f1ce205e35cfd8416608bdde5a0

ThankS!

15

Oh OK, so the Slider Trigger must be applied to the CONTENT of slides, not to slides objects themselves, or to Sliders objects, right? I’ve tried to make it work by applying it on the SLIDES elements, only to end up with uncontrollable or buggy behaviour.

Clarifications would be great (: And also maybe a few words about the 3 other most recent triggers? http://cl.ly/image/041S1X0h1x3n

1 Like
16

Ugh. I fought with this for about 3 hours… I tried adding a universal transition to the SLIDE using subclasses. Terrible wacky results. It would work in preview sometimes, but never when published. Apply to CONTENT only. I know I am repeating your post Vincent - it deserves repeating.

Apply to CONTENT only.
Apply to CONTENT only.

17

Hehe this made me smile (: I read this as a military alert (:

Since this post, the best I could do is this http://sab.webflow.com/sliders/fancy-image-slider

Still not super happy with it, unless I add code I can’t refine this further.

18

if webflow only had a way to store the contents of these links as copies so they don’t go to a blank page when someone decides to take them down.

all these 404’s are painful, and definitely killing you guys in terms of ranking more in Google.

1 Like
19

Thanks for telling me.

My sandbox is really what it is, a sandbox :slight_smile: I really don’t care about the ranking and it’s my fault if it’s broken anyway. The fancy slider is here :slight_smile: http://sab.webflow.io/interactive-elements

I am woring on my spare time to morph the sandbox into a blog with experiment and long form articles. So that I’m not letting a lot of dead links behind me all over the forum. If only I had more spare time :smiley:

1 Like
20

wow thanks @vincent , and no no, not your problem AT ALL.

I was merely pointing out to webflow of this problem. Yea I don’t care about the rankings either to be honest (webflow always comes up because I google with word “webflow” but coming up without the word webflow for people who are not customers is important), but who is in charge of customer acquisition should probably care alot :slightly_smiling:

I’ve learned more from your sandbox (love the planets one btw!) than I have from all the video tutorials combined lol!