Header Transition triggered on page load

Support
#1

Hello!

Example: https://www.lightleaderco.com/kind-words

I am looking to set up header tansitions/transformations that slide across the header as the page is loaded such as on the example site. You can see the effect by clicking on the different menu buttons.

I would like to do something similar. Is this possible, and if so, how?

Currently, this is where I am in the setting but it doesn’t appear to be working.

https://www.awesomescreenshot.com/image/22547128?key=51a6327bfdc2682efe6764e65cbef373

Thanks!

#2

Hello Cassidy,

Thanks for writing in! Are you referring to the line underneath the menu item?

Screen Shot 2022-02-19 at 11.36.57 AM
Screen Shot 2022-02-19 at 11.36.57 AM1146×390 54.7 KB

You can have something like this by enabling the Particles in the Navigation Inline > Top Links > Particles.

Screen Shot 2022-02-19 at 11.42.35 AM
Screen Shot 2022-02-19 at 11.42.35 AM632×1142 56.5 KB

Hope this helps.

#3

Hey, actually I already have that line setup.

I was referring to the effect on the hero image of each page. As you first load up every page the hero image has an effect of “sliding across” that I would like to mimic. Sorry its hard to describe haha

#4

Hey @Cassidy,

I am not seeing any transition in the hero image.

What you can do is this:
1.) In your Hero section, press the “Command” (Win key on Windows) and click the “+” icon.

Screen Shot 2022-02-20 at 5.53.53 AM
Screen Shot 2022-02-20 at 5.53.53 AM718×638 40.9 KB

2.) Add a DIV element

Screen Shot 2022-02-20 at 5.55.09 AM
Screen Shot 2022-02-20 at 5.55.09 AM1106×672 50.8 KB

Screen Shot 2022-02-20 at 5.55.17 AM
Screen Shot 2022-02-20 at 5.55.17 AM716×768 43.8 KB

3.) In your Div element settings, it must have a 100% width and height.

Screen Shot 2022-02-20 at 5.55.44 AM
Screen Shot 2022-02-20 at 5.55.44 AM632×1112 48.5 KB

4.) Then position it as “Absolute” with the Top and Right value of 0.

Screen Shot 2022-02-20 at 5.56.00 AM
Screen Shot 2022-02-20 at 5.56.00 AM638×990 38.8 KB

5.) The z-index should be 0 and enabled the Advance Background.

Screen Shot 2022-02-20 at 5.59.37 AM
Screen Shot 2022-02-20 at 5.59.37 AM634×1500 71.6 KB

6.) Insert your Background image.

7.) Go to the Effects module the DIV element and apply your desired transition.

Hope this helps.

#5

Here is a screenshot of the effect I am looking for.

https://www.awesomescreenshot.com/video/7488294?key=c4412dfee217cf82b94991c6fc8431ad

Do you still have the same recommendations?

#6

Hello Cassidy,

My suggestion will still work. You just have to place the background image in the Hero section while the DIV element will just have a solid color. I am seeing two colors at first. I saw a black and gray which eventually reveals the background image. This may still be possible by having two DIV elements and apply effects module for each Div element.

Best Regards.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.