Hello,
Hopefully there’s a simple answer to this:
I would like an element to ‘Display None on Load’. I would then like that element to ‘Reveal’ on a scroll trigger. But this element needs to be triggered by itself and not another element.
Is this possible?
Thanks
Dan
It’s easier to trigg something on an element itself than the opposite (: Just affect the interaction to the object. When scroll into view, display:box + opacity 100% (start at 0 with your hidden step onload) and st the threshold.
Thanks @vincent
I realise that way of doing it…but I actually want the properties of the element to ‘Display None’ as opposed to just have an opacity of 0%.
The idea is that the element doesn’t load on the page until the viewer scrolls down. So the page expands as the viewer scrolls.
Is this possible? I want this to happen to lots of elements on the page. Each one appears after the other as the viewer scrolls down, hence the desire for this to be affected by an interaction on itself, as opposed to another element on the page. If it is done by another element on the page, I suspect that would need a separate interaction for every element, which isn’t viable in this circumstance…
Yes just do what I described, threshold at 10% maybe, or less… just skip the opacity part.
Hmmm
In that case I’m not sure what I’m doing wrong as the element either doesn’t load and doesn’t reveal on scroll or loads straight away.
My interaction on the element:
Initial appearance:
Scroll element:
And read only if you wish to take a look!:
https://preview.webflow.com/preview/wedesignlondon?preview=18c7f902641491e6ae190af9ef887a28
Bottom of Page: Blog
Element: Article (the last one)
Thank you!
the last article element isn’t hidden on load
but surely it is
hence the “display: none” in the ‘Initial Appearance’…
Am i missing something here!?
Ok you’re right. It’s hidden on load.
SO as it’s hidden I guess it can’t trigger hte visibility.
I understand you want a structure and interaction that you can easily reuse.
There is a solution.
nest every article in a div, give article the hidden on load, and the div that contains it the reveal interaction, set to affect the article element. the div will be invisible but there and should then trigger the interaction, showing the article.
Would you mind testing this?
Nice idea. However, if the div that contains the article is set to affect the article element, then when the page scrolls and the div appears, it will affect every element with the name ‘Article’ on the page. So you would need a separate interaction for every article. Do you agree?
I don’t agree at all! 
Because as the Article is a child of the div, you’re going to check to box “limit to nested elements”. It would also work if the targeted element was a sibling, by checking “limit to siblings”
These two checkboxes have been created especially to make interactions reusable.
Sorry for my stupid tone, it’s friday.
Haha
Well, we’re getting there, perhaps.
If done as you suggest, then the Div is hidden on load and when the page scrolls, it does open up the div to the height of the article. However, the article is invisible.
So current status:
Article Div:
Initial Appearance = None
Scroll Trigger = Affect Article, limit to nested elements ticked, Opacity 100%, Display Block.
Article:
Display None on Load
…
Appreciate this and apologies for my ignorance of this!!
No, the div containing the article is display:box all the time. It has to be displayed to trigger the scroll event. As it has no visual property, it appears but is invisible. If you have bugs you can set it to 0px height on load and then pass it to height auto when the scroll event kicks in.
It works!..except when I apply it to various articles as soon as the first div reveals the first article, they all reveal…despite the limit to nested elements being ticked…
and the next issue is that I have links from the top of the page to each of the articles…I have changed the ID from the Article to the Article Div, but because it is initially hidden, the anchor stops short at the point where the page first expands… (sorry!)
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.