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.
Here is a link to my preview: https://preview.webflow.com/preview/thinkinvisible?utm_medium=preview_link&utm_source=dashboard&utm_content=thinkinvisible&preview=02725577443c825fba9388e7e855f24b&mode=preview
Any help would be greatly appreciated!