Finding animation code on website

Question

I found on this website typewriter animation on main page but i can't seem to find the code running it. Is there anyway to track animations on websites and see what makes them tick?

I use chrome developer tools to find java script file so i can read the source but i couldn't find it.

**this function gives if element is being animated but i need how **

if (!$(element).is(':animated')) {...}

Answer 1

You can use a DOM breakpoint to pause execution when the JavaScript code changes an element. This is very use when trying to understand why an animation or other DOM change is taking place.

To create DOM breakpoint, find the element that's being animated, right-click on it in the inspector, select "Break on" and then "Subtree Modifications".

Chrome will then pause when the element content is being updated.

However, in your particular case the code is minified and not readable.

You can prettify the code with DevTools, but it won't make it much easier since the variable and function names are still minified.

If you look at the call stack you can see that this part of the page is a React component. So you can try using the Chrome React DevTools to better understand the code on that page.

This tells you that there's a component that takes a fixedText and a typeingTextList.

You can now search the page's code in Chrome to find out where the code for that React component is.

You're lucky and you can actually find the original (though minified) source code for the DevsiteTypingEffect component.

Since the code is minified I don't think you'll be able to get a better answer.

Another strategy is to google for DevsiteTypingEffect to see if the component is open source. However, you're out of luck in this case.