Home Forums Porto Template Firing animations when scrolling to a specific spot.

This topic contains 5 replies, has 2 voices, and was last updated by  Support2 5 days, 20 hours ago. This post has been viewed 63 times

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10023776

    gynexgroup
    Participant

    Some of our animations are triggering as soon as the elements appears in the view port. This often prevents the user from seeing the whole animation because it is still hid below the view port.

    Is there a way to trigger the animation.css element when the user scrolls up to a specific spot?


    #10023780

    Support2
    Keymaster

    Hello,

    You can use the data plugin option accY.
    Please try with the code below:

    <div class="test-element" data-appear-animation="fadeInDown" data-plugin-options="{'accY' : -250}">...</div>

    * Note the data-plugin-options="{'accY' : -250}". You can try with diferent values.

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10023783

    gynexgroup
    Participant

    Thank you for your response. I have tried your suggestion and not able to make that work yet. Is the value of the option the distance from the top in pixels? i.e. -250 is 250 pixels from the top?


    #10023786

    Support2
    Keymaster

    Hello,

    This is the distance from bottom of window.
    – Negative values will move the “anchor/trigger point” to below.
    – Positive values will move the “anchor/trigger point” to above.

    * Make sure that element has the data-appear-animation="xxx" defined.

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10023790

    gynexgroup
    Participant
    This reply has been marked as private.
    #10023798

    Support2
    Keymaster

    Hello,

    The problem is with your file (js/theme.init-min.js).
    We did some tests here, and when we substitute this file by the file at our preview, the appear animation options works.

    For test purpose, substitute the “theme.init-min.js” by script below:

    <script src="http://preview.oklerthemes.com/porto/6.0.0/js/theme.init.js"></script>

    Probably, at your minified theme.init.js, it’s missing some code related to appear animation plugin.
    My suggestion for you is create a new minified version of this file using the code on link below:
    http://preview.oklerthemes.com/porto/6.0.0/js/theme.init.js

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


Viewing 6 posts - 1 through 6 (of 6 total)