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
@EricD, the show/hide option is still available in the interaction panel. Last option on the panel.
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)
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
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:
Choose the section you want to be the trigger of your pop-up
Create a Scroll in to view animation on selected section
Select a new timed animation
Then choose your DIV with a pop-up in a Navigator section (you’ll be infuencing the class of the pop up wrapper)
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.