I am using the waypoint css library to try and make it so when I scroll to my image in scales down in size. Unfortunately I am having no luck. I the class is being added to the element I want it to be added to but the css properties are not taking effect. I have console.logged things out to make sure that the function is being called at the right time and it is plus the class is being added so I know I have all my libraries set up properly. I just can’t figure out how to make the css class actually apply the properties.
<div class="row">
<div class="col-md-7 port-pix">
<img class="pic-left" src="../images/pic-pic.jpg">
</div>
</div>
.pic-left{
transform: scale(1.5);
transition: transform 1.3s;
}
.pic-left-visibile{
transform: scale(1);
}
$('.pic-left').waypoint(function(direction){
$('.pic-left').addClass('pic-left-visible');
},
{
offset: '50%'
});