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

  • 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

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