javascript - Finding animation code on website - Stack Overflow

admin管理员组

文章数量:1390444

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')) {...}

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')) {...}

• javascript
• css
• animation
• google-chrome-devtools

Share Improve this question Follow asked Feb 19, 2016 at 10:04 L.LawlietL.Lawliet 11344 silver badges1212 bronze badges 3

• Well it actually is not, just trying to make seance of dev tools, animation, general debugging all in one. – L.Lawliet Commented Feb 19, 2016 at 10:15
• That script itself is very long, and walks around in circles, looking for a bit, check the _5sda _5sdb and _5sda spans that keep getting altered. If you just want the "writting animation", may I suggest a different script, that just counts time, and chage/add text to a div. – Bonatti Commented Feb 19, 2016 at 10:38
• Ye i see they are altered, but my main focus is finding source for it. – L.Lawliet Commented Feb 19, 2016 at 11:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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 ponent. So you can try using the Chrome React DevTools to better understand the code on that page.

This tells you that there's a ponent 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 ponent is.

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

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 ponent is open source. However, you're out of luck in this case.

本文标签： javascriptFinding animation code on websiteStack Overflow