Jump to content
GreenSock

heavylifting

Is it posible to have 2 different easing types on parent and child elements

Recommended Posts

Hi,

 

In the codepn below the titles are the parent and the spans (the child inside the h1 are) the orange blocks. As well as fading in, I'm also trying to get the text to slide in a wee bit rather than just apear, or bounce in along with the orange block, is it possible to have two animation one fo the parane one for the child? 

Thanks

See the Pen LYQJwKQ by heavymessing (@heavymessing) on CodePen

Link to comment
Share on other sites

I'm not sure I understand the full question, but yes, you can have animations on parents of animated elements.

Link to comment
Share on other sites

Posted (edited)

But can you have two different animations on the parent and child? In this case there is a bounce animation on the H1 and within the H1 are the span tags, how can I get an ease in animation on the span tag/s and not have them bounce in at the same time?

Edited by heavylifting
spelling, I have dyslexia.
Link to comment
Share on other sites

I've updated your pen and now the text spins at the same time the box is coming in. This is done with the position parameter  add `tl.from(...,{}, "<") to a tween will make it start at the same time as the previous tween. If you replace "<" with 0 it will start at the beginning of the timeline (which will be the same as "<" in this case)

 

See the Pen WNzbVOd?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks,

I have added the parameter and the moved the span (or tried to) but it still inherit the bounce from the h1? I'd rather it didn't have any bounce and just slid in a bit and went from 0 opacity to 1

See the Pen LYQJwKQ by heavymessing (@heavymessing) on CodePen

Link to comment
Share on other sites

Ah, I see what you mean now. Yeah you're animating an element so everything in that element will animate. You could calculate how to animated the inner span so that it would move the opposite way with the parent so that it would look like it is standing still, but why not disconnect the two elements and let them both be children from a parent? Seems like an easy fix. 

 

Or you could position the span element absolutely so that it disconnects from the parent, but that again seems like a lot more hassle then just fixing the HTML logic so that you don't have to do anything complicated. 

  • Like 1
Link to comment
Share on other sites

If they are both children from a parent then would they both not inherit the bounce?

Link to comment
Share on other sites

Not if you put the bounce on the element you want to bounce (the child) and have an other effect on the other child. Just don't put an effect on an element on which you not want the children to inherit their traits, that is just how the parent/child relationship works.

  • Like 1
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.
×