[santosfel5Participant]

I’m looking to make the fade-in animation happen automatically. On this page when the page is opened, the top two sections will fade-in, but the third will not. This leaves a huge blank space below the content. Here is the page: http://samraydesigntestsites.com/ucsa/services/3d-simulated-environments/

The third section will fade in once I scroll, but this leave for a very ugly layout upon opening the page until the user does a single wheel scroll. How would I go about making the fade-in animation on that section happen automatically upon opening the page as opposed to on wheel scroll?

[RupokMember]

Hi there,

Thanks for writing in! It seems everything working fine on my end. Animation working as expected for all columns and there is not such gaps that you mentioned. Here is the full screenshot on my end – http://prntscr.com/91z6hl

Please check again clearing your browser’s cache or try from another browser.

Cheers!

[santosfel5Participant]

I just emptied my browser cache and refreshed the page. It still does not load below the first two sections of content. An example of what I am experiencing can be seen here:

[LelyModerator]

Hello There,

Thank you for the screenshot.
Another staff here. Unfortunately, I can’t duplicate the issue you’re having. I’ve check it using multiple browser. Here’s a video screencast: http://screencast-o-matic.com/watch/coXIhNhoNz
Is this issue browser specific? What is you’re OS and browser version?

[santosfel5Participant]

Here are the specs for what I am looking at the site through:

Chrome Version 46.0.2490.86 m
Browser Size: 1920 x 955
OS: Windows 7

[Rue NelModerator]

Hello There,

Thanks for the updates.

Please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

#x-section-3 .x-column[data-fade="true"] {
    opacity: 1;
}

Hope this helps.

[santosfel5Participant]

Thank you for your help. I have added this code to the Cornerstone CSS for that specific page, but it now appears on the page as if no fade animation is happening on section-3. I would still like the fade animation to happen.

[Rue NelModerator]

Hello There,

Thanks for the updates. The issue was the fade animation of your column. When you first load the page, the section 3 columns were only partially showed and because it is just partially displayed, it needs scrolling events before it can trigger the fade animation effect. The custom css code removes the fade animation effect and just display it immediately. Please remove the custom css code we gave you.

How about we try it with a different approach. Please edit your page in Cornerstone, go to the settings tab, Settings > Custom JS and insert the following custom js code

(function($){
  $(window).on('load', function(){
    $('#x-section-3 .x-column[data-fade="true"]').css('opacity', 1);
  });
});

This code however may not work because you have inserted an invalid JAVAscript code in your customizer. We would recommend to remove it first. To properly insert your custom js code, please insert it in your child theme’s functions.php file instead:

function insert_wow(){ ?>
  <script src="js/wow.min.js"></script>
  <script>
    new WOW().init();
  </script>
}?>
add_action( 'wp_footer', 'insert_wow' );

Hope this helps. Please let us know how it goes.

[santosfel5Participant]

Thank you, I have removed the wow.min.js Javasript code from the site and added the JS code in your first field to the Cornerstone Custom JS section of the 3D Environments page, but section #3 is still not automatically fading upon page entry.

Section #3 still requires me to scroll down to have the content fade-in.

[ZeshanMember]

Hi there,

Sorry for the confusion!

I’m able to replicate the behaviour of section 3 columns fade-in animation. However, this is not an issue but the way animations work. By default, animations will only occur once an item is in the middle of the viewport (browser window). As you can see the first two columns with animations are in the middle of the page when the site is first opened so their animation is triggered as soon as the page loads. But that’s not the case with the columns in section 3. They are a bit off to the bottom of the viewport when the site is first loaded (see: http://prntscr.com/93sy8d).

There could be ways to adjust this so you can manually set the position of elements in the viewport with custom development, but that would be outside the scope of support we can provide. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

At this time, the best way would be to disable animation on the columns of that section if you want them to appear as soon as the page loads.

Thank you for understanding.

[santosfel5Participant]

Totally understandable. I suspected this was the case. I would suggest adding this feature in the future. Automatic page animations may come in handy with some device specific situations where the viewport falls just outside the realm of the middle of the page.

[LelyModerator]

Hello There,

We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!

[Author]

Posts