Jump to content
Search Community

Tween items on tweened parent item.

mrEmpty test
Moderator Tag

Recommended Posts

Hello.

 

Not sure how to describe the scenario so I'll simplify it. Imagine you have the Greensock panel flick example on the throw props page. Basically a large movie clip with panels inside it which moves left and right. I have something similar. My panels are comprised of complex pages with images and text panels etc. I've been asked late on on the project to add an offset to how the items move in, but as they are all on a large clips which moves, the only way I can think of doing it is to tween each item in the opposite direction to the master MC, then tween back into place, cause the delay effect.

 

Here's an image.

 

tweens.jpg

 

The pink bit is the main page that itself moves, it's the parent of the cream parts inside. I need to tween these so number 1 comes in, then 2 etc etc.

 

Any ideas on a clean way to do this as currently I have a very complex timeline animation pushing the items +x then back to the origin so they pause, then snap into place. It's becoming a bit like spaghetti.

 

I can share code if it helps.

 

Thanks.

Link to comment
Share on other sites

It sounds like you're pretty familiar with how to set up the animations of the child elements - what exactly is the problem that's causing the headaches for you - is it sensing when that particular panel is in view so that you can start the animation?

 

If ALL of the animation is supposed to be perfectly mapped to the parent's scroll position (left-to-right), such that the children would animate on/off/on/off if you dragged the parent left/right/left/right and would pause partway through their animation if you stopped your drag, then you could even create a TimelineLite instance that animates EVERYTHING including the parent's movement from left to right, as though someone had dragged the parent from left to right (or other way around) over its entire range at a steady, linear pace. Then you could simply map the parent's position to the TimelineLite's time() and you're done. I'm not sure if that's the effect you wanted, though, so this might be a useless suggestion.

 

Again, I'm not entirely sure what effect you're after here so let me know if any of this helped.

Link to comment
Share on other sites

Hello.

 

Thanks for replying. My headache is that the parent moves into view, say in 1 second. I need to delay the other items moving in by say, 0.25, 0.5 etc etc seconds. How I'm doing this now is when the master moves to the left I call a public function in the class that builds each page, this function moves the items in the opposite direction to the master for n seconds, then moves them back to x:0 in n seconds, which gives the delayed effect. It seems like a messy way to do it and it's taking hours of tweaking to get anywhere endear looking good.

 

I'd not normally have the master parent configuration like this for this type of animation, but it was required for other stuff going on in the app.

 

That code looks like this:

 

slideInLeft.insert(new TweenMax(contentBox, 0.1, {x:contentBox.x + 100}));
   slideInLeft.insert(new TweenMax(contentBox, contentTime, {x:contentBox.x, delay:0.1, ease:Cubic.easeOut}));

 

This is for if the main parent moves left, it delays the contentBox moving in by tweening it right, then left. It's a hack.

Link to comment
Share on other sites

I *think* I understand what you're saying but I'm not quite clear on how you'd like us to help. What is it that's taking you hours to tweak? If I understood correctly, it's basically a matter of calling a method that fires off a TimelineLite that animates the child objects into place. Where is the pain point? Is it a timing issue? Is it that you're wanting to know how to nest that animation into a parent TimelineLite or something? Is it figuring out how to animate the child elements in a staggered fashion? (hint: allTo() in v11 or the staggerTo() in v12 might be useful)

Link to comment
Share on other sites

I guess the headache is one I need to deal with, I'm not sure what I'm asking. I am gong to look into a custom ease which can handle the backwards then forwards motion in one tween. The problem I see with that is I'm tweening from x:0 to x:0 :)

Link to comment
Share on other sites

Nah, still no good.

 

OK, if you have a parent that is moving 1280 pixels over 0.7 seconds but you want to delay the movement of it's children by 0.35 seconds, how would you do it?

 

At the moment I'm moving the child in the opposite direction by 640 pixels then tweening it back to 0. But this results in some freaky animation, even when using the same easing types.

Link to comment
Share on other sites

Oh, now I see the conundrum. Yuck. Yeah, that's a pretty awkward setup. And you MUST have things in that hierarchy? Well, I suppose what I'd do is put an onUpdate on the parent's tween that calls a function that checks the parent's position and moves the children accordingly. Like record the parent's starting position, and then if it moved 23 pixels (for example) on the first update, you'd shift all the children -23 pixels. Actually, you'd probably need to take the parent's transforms into account (scale/rotation), so that'd take some math but hopefully you get the idea. That would guarantee that things stay locked into place visually. And then when whatever delay has expired, you fire off your child tweens (and stop doing the onUpdate code). Just one idea.

Link to comment
Share on other sites

Hello.

 

Sadly the hierarchy is set, I can't change it, it's all to do with a very complex set of gesture controls which are required. Your solution is what I'm testing now, so I'm glad I'm on the right path. I'll keep at it, I have a week left. :)

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