CODEWITHSUNDEEP
jquerygsap
Hans Liu
Hans Liu

Reputation: 37

to animate properties relative to their parent

I'm figuring out the way to move the text inside a 'thumbnail' relative to its height, which is changing according to media width. For TweenMax, it seems like I could not put anything other than numbers and some signs inside quotes. Is it possible to do that with GSAP or simply jQuery?

the HTML is as following:

<div class=' blog col-sm-4 col-xs-12'>
  <div class='thumbnail '>
     <img src='https://scontent-tpe1-1.xx.fbcdn.net/hphotos-xfa1/t31.0-8/10285836_982461275099969_2229614909304204709_o.jpg' />
     <h2>寫字</h2>
     <p></p>
   </div>
</div>
<--! the other two similar div !-->

and the TweenMax is here, figured it might be a way out to calculate the height of '.thumbnail', but doesn't work anyway:

var height = $('.thumbnail').height()/1.5;
$(".thumbnail").hover(function(){  
  $(this).children('img').toggleClass('thumbnail-img-hover');
  TweenMax.to($(this).children('h2'), 1.5,{y:'-=height'});
});

Upvotes: 0

Views: 131

Answers (1)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Since height is variable which holds value you shouldn't wrap it inside ' '. Below changes will get what you need..

TweenMax.to($(this).children('h2'), 1.5,{y:'-='+height});

Upvotes: 1

Related Questions