-
AuthorPosts
-
June 16, 2016 at 7:57 pm #649376
Hi guys,
I have several animation-based elements on my site. I like that animations really much, but:
They trigger too late for my sense. When I’m scrolling down my page the gallery element, all of the icons i used, the counter element, the image of the testimonial element… they just start to animate (fade-in etc.) when the user scroll past.
That’s the link to my site: http://locaneo.linda-polak.de
Can you tell me where and how I can control that?
- This topic was modified 8 years, 5 months ago by lindapolak.
June 18, 2016 at 8:04 pm #650273Can’t anyone help with that issue?
June 18, 2016 at 11:33 pm #650315The values for the waypoints are hardcoded in /wp-content/themes/enfold/js/shortodes.js. So you have two options
1. Modify the original file
In line 86
$('.avia_animate_when_almost_visible', container).avia_waypoints({ offset: '80%'});
change the 80% to 95% or 97%.
The higher the value the earlier the elements fade in.
Caution! This file will be overwritten each time enfold gets updated. So you have to recall how to modify the file again2. Monkey patching using a child theme
– create a child theme (simply copy the child theme from the full theme zipfile to your theme folder)
– create a directory called ‘js’ within the child theme directory
– create a file called mmx-avia-mod.js within the ‘js’ directory
– put the following code into the file mmx-avia-mod.js(function($){ var _old_avia_waypoints = $.fn.avia_waypoints; $.fn.avia_waypoints = function( options_passed ){ if ( typeof options_passed == 'object' && options_passed ) { if ( options_passed.offset == '80%' ) { options_passed.offset = '97%'; } } return _old_avia_waypoints.apply( this, arguments ); }; })(jQuery);
– add the following code to your child themes functions.php
add_action( 'wp_enqueue_scripts', 'mmx_load_scripts', 999); function mmx_load_scripts() { wp_enqueue_script( 'mmx-avia-mod', get_stylesheet_directory_uri() . '/js/mmx-avia-mod.js', array( 'jquery', 'avia-shortcodes' ), '', true); }
– done
Caution! Although this modification will survive any update it will work only as long as the original function $.fn.avia_waypoints from enfold wont be modified.June 20, 2016 at 4:46 am #650571Hi,
Thank you for using Enfold.
@mensmaximus: This is cool. Thanks for the help! :)
@lindapolak: Please try the suggestion above.Best regards,
IsmaelJune 20, 2016 at 10:49 am #650722First: Thank you for your help mensmaximus!
Don’t know, if I’m doing something wrong, but the modifications I made didn’t change anything.
– I added the mmx-avia-mod.js in the “js” directory in my child themes folder and added the code you pasted in here
– then I added the second code to the functions.php in my child themes folder before the ?>
– I saved everything, but the JavaScript triggers still too late…I had a child theme folder before the problem but I didn’t take it from the Enfold.zip – is there something I have to add to make WordPress notice the .js file in the new folder?
Edit: I didn’t even find a child themes folder in the .zip I downloaded from themeforest :/
Greetings!
Linda- This reply was modified 8 years, 5 months ago by lindapolak.
June 20, 2016 at 11:43 am #650742@lindapolak please refer to the enfold documentation how to create a child theme: http://kriesi.at/documentation/enfold/using-a-child-theme/
June 21, 2016 at 6:58 am #651291June 21, 2016 at 1:30 pm #651467So my child theme is exactly set up like described in the link. But it still doesn’t change anything…
You can see the elements still trigger much too late here: http://locaneo.linda-polak.de :(
Regards,
LindaJune 21, 2016 at 3:20 pm #651523@lindapolak ah I see. It is a different animation class.
Change the code in mmx-avai-mod.js to
(function($){ var _old_avia_waypoints = $.fn.avia_waypoints; $.fn.avia_waypoints = function( options_passed ){ if ( typeof options_passed == 'object' && options_passed ) { // if ( options_passed.offset == '80%' ) { options_passed.offset = '97%'; // } } return _old_avia_waypoints.apply( this, arguments ); }; })(jQuery);
June 21, 2016 at 3:31 pm #651525Changed the code, but still it looks like it’s changing nothing :(
June 21, 2016 at 3:44 pm #651534The content of your mmx-avia-mod.js is wrong:
Please use a true editor (like notepad++) not a word processor (like ms word) to create the file. The charcaters ' need to be simple quotation marks (einfache Anführungszeichen)
PS: the wrong characters dont get displayed in the forum so i removed the correctly displayed wrong code ;-)
- This reply was modified 8 years, 5 months ago by mensmaximus.
June 21, 2016 at 3:53 pm #651540I have prepared a file for you. You can download it at https://mensmaximus.de/dokumente/enfold/mmx-avia-mod.zip. Just unzip the archive an copy the file to your childs /js directory.
June 21, 2016 at 5:05 pm #651581Downloaded the .zip, unzipped the .js file and rewrited the old one with the new one.
Deleted cache and refreshed my browsers (Chrome & Sarari) and it still seems not to work :(
- This reply was modified 8 years, 5 months ago by lindapolak.
June 22, 2016 at 7:27 am #651948@lindapolak Thank you for keeping my brain working :-)
After deeper study and debugging I have rewritten the monkey patch and it should work now. You can download it again from https://mensmaximus.de/dokumente/enfold/mmx-avia-mod.zip
I simply looked at the wrong css class even after I realized I did (‘Wald vor lauter Bäumen nicht sehen’). In the revised patch you will notice a conditional block where you can adjust the values for the different css classes applied by enfold independently :
(function($){ var _old_avia_waypoints = $.fn.avia_waypoints; $.fn.avia_waypoints = function( options_passed ){ if ( ! options_passed ) { var options_passed = {}; } var selector = $(this).selector; if ( selector == ".avia_animate_when_almost_visible" ) { options_passed.offset = '97%'; // Original value 80% } else if ( selector == ".avia_animate_when_visible" ) { options_passed.offset = '97%'; // Original value bottom-in-view } else if ( selector == ".av-animated-generic" ) { options_passed.offset = '95%'; // Original value 95% } return _old_avia_waypoints.call( this, options_passed ); }; })(jQuery);
Your issue stems from ‘avia_animate_when_visible’. So if you are happy with the other animations you simply keep the old values. As a default I have set ‘avia_animate_when_visible’ and ‘avia_animate_when_almost_visible’ to 97% while ‘av-animated-generic’ is untouched.
June 22, 2016 at 11:14 am #652017@mensmaximus You made it! Wow!
It works just perfectly now! I appreciate your help so much! Can’t thank you enough :)
-
AuthorPosts
- The topic ‘Animations trigger too late’ is closed to new replies.