timelinemax Need help figuring out TimelineMax properties?

[AbhishekSock]

This question is in reference to a previous question  I've asked here on the forum.

I wanted to achieve the similar transition effect as shown in SCABAL and thanks to the suggestion of @Carl , I was able to achieve the same effect with help from TimelineMax. However, I believe the method I used isn't very responsive friendly. Becuase in order to achieve the similar effect as shown in scabal.com, I tried doing it with TimelineMax(

See the Pen RxPVMy?editors=0110 by abh19021 (@abh19021) on CodePen

) and used relative and absolute positioning which completely messed up my mobile responsiveness.

 

To counter this, I have used CSS grid and made a layout which is responsive(

See the Pen qpdjZY?editors=1100 by abh19021 (@abh19021) on CodePen

) but I am not able to achieve the same effect using TimelineMax(with CSS Grid) and I can't / don't want to use relative and absolute position in this case.

 

I believe, if I use from( ) and bring the panels to the default state, I will have the effect I am looking for.

 

TLDR: How can I achieve the same effect(as shown in Scabal when you scroll down) only by using from( ) and set( ) method? I've tried but I couldn't get it right.

 

Thank you so much for your time. Help is really appreciated. This is bugging me for quite some time now.

See the Pen by abh19021 (@abh19021) on CodePen

Edited December 14, 2017 by AbhishekSock
Fixed some grammatical errors.

[Jonathan]

Hello @AbhishekSock and welcome to the GreenSock Forum!

 

When using GSAP for responsive animations its best to use the special properties xPercent and yPercent.

 

Find out more here:

 

https://greensock.com/gsap-1-13-1

 

And here in the CSSPlugin Docs:

 

https://greensock.com/docs/Plugins/CSSPlugin

 

Notes about transforms

1. To do percentage-based translation use xPercent and yPercent (added in version 1.13.0) instead of x or y which are typically px-based. Why does GSAP have special properties just for percentage-based translation? Because it allows you to COMBINE them to accomplish useful tasks, like perhaps you want to build your own "world" where everything has its origin in the very center of the world and then you move things in a px-based fashion from there - you could set xPercent and yPercent to -50 and position:"absolute" so that everything starts with their centers in the same spot, and then use x and y to move them from there. If you set x or y to a percent-based value like 50%", GSAP will recognize that and funnel that value to xPercent or yPercent appropriately as a convenience. Our 1.13.1 Release Notes have some great demos showing how xPercent and yPercent can help with responsive layouts.

 

See the Pen rAetx by GreenSock (@GreenSock) on CodePen

 

You want to stay away from animating CSS properties like top, right, bottom, and left. Since those CSS position offset properties will not animate smooth and cause layout to be calculated on every render tick.

 

Happy Tweening

[AbhishekSock]

Thank you so much for the very detailed information. I have looked into it and replaced certain things and it is working fine. 

What do you suggest for height and width though? I have tried scaleX and ScaleY but since my images are the background of my DIVs, they come out very stretched and looks very ugly.  I want a panel to change from full-width and full-height to 50% width and height will be the same. 

[Sahil]

I would first setup my layout using CSS only and make sure it is responsive. After that you can animate those blocks into their places using from tweens. Easier approach would be to use className to animate everything and keep it responsive.

 

Another approach would be to use responsive tweens which will give you better performance. Following thread will give you some ideas about how to approach it.

 

1. You can use modifiers plugin if you are just animating 1 or 2 properties, otherwise it will get too complex. Though in those examples we are using tween.progress(), use tween.ratio instead which gives you ability to use easing effects.

2. You can use tween directly and track their progress on resize so you don't see any jumps. It is more useful when you are animating more than 2 properties, it will keep your code simple. Also note Blake's reply at the end which will keep your performance better.

 

 

Following is another example by Blake that shows how you can use media queries in JavaScript.

 

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

 

[AbhishekSock]

Sahil Ji, thank you for your response.

I have tried the first method you have mentioned by making the entire scene responsive(used CSS grid for that) and then tried using only "from"  by calling classes as elements. But I don't get the desired results, please have a look below:-

See the Pen qpdjZY?editors=1010 by abh19021 (@abh19021) on CodePen

The result I am looking for is this - > https://codepen.io/abh19021/pen/RxPVMy (also made by me by using "to" but isn't responsive).

 

Please note that I will be disabling GSAP on mobile devices. I want the results by only using "from".

[Sahil]

That's the thing about from tweens, I have come across such scenario as well. When I first discovered GSAP I was super excited about using from tweens everywhere but, when you use from tween, the end position is calculated and the resulting values are set as inline style to the element. So to solve this you can use clearProps and pass any properties you want to clear once animation completes. Notice that I am using wild card 'all' which will remove all the inline styles so be careful when you choose to do so, you can also clear individual property by using comma separated string.

 

As for second panel's width going all the way to zero, I am not sure if CSS grid is supported by GSAP. I never used css grid either, so @GreenSock or @Jonathan can explain what is going on here.

 

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

 

[OSUblake]

Hi @AbhishekSock

 

The secret to making responsive animations is to stop trying to make them responsive. It's very hard to do, and requires careful programming.

 

So stop worrying about the responsive part. There are plenty of ways to deal with a change in screen size, like rebuilding your animation.

 

 

Using FLIP animations

 

 

 

Or change the positioning before and after an animation. This demo uses Draggable, but it's the same concept you could use for an animation. Once you start dragging a splitter pane, it converts its position to absolute, and when you stop dragging, it converts its position to relative/responsive units.

 

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

 

 

[AbhishekSock]

Thank you so much @Sahil and @OSUblake . You people just saved my job. The whole idea of letting the responsive design go really helped me to make the website responsive  and all I did was just rearrange certain things and animation. Thanks again.