Show/Hide text when scrolling

Ask the community
,
1

Hi,

I want to make a text fade out (disappear) when I scroll down, and fade in (reappear) when I scroll back up.

I’ve used the code below.
When I scroll down so “text2” leaves the view, the text disappears. But when I scroll back up the text wont come back.

Does anybody know why or if there is a better way to code it?

Kind regards
/Rasmus

2

Once the text is hidden it’ll never get into the viewport again (because it’s hidden).

You should add an anchor, and hide the text when the anchor gets out of viewport, and show the text once the anchor gets into viewport.

3

Thank you! Used the following code instead incorporating anchors.
The first time I use the code it works perfectly, but when I try to duplicate the code to link a different text to another anchor it doesn’t work.

I’m assuming I need to differentiate the codes somehow, but I’m not sure how?

4

Found a solution to the problem, code below if anyone else has the same problem in the future!

$w . onReady ( function () {

//Koncept
$w ( “#anchor1” ). onViewportEnter ( ( event ) => {
$w ( “#text2” ). show ( ‘fade’ );
});

$w ( "#anchor1" ). onViewportLeave ( ( event ) => { 
    $w ( "#text2" ). hide (); 
}); 


$w ( "#anchor2" ). onViewportEnter ( ( event ) => { 
    $w ( "#text1" ). show ( 'fade' ); 
    $w ( "#line11" ). show ( 'fade' ); 
}); 

$w ( "#anchor2" ). onViewportLeave ( ( event ) => { 
    $w ( "#text1" ). hide (); 
    $w ( "#line11" ). hide (); 
});

});

5

Hi! I want to have the exact same effect on my site, and tried both the solution Rasmus Karlsson wrote and also other offered solutions from the threads about onViewportEnter but i cant get anything to work :frowning:

Can someone please help?

This is my code right now, and nothing with it works…

$w . onReady ( function () {

});

export function anchor1_viewportEnter ( event , $w ) {
$w ( “#text29” ). show ( ‘fade’ );
$w ( “#line12” ). show ( ‘fade’ );
$w ( “#text30” ). show ( ‘fade’ );
}

export function anchor1_viewportLeave ( event , $w ) {
$w ( “#text29” ). hide ();
$w ( “#line12” ). hide ();
$w ( “#text30” ). hide ();
}

Thanks!

6

Make sure that anchor1 Enter and Leave event handlers appear on the property panel.

7

@jonatandor35 Thanks! I got it working now :slight_smile:

8

I got the function running perfect with my first paragraph, and when adding the exact same structure of code (but with changed event-triggers and event targets), it doesnt work the same on paragraph 2. I get the onViewportLeave to work on second paragraph but not onViewportEnter. And everything is exactly like on the first paragraph… im going crazy…

The code looks like this now:

$w . onReady ( function () {
//Kolumn 1
$w ( ‘#anchor1’ ). onViewportEnter (( event ) => {
$w ( “#text29” ). show ( ‘fade’ );
$w ( “#line12” ). show ( ‘fade’ );
$w ( “#text30” ). show ( ‘fade’ );
});

$w ( '#anchor2' ). onViewportLeave (( event ) => { 
    $w ( "#text29" ). hide ( 'fade' ); 
    $w ( "#line12" ). hide ( 'fade' ); 
    $w ( "#text30" ). hide ( 'fade' ); 
}); 

//Kolumn 2 
$w ( '#anchor5' ). onViewportEnter (( event ) => { 
    $w ( "#text32" ). show ( 'fade' ); 
    $w ( "#line13" ). show ( 'fade' ); 
    $w ( "#text31" ). show ( 'fade' ); 
    $w ( "#button3" ). show ( 'fade' ); 
}); 

$w ( '#anchor4' ). onViewportLeave (( event ) => { 
    $w ( "#text32" ). hide ( 'fade' ); 
    $w ( "#line13" ). hide ( 'fade' ); 
    $w ( "#text31" ). hide ( 'fade' ); 
    $w ( "#button3" ). hide ( 'fade' ); 
});

});

9

@gustavphilipnaslund are you sure you meant it to show up on anchor 5 entrance?

  • try to see what happens if you remove the ‘fade’ effect, maybe it will let us understand where the problem is.
10

@jonatandor35 Yepp anchor5 is the right anchor for entrance! Its so weird, i havent changed anything with the code but i closed the site, went to editor for another site, and then went back to the editor with the code, and now it works! I have no idea why…