Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Catalin R.

Timeline on resize

Recommended Posts

Hi,

I have a big problem on every project when I resize the window. What should I do with each timeline or tween on resize? I need to have the same effect.

And I need an advice, how to make (see my topic) on scroll, to have for horizontal lines the same position, relative to those titles?

Thanks!

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

Link to comment
Share on other sites

Hey Catalin. What's the end goal? You mention resize and something about scrolling but I'm not understanding what you're trying to accomplish. Can you please try to clearly state what you're trying to do and what's going wrong?

  • Like 1
Link to comment
Share on other sites

Hi Zach,

I have two goals. First, when I resize the browser (responsive part) I need to have the same position for each element set with GSAP timeline.

And second, on scroll I need to have those two horizontal lines (line-01 and line-02) in the same position, near Title 02 respectively Title 01.

Let me know if I was clear about these goals.

Thanks!

Link to comment
Share on other sites

To run the same thing on resize just put your code into a function and call that function on resize. Is that all you're wanting? 

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

 

I still don't understand what you're saying about the behavior on scroll. Does the above demo do all that you're wanting?

Link to comment
Share on other sites

Hi,

This resize doesn't work properly, I don't get the same position for each element animated with that timeline. I've tried many times to make the code fore resize but without success, for that I'm here on GSAP forum.

And, I have two long horizontal lines with classes "line-01" respectively "line-02". After animation (from top: 100%) they have new position. I need the same position (relatively to those titles) to be kept on scroll.

 

Link to comment
Share on other sites

On scroll I have different position for those long lines. I want them near those titles all time on scroll.

1.png

2.png

Link to comment
Share on other sites

3 minutes ago, Catalin R. said:

I have two long horizontal lines with classes "line-01" respectively "line-02". After animation (from top: 100%) they have new position. I need the same position (relatively to those titles) to be kept on scroll.

Why not just position them as a child of the widget? That would make your calculations and keeping them in sync on scroll wayyy easier.

 

Unfortunately we don't have the capacity to fix your calculations and such for you. If you have a specific question about GSAP we're happy to help :) 

Link to comment
Share on other sites

Hi Zach,

It's a simple timeline where I use some variables. Those variables a changing their values when the browser is resized. A quite simple timeline GSAP cannot be made to work for all devices? Your function doesn't work for resize.

 

Link to comment
Share on other sites

2 minutes ago, Catalin R. said:

GSAP cannot be made to work for all devices?

GSAP works great for all devices! The issue is a logical one with your resize code. Like I said, we unfortunately don't have the resources to help debug every issue that people post that's logical and unrelated to GSAP like this one. If you need additional help it might make sense to hire someone to help you with your logic. The jobs and freelance forum here might be a good way to find someone.

 

2 minutes ago, Catalin R. said:

Your function doesn't work for resize.

All I did was put your code into a function.

Link to comment
Share on other sites

Hi Zach,

 

Is GSAP working only for quite simple animation? like this: 

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

 ?

This example show me that GSAP has methods to make timeline works on resize.

Can you advice me how to use properly 4 variables into a timeline?

Thanks!

Link to comment
Share on other sites

7 minutes ago, Catalin R. said:

This example show me that GSAP has methods to make timeline works on resize.

All that does on resize is 1) kill off the previous animation and 2) recreate it. The animation itself uses responsive units that are dependent on the new screen size to it works with different sizes.

 

7 minutes ago, Catalin R. said:

Can you advice me how to use properly 4 variables into a timeline?

That's quite an abstract question. I can show you lots of ways to use 4 variables in a timeline but that won't be very helpful.

 

Why don't you try putting the lines inside of the widgets like I said before? Then rewrite the code inside of the setupLines function to work with the new position of the lines. Then try resizing it and see how it goes wrong (if it goes wrong). If you still can't figure it out, post here and I'll try to help.

  • Like 1
Link to comment
Share on other sites

Hi Zach,

I can't put those two long horizontal lines inside of the widgets. They are visible on other sections too, into a big project. The point is: they are always visible and changing their position. And, it's not about those two lines only, all elements are not in the right position on resize. How can I use properly 4 variables into a timeline?

Thanks Zach! I hope you are not angry on me! Hope so!

Link to comment
Share on other sites

Hey Catalin. I'm not angry. I just 1) don't understand the end goal still and 2) don't have the availability to fix logical issues in your project for free. As I mentioned above I recommend hiring someone to do this. The Jobs and Freelance forum is one place where you could find someone to help you.

Link to comment
Share on other sites

I have some lines of code, actually a timeline with 5 tweens. I don't know how to make a timeline GSAP to work on resize! Should I kill, pause, restart or anything else from great GSAP methods? It's about a simple timeline.

Thnaks!

Link to comment
Share on other sites

2 minutes ago, Catalin R. said:

I don't know how to make a timeline GSAP to work on resize! Should I kill, pause, restart or anything else from great GSAP methods?

In general it's best to kill off the previous animation and recreate it on resize. 

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