Button Not Resetting When Scrolling Back Up to Scroll Trigger Point

[emilychews]

Hi,

 

I posted a topic over the weekend where solving one problem seems to have created another. This demo is a simplified version of a page that is going to have two posts/articles per page and then a 'next post' button below the final/2nd article (which then links to another page with two articles etc).

 

On mobile I want it so the button appears after the user scrolls past the bottom of the column containing the two articles (on the actual site, below the articles are a couple of adverts, a sign-up form, and a footer).

 

The problem I now have is two-fold, but probably being caused by the same issue, namely 1) when I scroll past the button on desktop and then resize the window to mobile size the button doesn't show unless I scroll up and down again and also 2) if I refresh on mobile size, after the button shows it doesn't disappear again when you scroll back up past the initial scroll trigger (i.e above the bottom of the second article). For the avoidance of any doubt, on desktop the button is 'position:relative' and on mobile screens less than 579px this changes to 'position: fixed'

Note: I've done this as a new topic because now my other problem was solved it seemed a lot easier to digest as a new post.

I thought it may be 'toggleActions' issue, but nothing I tried on this seems to solve the issue?

Thanks in advance for any help

See the Pen VwaMQBb by emilychews (@emilychews) on CodePen

[ZachSaucier]

Hey Emily. For this sort of situation I'd recommend toggleActions: "play none none reverse" to make sure it's visible when in view an hides when a user scrolls back up. Try that out and see if it does what you want it to.

[emilychews]

Hi Zach,

 

That has sorted the situation in regards to the button not disappearing as it should when you scroll back up past the scroll trigger point on mobile.

I still have the problem though that if I scroll past the button on desktop (i.e. to the bottom of the page) and then resize the window from desktop to mobile (less than 579px), the button does still disappear until I scroll up and down again?

 

Thanks

[ZachSaucier]

Is the button supposed to be displayed on desktop? If so I'd probably use a .from():

See the Pen eYZeYLB?editors=0010 by GreenSock (@GreenSock) on CodePen

[emilychews]

You know that is so embarrassingly simple. I love GSAP, but often go months at work without using it and then seem to forget the obvious stuff.

 

Thank you ever so much for helping. Thankfully another one or two issues I had I solved via the docs but really appreciate you taking the time to help.

[ZachSaucier]

26 minutes ago, emilychews said:

You know that is so embarrassingly simple.

Happens to all of us  

 

26 minutes ago, emilychews said:

one or two issues I had I solved via the docs

Glad to hear it!