Animated SVG does not start in Nested Elements Carousel

  • Resolved dominmax

    (@dominmax)


    1 year, 6 months ago

    Hello, I tried to use in Carousel a new Elementor tool called Nested Elements and as a single element I am trying to set animated SVG. And the problem is with starting these icons ?? The first icon animates (somehow) but the next and others does not start to animate.
    The start animation point does not affect following icons. Even loop option does not work because there is no any starting trigger for icons that comes next with carousel slides. Any ideas for a solution?
    I guess that another trigger is needed connected with horizontal appearing. Or at least starting at “when page is loaded” event – then one could use loop svg drawing and it could work then.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Leap13

    (@leap13)

    @dominmax I can see that this is a duplicate topic as you already sent this on another support channel and the team are following up with you.

    Thread Starter dominmax

    (@dominmax)

    @leap13 I do not think so. I did not start the ticket, just asked on a chat, but then realized that the forum would be a better place as everyone can learn from it later, especially since it is a free widget.
    Regards, Dominik

    Hi there @dominmax ,

    I’m not sure if I’m missing something, I used animated SVG inside nested element inside Elementor carousel widget, but everything thing seems to be working fine. Here’s a screen recording showing how things work.

    It would be great if you could share your website URL so I can check.
    Regards,
    Loai

    • This reply was modified 1 year, 6 months ago by loaiamr.
    Plugin Author Leap13

    (@leap13)

    @dominmax I didn’t hear from you. I hope everything is going fine with you.

    Thread Starter dominmax

    (@dominmax)

    Hello @loaiamr and @leap13
    The difference is that I tried to use “drawing while scrolling” option and you use loop option @loaiamr in your example.
    My site is now on production, so I cannot show you the problem but you can see the option I use while scrolling on others icons (not carousel) here.

    So the svg is being drawn as you scroll the page and when you are back and wait a while – you can repeat the process. It is much nicer in my opinion that the blinking loop option. But it does not work properly in carousel because the svg element does not trigger the animation while it comes into screen from the bottom.
    Regards, Dominik

    Plugin Author Leap13

    (@leap13)

    Hi @dominmax

    Hope you are having a good day!

    We would be more than glad to help, but it would be really great if you could share a screen record of the issue from your side so we can have look and reproduce it.

    Cheers!

    Thread Starter dominmax

    (@dominmax)

    Hi @leap13,

    Here is the settings of every icon:
    https://snipboard.io/GgFdPJ.jpg

    And here you have a video (android device) and test page with the problem (at the bottom – there is a carousel) – sometimes icons works properly but often there is no animation or no icon, or just part of animation.
    Video file.
    Testing page (only mobile view).

    Best regards,
    Dominik

    Plugin Author Leap13

    (@leap13)

    Hi Dominik,

    I have checked things further and I assure that the SVG animation is triggered once you reach the carousel widget, but it ends before you navigate to the next slides because of the small value of the speed option which is currently set to “1” in the screenshot above. So, please try to set it to 5 and try again.

    Currently, we don’t have an option to trigger the SVG draw when the carousel active slide is changed.

    Regards

    Thread Starter dominmax

    (@dominmax)

    Hi @leap13,
    “Currently, we don’t have an option to trigger the SVG draw when the carousel active slide is changed.” – that’s the point. I will wait for it ??
    Maybe you may consider adding “DOMContentLoaded” event to start animation, then it could be used with loop in carousel without empty slots and other inconveniences (half solution).
    Other ways like very long time is not a cure and would looks different than the rest of animations on the site.
    Thank you for your time.

    Plugin Author Leap13

    (@leap13)

    @dominmax Could you please elaborate a bit more on this “Maybe you may consider adding “DOMContentLoaded” event to start animation, then it could be used with loop in carousel without empty slots and other inconveniences (half solution).“

    Regards

    Plugin Author Leap13

    (@leap13)

    @dominmax I didn’t hear back from you. I hope everything is going fine with you.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Animated SVG does not start in Nested Elements Carousel’ is closed to new replies.