REV SLIDER SCROLL and FADE-IN animation help

Support
#1

Hi there,

I’m developing a site at:

https://www.crkl.hu/water/

Thing is, I have the “tobb informaciot” button set up, so that it scrolls under the slider. This is done through revslider layer settings. Thing is, it scrolls a bit fast, and the the wrong position, it scrolls to the middle of the section under it, effectively cutting off the top part of the section (#Section2) How can I fix this?

Issue 2:

Columns have a FADE-IN setting, which is great, I use it in Section 2. However, is there a way to time the fade-in? SO for example, I would like the bottom text to start fading in after the first has fully appeared. Is this achievable?

Issue 3:

Sorry found a third issue. I’m using essential grid at the bottom of the page, and would like to achieve an animation similar to this https://textilsantanderina.com/

In essential grid settings, I added the zoom from back animation to all of the in-use skins, but there is no animation happening. Any idea why?

Thanks!

#2

Hi @Pbalazs89,

Please change the action of your button to Simple Link and the href is the section ID:

Currently, the Fade In option is available for column only. I’ll add the feature request for the v2 elements as well.

Stay tuned.

#3

Thanks!

Last question

Issue 3:

So I managed to fix this, but the animation is just way too fast. Is there a way to slightly slow it down?

Issue 1:

I added the SECTION2 thing as a simple link, but the issue still persists.

Thanks!

#4

Hi @Pbalazs89,

I’ve changed the action of button to following screenshot. It’s working now:

Please try adding this custom CSS:

.esg-grid .mainul li * {
    transition-duration: 0.5s !important;
}

Hope it helps :slight_smile:

#5

Thanks, that’s a bit better! Could we make it so that the animation does not zoom in so much either? Is it the transform: matrix3d() property?

Also, one more thing if it’s alright.

Footer Builder ----

I’m stuck here: https://www.dropbox.com/s/kcqcbq5cp6itnqz/Screenshot%202019-03-29%2013.12.37.png?dl=0

This is what I would like to achieve:

The issue I’m having is that If I create a flex container, I can either choose a column or a row layout, I can’t seem to choose it for particular elements, can I? This makes positioning the logos at the bottom problematic, and the text next to the icon in the first column.

Thanks a bunch!

#6

Hi @Pbalazs89,

To adjust the zoom, you can add this in Theme Options > CSS

.no-touch .tmb-image-anim.tmb .t-entry-visual:hover .t-background-cover {
    transform: scale(1.02, 1.02);
    -webkit-transform: scale(1.02, 1.02);
    -moz-transform: scale(1.02, 1.02);
    -o-transform: scale(1.02, 1.02);
    -ms-transform: scale(1.02, 1.02);
}

You may change 1.02 as you like.

With regards to your footer, I suggest you create your social sharing in global blocks then add it to your footer using the global block shortcode. That way it will be easy for you to align the elements.

Hope this helps

#7

Hi there,

Thanks for the tip with global blocks. That solved the second issue.
However, the code snippet does not work, it does not seem the effect the grids transformation. Could you please have a look? I input the code into theme options - custom css

#8

Hi @Pbalazs89,

Please try this

.esg-grid .mainul li:hover {
transform: matrix3d(1.1,0,0.00,0,0.00,1.1,0.00,0,0,0,1,0,0,0,0,1) !important;
-webkit-transform: matrix3d(1.1,0,0.00,0,0.00,1.1,0.00,0,0,0,1,0,0,0,0,1) !important;
  transition-duration: 0.5s;
}

Here a transform: matrix3d Generator.

And the transition-duration that control the speed.

Please keep in mind that Essential Grid has the Grid Item Animation Options, further customization from here would fall outside of the support that we can offer.

Thanks,

#9

Hi there, Thanks for the tip!

I tried adding the code, but there’s some weird glitch with the animation. Adding the code results in the container expanding, not just the background. Also, it seems like the effect takes place in two steps/zooms, one would be plenty. :smiley:

Any tips?

#10

Hi @Pbalazs89,

Regretfully, this really isn’t something that we should continue on troubleshooting as product support because this is not a native function of the theme. This is going into custom development which should be directed to a 3rd developer.

Thank you for understanding.

#11

Hi there,

Totally understand. Thanks for the pointers anyway.
Back to my issue with the header button. I did what you suggested here on the page, and it worked fine there, however, I’m doing the same setup on another page:

https://www.crkl.hu/hogyan-mukodik/

I would like the button in the slider to navigate me down to #Section2. This works on another page, but here it teleports there, no scroll effect. Also it scrolls down a bit too much, the header isnt visible. Is there a way to fix this?

Thanks!

#12

Hi @Pbalazs89,

Please change the link type from jQuery to Tag link.



Thanks,

#13

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