Jump to content
Search Community

Animating a div parent (exclusive of child)

Secretmapper 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 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>

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

  • 9 months later...

Hello i have the same question but little difference .



<div class="colored-rectangle">
  <p>My Content</p>
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

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...