• Resolved prebbs98

    (@prebbs98)


    Hey!

    So I really enjoy this plugin. It works really well.
    I have a question.

    This website is for a hairdresser company. And on one of their pages I’ve listed the services that they provide. There are a lot. So I added and accordion on the top, which is possible to click, to get all the services listed in text format. They are links, so if you click a service they will be dragged downwards on the page to show the service they are interested in.

    However, my question is: When they click that link, I want the service “box” for that specific element to animate. That way they are easily shown the “box” for that service.

    https://im7.ezgif.com/tmp/ezgif-7-9623a097c778.gif

    Hope this is possible and that my question was clear.

    Thank you for taking your time to read!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author eleopard

    (@eleopard)

    Dear prebbs98,

    Apologies for the delayed reply.
    Thanks for using the Animate It!

    I am not able to open the GIF you shared.
    https://im7.ezgif.com/tmp/ezgif-7-9623a097c778.gif

    Getting the error: 404 – image not found.

    Plugin Author eleopard

    (@eleopard)

    Dear Prebbs98,

    I checked the page at http://venkes.no/priser I you’ll need to add a custom script to achieve what you need.

    Please note that since the elements you wish to animation on click already have animate it classes added. This might cause some conflict. If it occurs, please remove the previously added classes.

    _________________________________

    1. Download the Plugin Header and Footer Scripts:
    https://wordpress.org/plugins/header-and-footer-scripts/

    2. On your WordPress back end, go to Settings > Header and Footer Scripts and paste the following script in the Footer section:

    <script>
    (function($){
    console.log("hi");
        $('body').on('click', '.service-anchor', function (e) {
    console.log("hello");
            var svcBlockSelector = $(this).attr('href');
            var $svcBlock = $(svcBlockSelector);
            $svcBlock.removeClass("animated rubberBand delay1 duration1");
            setTimeout(function () {
                $svcBlock.addClass("animated rubberBand delay1 duration1");
            }, 100);
        });
    })(jQuery);
    </script>

    Note: I have used rubberBand animation here. You can replace it with any other animation if you want.

    3. Add the class service-anchor to the links Herreklipp, Dameklipp etc. that are on top.

    _________________________________

    Please test it out and let me know if this works for you.

    Thread Starter prebbs98

    (@prebbs98)

    Hey☺️

    Thank you for replying with a full and complete guide!

    This worked perfectly. And was exactly what I was looking for. I had to remove the other animations as you predicted, but that’s no problem. Because I had them as a compensation for the other solution. Now it is working perfectly and exactly as I hoped.

    Thank you very much for taking your time to assist me with this.
    Hope this will help out other with same request.
    Much gratitude from me ☺️

    Plugin Author eleopard

    (@eleopard)

    Glad to know it worked.
    Please feel free to let me know if you face any other issues.

    Marking this ticket resolved now.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Animate a object when link is clicked’ is closed to new replies.