velocity.js | velocity for jsSupports both client and server side use | Text Editor library

I'm trying to use JavaScript (velocity.js) to animate an SVG that I've defined using and then instantiated with and I'm having trouble accessing the DOM element of the SVG component I'm trying to modify. My code works with normal inline SVG just fine, but when I switch to the / method it breaks.

When I use the inline SVG I can console.log the element in question and it returns information, but trying to access that same element generated with returns an empty object. Is there anything in particular I need to be doing when trying to access the DOM elements of SVG generated with ?

The HTML

hi i have a code that i want to put 2 conditions in one if . my code is like below :

I want to know is it the correct way to use setTimeOut or setInterval for making an animation in javaScript (I mean the loop part of the animation, looping after specific time) ?

if it is the correct and the only way of doing that , do the green sock (Gsap) and the other JS animation library use the setTimeOut and setInterval for doing the animation in specific time ? what about the animate method in jQuery ?

UPDATE

I'm using the GreenSock Animation Platform (Gsap) for animations , and it provides really fast and smooth animations. I just asked the question to figure out how do they handle the animations very smooth and fast?

as I mentioned in the question , there is some functions like setTimeOut and setInterval for handling animations and also there is another function name is requestAnimationFrame() for making animations without gaps unlike the timeOut and Interval functions.

So with these definitions how does the fast animation libraries like green sock and velocity.js handles their animations?

Thank you .

I'm using a WordPress plugin (open source) that will allow you to add an expandable widget for a WooCommerce product category.

This is the JS:

I am maintaining a legacy code at work that runs on internet explorer 7, and I have performance issues on the old hardware.

Css animation being not supported in IE7, I've tried jquery animate but the results were horrible, I've tried to replace theme with Velocity.js, I've seen some minor performance gains but still not enough.

In order to write unit tests for my AppSync resolvers, I'm using the VelocityJS package to parse the VTL inside of my sam template. However, the VTL template isn't being fully parsed.

The code works fine on AWS, it's the unit tests that are erroring. https://github.com/shepherdwind/velocity.js

I think this it's simple but I can't figure it out,

I have a form a simple one that asks for a name, date one and date two.

when you submit here's the jquery

I'm experimenting with some transforms and animations using Velocity.js. One of the animations scales an element that's been absolutely positioned, but for some reason, I can't get the element to center.

According to Firefox Developer Edition's devtools, there's a negative position-bottom and position-right on the element, but I can't figure out where it's coming from. It's parent is static positioned and it's just a regular div with height: 100%.

Where could these be coming from?

Computed styles for div in question (while it's being scaled):

I switched from anime.js to velocity.js and try to defnine a simple animation with delayed opacity. For this I use the stagger. But if I put a function for the stagger delay in it, I have no delayed stag animation. every elemenet is popping up but not animated and delayed. In the first i tried what I have used for the animation with anime.js and the second one is directly from the github issue.

Here is also my jsbin: https://jsbin.com/firetuh/edit?html,css,js,output