I am really struggling to create what I think is a relatively simple thing. I want to have a 100% VH slider right when you land on the webpage, that essentially has three slides with one sentence in each, and fourth slide with the company logo. The effect I want is the language to fade out and be replaced by the next slide’s language. When I choose the ‘Fade Over’ animation type for the slider, it gets the closest possible to how I want the visuals to look, but the text of the next slide appears beneath the text of the current slide rather than the first slide’s text completely disappearing before being replace. I thought that the answer would be to add opacity animations, but no matter how many different ways I fiddle something goes wrong.
Issues I’ve had: I’ll add an opacity animation and it will work great for the first slide, but then end up skipping over the second or third slide entirely and landing on the fourth. I tried to remedy by ensuring that each of the paragraphs on the slides are different paragraphs and thus different classes, and making an opacity animation for each individually, but it seems that one animation will override and apply to all, no matter what I do. I read that I should try to create a ‘slider’ animation trigger, but that has ended up creating a different problem: the opacity now renders the whole slide white, rather than just fading the text. I’ve tried playing with ‘selected element’ rather than ‘interaction trigger’ while having the specific paragraph selected, but that doesn’t work.
Hi @cyberdave, thank you so much for your detailed video. It is almostttt what I want, but not quite. With what we’ve done it looks like we have achieved essentially the same thing visually as the ‘fade over’ visual for the slider movement, whereas what I was hoping the opacity would achieve is for the text of each slide to have disappeared entirely before the text of the next slide fades in. Right now the next slide’s text sort of appears beneath the previous slide on its way out–do you understand what I mean? Let me know if it’s possible to play further with the animation to achieve this. Thanks!
Hi @thinkinvsible, thanks for your reply, I made a new video, this is possible, but you have plan out the timings so that the interactions match the timer delay and to add an extra step to the opacity in interaction:
p.s. in my example I tell you to set at the end a 6000ms timer delay and a 4s interaction delay, my math is off, for that part of the video, if you have a 6000ms timer delay, plus a 500ms delay for eas in and ease out, the delay in the interaction would be 5000 (500ms + 5000ms + 500ms = 6000ms timer delay). Sorry for my impromptu math mistake
Thanks so much, this has helped a lot. I really appreciate it. Two things: first, just to clarify, what I think I understand from your video is that you want the animation/interaction to fit within the timer delay. Is it best to have the interaction add up to exactly the amount of time that the timer delay is, or a bit less? I fiddled around and it seems to me that if I time the interaction to add up exactly, then the fade out/fade in isn’t as cleanly separate/you start to have a bit of the issue I had before, with the text of the next slide appearing before the last one has fully disappeared. When I time the interaction to just run, for instance, for a total of five seconds (.5 ease on either end, and a 4 second duration), but the timer delay at 6000 ms, then the full fade is occurring. Just want to make sure I conceptually fully understand what is going on here.
Secondly, is it very complicated to have a different duration for different slides? As I am sure you have noticed, some of the slides’ text is much longer than others, and so if it is possible without being super complicated to customize it so that some slides are longer/shorter, that would be awesome. I imagine this has to do with classes/combo classes, but unfortunately I have had a lot of complications whenever I try to separate out the slides, so I am a bit hesitant to mess around when it is so close to working. Thanks!
