How to make a popup appear on page scroll

I am trying to get a popup to appear at a certain way through the main page scroll. Every tutorial I can find refers to a ’ show / hide ’ option in the interactions panel but its no longer there.
I have a main modal div with sub div for content set to fixed position and need it to appear at 50% page scroll.
How can I get this popup to work

Cheers


Here is my public share link: LINK
(how to access public share link)

@EricD, the show/hide option is still available in the interaction panel. Last option on the panel.

Screen Shot 2020-08-22 at 05.18.22

While there’s no way to make the div appear exactly at 50% (and not have it disappear by scrolling up again) with the interactions panel. A workaround without custom code is to use the ‘Scroll into view’ with another element that is about halfway through the page as a trigger.

Denny
Thanks for that. I didnt realise it was only on the ‘scroll into view’ option. I have got round it with an opacity fade and custom lead in / out curve on the ’ while scrolling in view ’ option. Not perfect but close enough.
cheers

Hello @EricD, I was wondering if you could please share your method to make the popup appear on 50% scroll : I cannot fin where / how to choose this condition (although I know how to make something appear on click for example, by starting an animation Hide/Show)

Thank you very much!

Hi
Sorry for taking a while to reply.
I could not get the popup to work at a designated page scroll.
In the end I had to work around using the ‘while scrolling into view’ option.
I simply set several opacity operations at various intervals to give the impression of a popup.
If you put a 0% immediately before a 100% you effectively switch the view on then set the opacity in reverse to switch the view off.
its not perfect but works for what I needed.
Regards

Set the page trigger offset to 50%. :slightly_smiling_face:

offset

Hi,
I figure it out by creating animation for a whole section (scroll into view) I want to be the trigger and than affect the DIV with my pop-up:

  1. Choose the section you want to be the trigger of your pop-up
  2. Create a Scroll in to view animation on selected section
  3. Select a new timed animation
  4. Then choose your DIV with a pop-up in a Navigator section (you’ll be infuencing the class of the pop up wrapper)
  5. And now you can create Hide/Show, Opacity etc. and create animation which will affect the selected DIV with your pop-up and appear when the section will scroll into a view.

Hope it will help!