Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #1401186

    Dear Kriesi Team,

    is it possible to restart the animations when the user scrolls back up or down again to animated columns?

    Thank you very much for your feedback!

    Best regards,


    a jQuery Option could be to have intersectionObserver and give to elements that comes into viewport a class – and if they are out remove that class.

    see here f.e. the headings:

    example code could be:

    function observe_headings_on_homepage() {
    <script type="text/javascript">	
    	const wrappers = document.querySelectorAll(".av-special-heading")
    	const targets = document.querySelectorAll(".av-special-heading-tag")
    	const animClass = ["in-view"]
    	const observer = new IntersectionObserver((entries, observer) => {
    		entries.forEach(entry => {
    			const currentIndex = Array.from(wrappers).indexOf(
    				if (entry.isIntersecting) {	
    				else {
    	}, {
    		root: null,
    		threshold: 0.1,
    		rootMargin: "-120px 0px -100px 0px",
    	wrappers.forEach(wrapper => {
    add_action( 'wp_footer', 'observe_headings_on_homepage' );

    for that page above i set then the css in quick css:

    .heading-animation .av-special-heading-tag .heading-wrap,
    #top.privacy-policy .heading-animation .av-special-heading-tag {
        transform: scale(0);
        transform-origin: center center;
        opacity: 0;
        transition: 0.5s all ease;
    .heading-animation .heading-wrap,
    #top.privacy-policy .heading-animation {
        transform: scale(1);
        transform-origin: center center;
        opacity: 1;
        transition: 1s all ease;

    you can do that with columns etc.


    Thanks Guenni007,

    that is a good solution if you add custom animations but i use different options of
    the enfold theme animations. Is there any solution to do it for all animations
    that are set with the avia layout architect column animation options?

    Thanks and best regards!


    maybe a mod knows why on some animations the “trick” will not work.
    it sometimes only removes not all classes from all ( each ) observed element.

    function refresh_enfold_keyframe_animations() {
    <script type="text/javascript">	
    	const hiddenElements = document.querySelectorAll('.av-animated-generic');
    	const observer = new IntersectionObserver((entries) => {
    	    entries.forEach((entry) => {
    	        if (!entry.isIntersecting) {'avia_start_animation', 'avia_start_delayed_animation');
    	        else {
    	hiddenElements.forEach((element) => observer.observe(element));
    add_action('wp_footer', 'refresh_enfold_keyframe_animations', 9999);



    Thanks, but it doesn’t work. Now all animated objects disappear when you scroll back up.


    Yes – some animations – like the reveal animation – create extra child containers – then the target will be different.
    but nevertheless on f.e. simple left to right – it works sometimes – sometimes not – so the code is useless.
    So – a developer had to look for it – if there is a chance to “refresh” those keyframe animations.


    Thanks for your patience, but unfortunately there is not an easy way to do this as Guenni007 has pointed out about the added classes.

    Best regards,

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