Initial Appearance of Different Element

First question, Why is it not possible to change the initial appearance of a different element in the interactions?

What I’m trying to do is to have an element fade onto the screen via a scroll trigger set on a section that is initially below the viewport. I can set it to fade in (opacity to 100%) on Scroll into View. I can set it on fade out (0% opacity) on Scroll out of View. But because I can’t set the initial appearance of a different element to 0 opacity, when you load the page, the element’s first appearance is full opacity.

I tried making the opacity zero for the element’s class in the style tab of the panel, but I think that opacity there can only be changed via Hover.

The second question is, what is a workaround to achieve the effect I’m trying to achieve? I don’t think I need to paste in the sharing link in order to answer this question, because its not unique to my project.

Hi @elcalibano, Great questions - you can’t set the initial appearance of another element, but as a workaround, you can select the element you wish to set an initial appearance to and not add an interaction.

As for your interaction question, can you please update your question with some more information so we can help you faster? Things like your read-only link, screenshots, and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category

Thanks in advance! :slight_smile:

Will, I’m not sure I understand your response, so let me try and clarify my question with some more detail.

I have an image. I put a div on top of it, and gave that div a background gradient, semi-transparent. The image and div on top of it, are at the top of my page. Below the viewport, I have a section a section. I selected that section and created an an scroll interaction on it, to affect the other element, that being the div with the gradient. The scroll trigger is supposed to make the div with gradient fade onto the screen, in its position over the image at the top of my page, when the section scrolls into view. When it scrolls out of view, I want that div with gradient to fade out.

The div with gradient has no interaction attached to it. The only element with an interaction attached to it is the section that’s below the viewport. When the user scrolls the page, and the section comes into view, the div with gradient is supposed to appear, thus appearing to change the color tint of the image.

The problem is, I don’t want the div with gradient to be visible when the page loads.

Where can I set it so that it’s invisible, in other words, zero opacity, when the page loads? I did try to see if an On Page Load interaction could be a solution to make the gradient div be invisible when the page loaded, but while that makes it invisible it seems to break the functionality of the On Scroll interaction.

I simply want to make one element at the top of the page fade onto the page when an element that’s off the page scrolls into view. In order to fade on upon the scroll, it has to start off zero opacity or invisible. Can you let me know the workaround?

Can you please share your project’s public link so it’s easier to understand your issue?

Learn how to do it here:

I think the initial question is clear

“Why is it not possible to change the initial appearance of a different element in the interactions?”

For the interaction itself you can affect different element (tick “affect different element(s)” checkbox and enter the element’s name). So, for example, by pushing Button1 we can move Div1 100px left. That is OK.

BUT If in that interaction I set initial appearance, it would apply to the Button1, not to Div1

It’d be much better if we could change the initial position of different target, same as it is with interaction:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.