Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 20, 2017 at 2:41 pm #866702
    Justin

    Hey guys, how can I adjust the speed, in this case slow down the CSS animation that’s available in the layout builder.
    Bottom to top, top to bottom, left to right, right to left, etc.

    Thanks!

    October 20, 2017 at 2:57 pm #866707
    Guenni007

    you will find the settings on shortcodes.css look for :
    /*animation variations*/

    f.e.:

    .avia_transform .avia_start_delayed_animation.bottom-to-top {
-webkit-animation: avia-btt 0.8s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); /* Safari 4+ */
animation:         avia-btt 0.8s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); /* IE 10+ */
opacity: 1;
}
    October 21, 2017 at 12:22 pm #867016
    Rikard

    Hi,

    Thanks for helping out @guenni007, did you try that out Justin?

    Best regards,
    Rikard

    October 27, 2017 at 5:23 pm #869678
    Justin

    Didn’t work. Thanks!
    Looking to slow down the animation like we see here: https://couleecreative.com/

    October 27, 2017 at 5:42 pm #869692
    Guenni007

    you see that this is only one example of /*animation variations*/
    i see alot of animation on your site but not where you uses the enfold implemented one. I see some transfomings with matrix.
    Where are your animations to style ?

    And where is the enfold theme ? :lol
    https://js-interactive.com/

    by the way – very impressive !

    October 27, 2017 at 6:27 pm #869701
    Guenni007

    well it is not as easy as to place it in quick css. on shortcodes.css replacement it has an effect.
    perhaps you edit the keyframe too – it looks better – the distance of transformation is to short to see a faster animation.

    f.e.

    @-webkit-keyframes avia-ltr {
  0%   { -webkit-transform:translate(-50%,0); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@keyframes avia-ltr {
  0%   { transform:translate(-50%,0); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}

    see https://webers-testseite.de/elegant/animated-images/

    PS: try to set the keyframes on quick css – i did not test it – if it works

    October 30, 2017 at 5:34 am #870304
    Ismael

    Hi,

    Please try @Guenni007’s suggestion. You may need to create your own keyframes and css animation.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.