Use plugin transform styles to push a sticky nav to the right

Hello,

Now I made a few steps forward to archive the goal ??

This is the current CSS:

/* Canvas opens */
.ocs-sidebar-active .navigation-stick:not(.slideout-navigation):not(.gen-sidebar-nav) {
    transform: translateX(270px);
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
    transition-delay: 5ms;
}

/* Canvas close */
.main-navigation:not(.slideout-navigation):not(.gen-sidebar-nav) {
    transform: translateX(0px);
    transition-duration: 200ms;
    transition-timing-function: linear;
}

But I’m not able to get the exact same speed. The off canvas animation speed for showing and hiding this sidebar is set at 300ms. But when I use 300ms for “transition-duration” for the sticky header, the speed looks different.

What settings and values are you using for transition-timing-function or transition-delay?

• This reply was modified 4 years, 2 months ago by niikk.
• This reply was modified 4 years, 2 months ago by niikk.
• This reply was modified 4 years, 2 months ago by niikk.

Hello @niikk

You can check all CSS here: https://github.com/JoryHogeveen/off-canvas-sidebars/blob/master/slidebars/slidebars.css#L119-L126
As you see, the timing and delay are not set and thus are the default browser values.

I have been thinking about an implementation like this where you can enable fixed elements to animate as well based on their CSS selectors.
The tricky part here is that I’ll have some obstacles to fix because of other CSS properties such elements might have and also the direction the animation is going.

I have an active issue for this: https://github.com/JoryHogeveen/off-canvas-sidebars/issues/30
So I’m closing this topic here in favor of GitHub.

Cheers, Jory

• This reply was modified 4 years, 1 month ago by Jory Hogeveen.

Hello @keraweb

Thanks. Hmm strange. I’m not able to get the same speed on the transitions.

Did you see here a very obvious issue in my code?

/* Canvas opens */
.ocs-sidebar-active .navigation-stick:not(.slideout-navigation):not(.gen-sidebar-nav) {
    transform: translateX(270px);
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
    transition-delay: 3ms;
}

/* Canvas close */
.main-navigation:not(.slideout-navigation):not(.gen-sidebar-nav) {
    transform: translateX(0px);
    transition-duration: 200ms;
    transition-timing-function: linear;
}

Hi @niikk

The only think I notice if the usage of the timing property. I think you can omit that.

In any case. Are you adding the classes manually? I think the animation isn’t triggered at the same time because the class is adding just slightly later than the animation is run.
In that case you should hook into Javascript: https://github.com/JoryHogeveen/off-canvas-sidebars/blob/master/slidebars/slidebars.js#L332
Example on how to use the hooks: https://github.com/JoryHogeveen/off-canvas-sidebars/blob/master/js/off-canvas-sidebars.js#L225

Cheers, Jory

Thanks @keraweb

First, I’m not a developer. ?? But I understand the basic in your code.

I add the shortcode and classes for the canvas open manually via hook in GP Elements. But this is only for a sticky element AND not for the Sticky header. So I guess this has zero impact.

<div class="customsticky customsticky-style hide-on-desktop">
        	
	  <div class="customsticky-container">
        	[ocs_trigger id="productfilter01" icon="fa fa-bars" element="button" text="PRODUKTE FILTERN" class="hide-on-desktop"]
         </div>
</div>

When I’m right, I have to take your code and write a new script function and give this to my elements OR can i add a class from your code to my div’s somewhere that hey inherit the same speed?

The CSS beleow only use ootb classes of GP (I guess). So there are not manually added from my end.

/* Canvas opens */
.ocs-sidebar-active .navigation-stick:not(.slideout-navigation):not(.gen-sidebar-nav) {
    transform: translateX(270px);
    transition-duration: 300ms;
	transition-timing-function: ease-in-out;
	transition-delay: 3ms;
}

/* Canvas close */
.main-navigation:not(.slideout-navigation):not(.gen-sidebar-nav) {
    transform: translateX(0px);
    transition-duration: 200ms;
		transition-timing-function: linear;
}

