Jump to content
Search Community

Onresize - Gsap translate problem

M90 test
Moderator Tag

Go to solution Solved by OSUblake,

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

Hello !

 

I've been trying to resolve my problem by reading other topics linked to gsap / on.resize issues but i didnt found any proper answer.

  

When I open the menu, the logo is working correctly and set it's position to center of the screen { y:0 } . However, once the menu is closed i cant manage to force the logo back to it's original position { y:-logoPosition +20 }. The values are not updating on "menuclosing state". 

 

I must be messing with var updates but i'm clueless to make this work.

 

Hope someone can help me !

 

Thanks in advance :)

See the Pen EZQaKL by martin_avisseau (@martin_avisseau) on CodePen

Link to comment
Share on other sites

Hi M90 :)

 

Welcome to the GreenSock forum.

 

If I understand your question correctly, I think you'll have to kill() the timeline and recreate it after a window resize event.

 

Here's a thread discussing that very technique I think can help you:

 

https://greensock.com/forums/topic/15758-destroy-current-timeline-initiate-new-one-on-window-resize/

 

Hopefully that helps.

 

Happy tweening. 

:)

  • Like 1
Link to comment
Share on other sites

Thank you very much for taking time to answer me PointC !

 

I'am a Gsap noob and I learned a lot from this topic. I now understand that I must kill or invalidate my timeline before updating vars.

I still have difficulties to make this work on reverse but i'll try different options.

Link to comment
Share on other sites

  • Solution

Did you look at the link @Dipscom posted? There's a lot of really useful tips being used in there.

https://greensock.com/forums/topic/15214-animating-object-to-center-of-window-scale-based-on-window-size-percentage/

 

You really don't need to invalidate your timeline. And it's probably best to return your timeline to it's starting state before clearing it.

// Couple different ways you could that
tl.seek(0).clear();
tl.progress(0).clear();
tl.pause(0).clear();

But before you do that, you should record some values so you can return your timeline to its current state after rebuilding it.

 

What to save is going to depend on what your timeline does. In this example the timeline repeats, so I save the totalProgress instead of progress as that won't return it to its proper progress if the animation is in a it's yoyo repeat.

See the Pen 41012e2812f501cca2d5c1298a74e2e6?editors=0010 by osublake (@osublake) on CodePen

 

And here's a demo from the thread I mentioned above. In this case the timeline can be reversed, so I save it's reversed state along with the progress.

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

 

If you're having trouble with reverse, that might be the key.

 

.

  • Like 2
Link to comment
Share on other sites

Wow ! This exactly what I needed ! I'm glad I came back to check the forum. I guess I suck with theory and I need to play with the code to understand it well. Dispcom thread has it all. Thank you very much for this detailed reply OSUblake !

 

I just coded an example to be sure I wont forget.

 

See the Pen xgzpQP by m_90 (@m_90) on CodePen

 

Thanks again !

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