Tagged: ,

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • July 8, 2016 at 3:03 pm #658448
    barak97

    I used many kinds of animation in my homepage, using Avia builder.
    Instead of showing when in the middle of the page, the items show up when I continue to scroll, and they are already not visible – Hidden by the header.
    That means that animation triggers only after I scroll over the page, instead of in the middle of the page (as shown in the demo sites)

    How could it get fixed?

    July 9, 2016 at 1:09 pm #658769
    Rikard

    Hey barak97,

    Please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    July 9, 2016 at 10:12 pm #658862
    barak97

    Off coure.
    Thank you.

    • This reply was modified 8 years, 4 months ago by barak97.
    July 12, 2016 at 1:45 pm #659827
    Andy

    Hi,

    you can use Layout Elements and when editing them go to “Animation”.

    Best regards,
    Andy

    July 12, 2016 at 2:06 pm #659847
    barak97

    Hi Andy,
    I’ve done that, but the animation doesn’t work well, as I wrote above.

    July 12, 2016 at 2:12 pm #659855
    Yigit

    Hey!

    Please go to Enfold/js/shortcodes.js and find

    $('.avia_animate_when_almost_visible', container).avia_waypoints({ offset: '80%'});

    and change it to 

    $('.avia_animate_when_almost_visible', container).avia_waypoints({ offset: '100%'});

    Regards,
    Yigit

    July 12, 2016 at 5:30 pm #659992
    barak97

    Unfortunately, that didn’t work as well…
    It happens only in the front page – Other pages are fine.
    (I used the front page of the Gym demo and edited it.)

    July 12, 2016 at 9:45 pm #660118
    Andy

    Hi,

    save the front page as a template and then load the template when you create a new page. Let us know if this way it’s working for you.

    Best regards,
    Andy

    July 13, 2016 at 4:33 pm #660493
    barak97

    Unfortunately, no :(
    It is just the same.

    July 16, 2016 at 2:42 am #661585
    Ismael

    Hi,

    Adjusting the avia_waypoints offset parameter should work as suggested above. Please redo the modification then remove browser cache or hard refresh the page. I checked the site and the animation triggers immediately before I scroll through the animated elements.

    Best regards,
    Ismael

    July 30, 2016 at 4:07 pm #666827
    barak97

    I think I figured the problem out, but I still need help to solve it.

    Looks like the problem is I created two Full Width Sliders in the front page.
    Because the slider doesn’t look well on mobile, I decided to make 2 different sliders with different sizes; First one for Desktop and Tablet, Second for Mobile (and Tablet when is vertical).

    According to one of the answers in this forum, I used this code in order to do it:

    /*First is for Desktop and Tablet, second is for Mobile*/
@media only screen and (max-width: 989px) {
div#full_slider_1 {
    display: none;
}
}
@media only screen and (min-width: 988px) {
div#full_slider_2 {
    display: none;
    }
}

    Thing is that it looks like this code makes the problem of animation triggers late.

    Look at “ex1” in the private content in comparison to “ex2”.
    ex1 has both Fullwidth slider for desktop & mobile.
    ex2 has only one Fullwidth slider. That means that the code above doesn’t affect this page, at least not on desktop view, and only the desktop slider is shown (and exists) in this page.

    ex1 has the animation problem and ex2 doesn’t.
    That means that the code makes the problem, because for some reason, your theme counts the non-visible slider in the trigger point value.

    What’s the right way to hide each slider for each device, in a way that is won’t affect the animations?

    August 4, 2016 at 8:33 pm #668719
    barak97

    Is there any solution?

    Waiting for your help.

    August 8, 2016 at 5:59 pm #669968
    barak97

    please? any help?

    August 9, 2016 at 1:29 am #670108
    Ismael

    Hi,

    We are very sorry for the delay. What’s wrong with the initial slider on mobile? Maybe we can fix that instead of adding another slider.

    Please refrain from bumping or replying to your own thread because it gets pushed back to the end of the queue and moderators won’t be able to provide a response immediately. Please be patient while we go through the rest of the queue. Thank you for your understanding

    Best regards,
    Ismael

    August 9, 2016 at 6:46 am #670169
    barak97

    Problem is it looks tiny because of the aspect ratio of the device… (combined with the fact that mobile are usually vertical while desktop is always horizontal)
    The slider I made for desktop is about 16:9, and the one for mobile is 4:3, so images and text will be shown nicely and the slider will be big enough.

    Isn’t there any way to hide an element without “destroying” the animation triggers “count”?

    August 13, 2016 at 3:41 am #672155
    Ismael

    Hi,

    Please remove the css modification then add this in the functions.php file:

    function add_custom_script_mod(){
?>
<script>
(function($){
    function a() {
        var windowWidth = window.innerWidth;
        if (windowWidth < 989) {
			$('#full_slider_1').detach();
        } else {
			$('#full_slider_2').detach();
		}
    }

	a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script_mod');

    Best regards,
    Ismael

    August 13, 2016 at 11:37 am #672241
    barak97

    I’ve done that, but the same problem still accours… :(
    You can see in the link in the Private Content.

    August 17, 2016 at 4:01 am #673458
    Ismael

    Hi,

    Did you transfer the site? Please create a test page so that we can check the issue again or provide the new url.

    Best regards,
    Ismael

    August 17, 2016 at 3:33 pm #673754
    barak97

    This is the link.

    August 23, 2016 at 1:48 am #676103
    Ismael

    Hi,

    It’s actually working. Please remove browser cache or hard refresh before testing the page. Note that the script will remove or detach the slider on page load, not on resize.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Animation triggers late’ is closed to new replies.