I have to edit the GP Sticky header with classes from your script, when I’m right?

Cheers

• This reply was modified 4 years, 1 month ago by niikk.
• This reply was modified 4 years, 1 month ago by niikk.
• This reply was modified 4 years, 1 month ago by niikk.
• This reply was modified 4 years, 1 month ago by niikk.
• This reply was modified 4 years, 1 month ago by niikk.

Hi @niikk

No, these classes aren’t really re-usable since they are specifically for the off-canvas elements, not other sticky/fixed elements.
What I meant with the JS resources is that you can apply your CSS through JS since that will probably be faster than relying on the time it takes for JS to add the ocs-sidebar-active class.
That way you can also first get the proper width to animate.

The example I’ve send is currently only handling top animations, not left and right since that is not always preferable.

https://github.com/JoryHogeveen/off-canvas-sidebars/blob/master/js/off-canvas-sidebars.js#L225-L281

You can re-use the code and create your own implementation for left and right animations.
I also see there is something already happening to the button in JS, correct?

Cheers, Jory

Hello @keraweb

Does “currently only handling top animations” means, that this is the part which allocate the navigation header in the top? The right push comes from the plugin setting “Sidebar slides and pushes the site across when opened.”

Actually I only need to insert some classes in the GeneratePress sticky header via script in order that the classes are faster hooked in and the transition speed should be the same. The push to right then comes from “Sidebar slides and pushes the site across when opened” or i’m totally wrong?

For this I currently use the “delay” but this is not a very proper solution. I know..

In the “Produkte Filter” button is no jS. This is the shortcode to call the canvas. But There is (when a filter is avcive) a reset button also. But this has no impact to the canvas. Are you reference to this?

Hi @niikk

Does “currently only handling top animations” means, that this is the part which allocate the navigation header in the top? The right push comes from the plugin setting “Sidebar slides and pushes the site across when opened.”

It means that while I did built in some code that handles the top animations for fixed/sticky elements, I do not do the same for right and left push animations.

Actually I only need to insert some classes in the GeneratePress sticky header via script in order that the classes are faster hooked in and the transition speed should be the same. The push to right then comes from “Sidebar slides and pushes the site across when opened” or I’m totally wrong?

No that’s not what I mean. I mean that while the JavaScript from my plugin adds the ocs-sidebar-active class to the HTML element, the speed in which that actually happens is depending on the client (browser). So there is no way to rely on that class if you want to sync the animation.

The only way you could do that is by hooking into the JavaScript event and apply the same animation through JavaScript since it runs asynchronous.

Unfortunately I don’t have a better solution for this at the moment.
It’s quite tricky to make a feature that covers these things since every user wants something different.
For example, while you want to have the menu moved with the sidebar, I usually prefer not to do that for my projects.

At the current state of this plugin this feature will require you to do some custom JavaScript coding.
You can follow progress on GitHub but it could take a while..

Cheers, Jory

• This reply was modified 4 years, 1 month ago by Jory Hogeveen.

Hello @keraweb

Thanks. After I read your post I rethinking my solution and I was able to find another way:)

I simply change some CSS stuff for the animation and now it works very very smooth.

   transition-duration: 300ms;
    transition-timing-function: unset;

Did you see any problem for this?

Hi @niikk

Ah! So unsetting the timing function was the key after all, perfect!

Keep in mind that depending on the client’s device speed there still might be some different in the animation. Other than that I’d say it would be fine (checked on my PC and it looked good to me).

Cheers, Jory

Hi @keraweb

Yes, I didn’t know that here is such a setting. But yeah.. always learning. ??

Yes I’m aware of this. But I guess to create a 100% proofed solution for every device is hard and a lot of custom code is needed. So I guess the current solution is a good solutions, not perfect, but almost ??

Thanks four your support! I like!

Cheers

Hi @niikk

Indeed, and no problem! Enjoy the plugin and if you have more questions don’t hesitate to ask!

Also, please consider leaving a nice review, it will help the plugin grow ??

Thanks! Jory

@keraweb Sure. Review done!