Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Secretmapper

Animating a div parent (exclusive of child)

Recommended Posts

I know that it might be hard (if not outright impossible) to achieve what I want, but gsap always surprises me (I used it back in as3) that I think it's worth it to ask.

 

Is it possible to animate a div parent exclusive of the child?

 

What I mean by this is let's say I have a div like so:

<div style="colored-rectangle">
<p>My Content</p>
</div>

See the div is a 'colored-rectangle'. I want to animate my text and the colored rectangle separately from each other.

 

I'm using TweenLite.from();, and I want my text to appear from the top while the div comes in from the bottom.

 

Thanks! :)

Link to comment
Share on other sites

Hello Secretmapper, and Welcome to the GreenSock Forums!

 

In your HTML you have a style attribute, i think you meant style to be class.

 

But anyway here is an example of a parent element being scaled while its child is rotated:

 

Codepen Example:

See the Pen oigBl by jonathan (@jonathan) on CodePen

 

You basically target each element and apply a different GSAP animation method like to(), staggerTo(), from(), staggerFrom(), fromTo() , staggerFromTo() ... etc

 

:)

  • Like 1
Link to comment
Share on other sites

Haha you make it look so easy!

 

Thanks!

 

P.S.: a typo in the style-class, I was rushing it :P

Link to comment
Share on other sites

  • 9 months later...

Hello i have the same question but little difference .

 

 

<div class="colored-rectangle">
  <p>My Content</p>
</div>
 
Actually i want to rotate parent div  ( <div class="colored-rectangle"></div> ) and fixed the child div ( <p>My Content</p> ) .

 

Is it possible ? If possible please help me out 

 

Thanks in Advance 

Link to comment
Share on other sites

You could rotate the paragraph in the reverse direction, but I think it would be easier to just correct the markup rather than trying to counteract the parent-child relationship e.g..

<div>
  <div class="colored-rectangle"></div>
  <p>My Content</p>
</div>
  • Like 3
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.
×