Hey coders !
I try anything to make it happened. But noting was in good results and prefer not to publish what I did.
What I wanted to do : while scroll down, when the gallery shows up, the elements the pin to screen, will disappear.
My result: Hidden when the gallery Enter to Viewport, but It’s not smooth (I used anchor), and all the texts disappear together - it’s not improve my site, in other words - looks cheap .
What I thought the solution is (here is where your magic came to reality): Code the gallery be make it in arrange (bring to front) when shows in viewport OR make Header effect to the gallery (don’t know how, both cases).
Here is what I did:
export function anchor2_viewportEnter(event) {
$w(‘#text6’).show();
$w(‘#text7’).show();
$w(‘#backpage’).show();
$w(‘#nextpage’).show();
}
export function anchor2_viewportLeave(event) {
$w(‘#text6’).hide();
$w(‘#text7’).hide();
$w(‘#backpage’).hide();
$w(‘#nextpage’).hide();
}
#header #effect code #element #hide #show #viewport #dynamic #page wix
Wix team, You more then welcome
Can you send your site? Explain your use-case with images or something that will make it clearer. I’m not sure I understand what you’re trying to do
@amit-wix Yes few minutes (STAY HERE PLEASE :))
As I said - while scroll down, when the gallery shows up, the elements that pin to screen, will disappear but not as here, Iike the header effect.
There are few effects. You can set the animation in the hide method. Something like that:
$w('#text6').hide("fly", {
"duration": 500,
"delay": 500,
"direction": "top"
});
If you want it to go up. You can also do it with fade. See here
You currently cannot “scrub” where the components will leave in the speed of the mouse scrolling
@amit-wix thank you for your reply.
Can you help me code this motion?
This is scrub animation, as the content moves exactly opposite the scroll position. Currently, you can’t do this with code in Wix, if you need the content of the box that is “revealed” to be text and dynamic. If you can have the content as background, then you don’t need to code anything. Just use columns component, and set the background animation of one of the columns to “reveal” and you’ll get exactly the same effect
@amit-wix Thank you for your fast reply.
when you pin to screen the content moves exactly opposite the scroll position, what’s the different between scrub to that?
I think it can be with code on the gallery, or maybe some Anchor that tell that when element touch it, it disappear - What your opinion about that? (maybe other coders will have a creative ideas like your (It not work in this case because I have also bottoms that need to disappear and the text need to be dynamic and change according database).
Thank you.
I don’t think you’ll be able to do so with pin to screen or code at the moment. When you pin to screen, you remove the element from the layer that is scrolling (position:fixed). This means that there’s no “touching”. If you can estimate the length from top that the dynamic text will take, you might be able to place an anchor below the top and when it leaves the viewport to do your animation.
@amit-wix According your solution, I still have the immeidiatly dissappearing motion of the text and the other elements when it leaves the viewport of the anchor (By the way, I did it, it’s OK like I said but not good for my web).
I think there is an option, must be (you slogen is CREATION WITHOUT LIMITS!)…
If I pin to screen element, It can be back of front, As I understood. Can I maybe but A text a box or something and make that motion?
What else the options we have…
Daniel
Yeah, I’m sorry, but I still think you can’t do that at the moment with content that is not an image or a video. You can arrange pinned items (back/front) only between themselves, as I said, they are a completely different layer, and the scrolling does not affect them. The way the above effect is achieved on the web is using scrub animations, which you have automatically in Wix, but only for background effects at the moment
@amit-wix Any update?
What about to make the text an image (I’ll made image in PSD that looks like the text), do you have solution for this?