I am trying to create a carousel type animation of a photo gallery on page load. To do this I am adding interactions to photos to create a slide show.
I am doing this as a custom interaction rather than using the slider element as it seems to give me more control over the timing of animations etc (if this is a bad idea, let me know!)
My problem is I want to trigger the animation style or multiple styles on page load.
So I want to trigger animation “Carousel HP slide 01” on page load
than “Carousel HP slide 02” 5 seconds later.
So I am having two problems. First is that I seem to need to duplicate the interaction and add the 5 second delay to an instance of it to create that staggered timing, is there a better way to do this without having to duplicate the interaction for each slide?
The second is, I am applying one page load interaction to 1 slide and the second page load interaction to slide 2 but each time I change the page load interaction for slide 1 it also changes it to the same interaction for slide 2 and vice versa.
To illustrate the problem highlight element “Home slide 02” in the navigator, go to the interactions panel and change the interaction to “Carousel HP Slide 02”, once you have done that you will see that it has also changed “Home slide 01” to “Carousel HP Slide 02”, if you change either one back to “Carousel HP Slide 01” you will see it changes them both instead of just one.
Just to note for the purposes of visual simplicity the slides are stacked instead of over each other while testing.
You can look at the link here:
Does webflow only allow you to have one page load interaction applied to one element? Or amy I doing something wrong or is something a bit buggy?
Also am I correct in saying that the same child/sibling controls that are available in interactions triggered by actions are not available for interactions triggered by page load?