CODEWITHSUNDEEP
jquerygoogle-chrome-devtools
william007
william007

Reputation: 18525

Chrome developer tools to locate invoked javascript function

In http://themify.me/

When scroll to the portion as the following image, the 3 icons will be animated up. I am interested to know what js file is trigerring. How should I use chrome developer tools to locate it?

enter image description here

Upvotes: 0

Views: 74

Answers (2)

CuriousMind
CuriousMind

Reputation: 3173

The animation is getting triggered using CSS animation. To locate the CSS properties, you can use chrome developer toolsenter image description here. Note the magnifier icon in top left corner. Just click that and move mouse over the area you desire to inspect. In this case the element is li and CSS class applied to it is animate-up. You will notice that on the right side you will see styles section with the list of CSS styles applied for the given element.enter image description here Just click on the style.css link and you will see entire stylesheet. Here you will find definition for 

.slide-up.animated li.animate-up {
-webkit-animation-name: flyInBottom;
animation-name: flyInBottom;
}

Just scroll few blocks and you will find animation definition for flyInBottom.

@-webkit-keyframes flyInBottom {
0% {
    opacity: 0;
    -webkit-transform: translate(0px, 200px);
    -ms-transform: translate(0px, 200px);
    transform: translate(0px, 200px);
}

100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}
}

Upvotes: 1

Kuba Rakoczy
Kuba Rakoczy

Reputation: 4124

It's a keyframe animation declared as a -webkit-animation-name property:

li.animate-up {
-webkit-animation-name: flyInBottom;
}

Here's the implementation: 

@keyframes flyInBottom {
    0% {
        opacity: 0;
        -webkit-transform: translate(0px, 200px);
        -ms-transform: translate(0px, 200px);
        transform: translate(0px, 200px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}

I found it by simply clicking Inspect element and then following CSS selectors.

Upvotes: 1

Related Questions