Jump to content
Search Community

Animate children div using jQuery + TimelineMax (GSAP)

olivetum test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Hi @olivetum :)

 

Welcome to the forum.

 

I'm not quite sure what you're asking or what should be happening in your animation, but if you want to target the #text div inside the #logo div, you can use find() like this:

 

TweenMax.to($(this).find("#text"), 1, {. . .} );

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

If your only targeting that one child with the id #text. Then just pass "#text" to the GSAP target. It will be faster then using jQuery or using find() due to the nature of how the JS parser looksup the CSS selector in the DOM.

 

Targeting only ID's will always be faster since their stored in the window object. So when the selector is looked up it doesnt need to traverse down the DOM.

 

https://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/

 

TweenMax.to( target:Object, duration:Number, vars:Object ) : TweenMax

 

  • target : Object
    Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll()
     
So you can just do this:

 

TweenMax.to("#text", 1, {. . .} );

 

GSAP uses querySelector() in its target. But since you already have a id on the element your animating and only are animating one element child, target only that id to animate.

 

But since your already using jQuery and if you have multiple children to animate then just use what PointC advised above using jQuery find(), or use jQuery children() (gets first immediate children of the parent).

 

Happy Tweening!

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...