Jump to content
Search Community

olivetum

Members

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by olivetum

    Animate children div using jQuery + TimelineMax (GSAP)

    in GSAP

    Posted

    I'm quite new to the jQuery and GSAP and really need Your help ;) .  

    I'm having a problem in animating children div while parent element is hover using TweenMax/TimelineMax. I can animate css of children with jQuery like this:  

    $('.div1').mouseenter(function () {
            $('.div2').css('font-size', '20px');
          });

    but since I want to build a really complex animation I would like to use TimelineMax to my code in place of "css('font-size', '20px');" but nothing seems to work. I've build a simple test.html to find a solution: 

    <body>
    <div id="logo">
      <p id="text">TEXT TO BE ANIMATED</p>
    </div>
</body>

    and I've tried to animate my #text element with this code (obtaining only parent animation): 

    $(document).ready(function () {
  var hoverEffect = $("#logo");

  hoverEffect.hover(function() {
  TweenMax.to(this, .35, {borderLeft: "15px solid #00b89d"})
  }, function() {
  TweenMax.to(this, .5, {borderLeft: "0px solid #00b89d"})
  });
});

    I've also tried jQuery .find() and .children() methods but failed... Thanks in advance for Your help ;)

    See the Pen qjBBVV by olivetum (@olivetum) on CodePen

×
×
  • Create New...