[SOLVED] Shift Banner off of Page on Scroll

[AliGW]

I thought that I would be able to do this with an animation, but I can't seem to make it work!

What I would like is for the banner containing the club logo to slide off the top of the page, leaving only the menu visible, as soon as the page is scrolled down. The banner is on the master page. Can anyone please advise? I have tried various animation settings, and nothing moves!

https://we.tl/t-FopeCy9ijojYsJya

Your help will be appreciated.

[Pablo]

Maybe this will work?
https://www.wysiwygwebbuilder.com/suppo ... ch2026.zip

The basic concept is that both the height and size of the logo are animated while scrolling.
Also, the height of the layout grid is animated otherwise the allocated space will not be updated, because we are using 'transform' to scale.
The effect is not perfect yet, so you will need to tweak the values to get the bets result.

[crispy68]

1. select the Banner and go to the Animations tab
2. Under Transitions click Add

Trigger = scroll
offset = 0
Anchor = top
Timing = linear
Property = Transform
Leave all settings at bottom to 0 and hit OK

3. Click Add again:

Trigger = scroll
offset = -300 (or whatever you want)
Anchor = top
Timing = linear
Property = Transform
TranslateY = -800 (or however far you want to move it) and hit ok.

This only moves the banner.

UPDATE: just saw Pablos and his is closer to what you want. I only addressed moving the banner and not dealing with the grid itself although combining the two may work

[AliGW]

Thank you both.

Pablo's does not do what I want at all, I am afraid - I probably didn't explain properly. I don't want the banner image to shrink, I want it to slide up and off the screen on scroll.

Crispy - all yours does is hide the banner image altogether, even before scroll, using the settings you have given me.

I would like the whole container and contents to slide upwards, leaving just the menu bar visible.

[AliGW]

OK, so with a lot of trial and error, I have hit on these settings for the layout grid (NOT the banner image):

1. select the layout grid and go to the Animations tab
2. Under Transitions click Add

Trigger = scroll
offset = 0
Anchor = top
Timing = linear
Property = Transform
Leave all settings at bottom to 0 and scale at 1 and hit OK

3. Click Add again:

Trigger = scroll
offset = -625
Anchor = top
Timing = linear
Property = Transform
TranslateY = -575

This is so close!

However, what I notice is that there is a short delay between the start of scrolling and the animation beginning. I can live with that, but the perfectionist in my wants the animation to begin as soon as I start scrolling. Is this possible? I don't want to have to lose the 50px margin above the layout grid - that strip of burgundy needs to be there when the page loads (aesthetically).

Thank you so much!

[Pablo]

Do you mean like this?
https://www.wysiwygwebbuilder.com/suppo ... ndize.html

[AliGW]

Yes, but as you'll see with the settings above, I'm nearly there.

Could you let me know which template that is so that I can examine the settings?

Thanks

[AliGW]

I have found the template - I'll see if I can work it out. Thanks.

EDIT: I have no idea how it has been done. There don't appear to be any animations.

Where do I need to look, please?

[Pablo]

This template uses the new 'Visibility' tool (no animations)
https://www.wysiwygwebbuilder.com/visibility.html

[AliGW]

OK, so this seems to require custom CSS. I can't seem to make it do anything without it and I have no idea what I need to do.

So far, I have set the following on the master page:

Target Object: headerLayoutGrid
Offset: -575
Four tick boxes: all ticked, but I am not clear which it should be.

Fixed Position: don't know what to do here.

I have read the instructions and looked at the visibility demo: the box in the demo shows events with true or false attributes, but I don't know how to set these. I can add the events, but true and false don't seem to be attributes on the list. From this, I assume that my visibility target should be the menu, but apart from this, I am afraid that I am flummoxed.

Which object on the master page should I be targeting and what settings should I be using?

Sorry to be a pain, but I don't understand the instructions well enough to proceed.

[Pablo]

You do not need custom code.
The custom CSS was only added as demonstrate how to change the style when the menu is fixed.

You do not need events or animations when using the visibility object. it's either one or the other.

The easiest way to apply this to your project is by copying the visibility object from the template to your project and change the target to 'menu'

Also
- remove all animations from the header / logo
- set the position property of headerLayoutGrid to floating
- remove the custom CSS from the visibility object

[AliGW]

Also
- remove all animations from the header / logo
- set the position property of headerLayoutGrid to floating
- remove the custom CSS from the visibility object

I had already done these things.

The easiest way to apply this to your project is by copying the visibility object from the template to your project and change the target to 'menu'

This has worked - thank you!

[AliGW]

For completeness, and potentially to help others, I linked the visibility settings to the headerLayoutGrid, not the menu. I did this so that the white banner still appears across the full width of the browser window behind the menu.

Target object: headerLayoutGrid
Offset: -576
Trigger events once: ticked
Trigger events continuously: unticked
Check visibility on load: unticked
Include margins in calculation: ticked
Fix element on scroll: ticked
Z-index: 9999

This produces exactly the result I wanted.

Thanks again. @Pablo and @Crispy.

[AliGW]

I found that I also had to add a visibility to the menu as well in order for it to work as I wanted as the browser window gets smaller (before the breakpoint at 900):

Target object: menu
Offset: 0
Trigger events once: ticked
Trigger events continuously: unticked
Check visibility on load: unticked
Include margins in calculation: unticked
Fix element on scroll: ticked
Z-index: 9999