4

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')) {...}
L.Lawliet
  • 113
  • 4
  • 12
  • Well it actually is not, just trying to make seance of dev tools, animation, general debugging all in one. – L.Lawliet Feb 19 '16 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 Feb 19 '16 at 10:38
  • Ye i see they are altered, but my main focus is finding source for it. – L.Lawliet Feb 19 '16 at 11:12

1 Answers1

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".

enter image description here

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

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

enter image description here

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

enter image description here

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.

enter image description here

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.

enter image description here

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

enter image description here

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.

Community
  • 1
  • 1
Matt Zeunert
  • 16,075
  • 6
  • 52
  • 78
  • 1
    That's it, that's what i was missing. You are a life saver. I needed to see how everything works under the hood thank you a lot! it doesn't matter if i find it on this one, but still it's good for my own debugging of animation or when I'm using framework, plugin, just so i can follow chain of events. – L.Lawliet Feb 19 '16 at 12:47