Jump to content
GreenSock

markhomoki

Nested Tween Animation onUpdate Issue

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

Hi All, 

 

I started using GSAP couple of months back, but this animation seems to be a bit difficult to me, I hope some one has any idea with the following one.

 

I would like the code a gallery animation, but I have some issues with the onUpdate function. 

 

First of all all items starts with the same height which set in css, then on click all goes bigger and the clicked one goes to the center, the previous one to the left, and next one to the right. ( and if you click on the selected one again then it zoomed back to the initial position )

 

The only way I could make this work is to use onUpdate ( setItemPosition ) and loop through the items and set left position for each one, which is unnecessary, I guess, but I don't know any better solution right now.

 

Then I wanted to add content to item which comes in once the animation finished, then when you click on the next item, the content disappears then go to next item then its content comes in, but because the main animation and the left position works onUpdate it just delays and breaks the tween. 

 

So the item content doesn't disappear on transitioning between items. And the zoomed in and out animation seems delayed and broken. When you click on an item it should move and grow at the same time. At the moment move then grow.

 

Thank you.

See the Pen qbObXV by markhomoki (@markhomoki) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Thanks for the demo and description of the problem. It's possible that one of our community members may have solved a similar issue in the past or sees this as a fun challenge.  

 

However, it would take quite some time to dissect your js, html, and css code to figure out how to fix what you have. My guess is that the issue is focused on logic in your JavaScript and the way the CSS and HTML you are using control the flow of your document. Our official support has to stay focused on how the GSAP API works. For problems like this there really isn't an easy answer or singular feature of GSAP that will fix this. 

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