Anyone know how I would go about making this header https://www.groupon.com/merchant?utm_medium=referral&utm_campaign=groupon-footer&utm_source=groupon
When you scroll it does this cool animation that turns it white. Any ideas?
I don’t just want to show it with a conditional but want it to animate. Thanks in advance.
Hi,
I think you can create a workflow with When a condition is true, and using the condition page scrolling position is more than XXX (200 for example). Then use the subsequent actions to animate the elements you want.
Hope it helps!
Ya I tried that, but it only works if I put it as “once”, not “every time” it scrolls. If I do every time I think it tries to do it every time a scroll which doesn’t work.
I think it is working on IE but not on Safari. Edit: Actually with further testing it is not working on IE either.
Editor: https://bubble.io/page?name=index&id=smogtest2&tab=tabs-1
Preview: https://smogtest2.bubbleapps.io/version-test?
maybe playing with states in your actions, at the end of the animations, set state of header to “animationcomplete” to yes
So your workflow might be if scrolling position > 200 and header’s animation completed is “no”
Then you can do the same on the other side, when scrolling position < 200 and animation completed is yes then do the “reverse” animation
I tried that too, I couldn’t get it to work. I guess I can try that again.
your animation works perfectly for me on chrome…
Keep scrolling up and down a few times. Does it “break” on you too?
yeah after some times indeed. Maybe trying to set the scrolling position not at zero but a bit more . (e.g. 10). As I don’t know with the “elastic” behaviour how the position is actually calculated.
Seems like still after a few times it will “break” I changed it to 10
It might come then for reactivity of the workflows. As you go fast scrolling up and down, two workflows enter in conflict
Ya, you think that is a bug? Or…
Not really a bug, but I guess you get into a sort of limitation. The animation has not yet the time to complete than the other animation is already triggered…
It’s weird because the conditionals work just fine, to show and hide it without an animation.
Because it’s instant, whereas the 'sliding effect ’ have a duration
What if you reduce the animation duration?
Ya, if I set it to 0 it works. Hmm, I guess you are right, I might not be able to do that the way I want. Unless you have another work around to get it to work.
I don’t really see a workaround here, except lowering a bit the animation duration.
But, in a UX point of view, it’s always good to step back and keep in mind that the big majority of users won’t try to scroll quickly up and down to break the header behaviour ! 
So it seems good enough now to try it as it…
Ok, thanks, I set the duration to 200 and it seem like a sort of happy medium. When it breaks it shows up half at least
Hey I know this was a while ago but thought this may help others who come across this topic.
I had a similar issue but found a quick workaround.
I wanted to have a transparent header at the top of my page (above an image) and then once the scrolling position got to around 600, a header with a white background replaced the transparent one.
I setup the same workflow that you were talking about but did the animation with a custom duration and then used the “add a pause” action and set that duration to a little bit longer than the duration of the first animation. Then did the next animation for the header with the white background to be displayed.
I found that this meant that the animations weren’t clashing as much.
You can also put in a bit on your event that makes it so that the animation only happens when the other header is visible.
It’s a bit of a compromise but hope it might help a bit.
