GSAP scrolltrigger pin child for fake horizontal scroll

[mustafag]

Hello,

 

I am new to gsap, I have been trying to find solution for following situation but some how after all the tries i didn't manage to find the solution.

 

As you can see the codepen demo i am trying to zoom the image in last section of H1-4. Its working well, the problem here is if we increase the number of horizontal section then the zoom duration keeps increasing and start and end for the child animation (Here h1 tag animated) is getting messed up.

 

I tried creating another trigger for the image and tried to pin it but it adds extra spacing in the end of first horizontal scroll.

 

I didn't managed to find any example with this situation.  

 

See the Pen YzZYvbX by gulam-mustafa (@gulam-mustafa) on CodePen

[mustafag]

.

[Cassie]

Hi there - Just clarifying - are you saying you want to have more than one horizontal scrolling section?

So it would scroll horizontally, then vertically, then horizontally again?

[mustafag]

1 hour ago, Cassie said:

Hi there - Just clarifying - are you saying you want to have more than one horizontal scrolling section?

So it would scroll horizontally, then vertically, then horizontally again?

Thanks for the quick reply

Sorry for the confusion, scrolling is not a problem. Its about image zooming at the end of the first horizontal scroll in the H1-4 section.
 

Its working well the only problem if the number of section increased in first horizontal scroll ref: 

See the Pen jOBYdxw by gulam-mustafa (@gulam-mustafa) on CodePen

 (sorry don't know how to embed codepen in reply) scroll duration of image keeps increasing and start and end behaves for the child (H1 in html) animations un expected as all is calculations gives different result.

 

What i want to achieve is when the first horizontal scroll end the image inside last section will zoom and fadeout with in desired time and then vertical scroll will start, but here zoom time increase if number of section increase and other animations start end position calculation changes.

 

Have tried another way by adding another timeline and scrollTrigger  ref: 

See the Pen BaWJMep by gulam-mustafa (@gulam-mustafa) on CodePen

but it didn't worked, don't know whats going wrong.

 

 

 

[Cassie]

There are lots of ways to approach this and it is a complex one. However the issue with the image taking longer to size up when there are more sections comes down to scrubbing and how distance = time when. you're scrubbing.

If the x movement takes 1 second and the image scale takes 0.5 seconds, when you scrub the image scale will take half the 'time' or scrub distance that the x movement takes.

You can get around this - albeit in a bit of a hacky way by making the distance value relative to the number of sections.

e.g.
 

let sections = document.querySelectorAll(".hrz-container.hrz1 h1");
let noOfSections = sections.length;
let relativeTime = sections.length/400;

See the Pen f92c74686f85a610771c29331078edd7?editors=1010 by cassie-codes (@cassie-codes) on CodePen

----

I also just realised this is a duplicate of this previous post. I thought it looked familiar! As we mentioned, we do offer consulting services if you're really stuck!
 

 

[mustafag]

1 hour ago, Cassie said:

There are lots of ways to approach this and it is a complex one. However the issue with the image taking longer to size up when there are more sections comes down to scrubbing and how distance = time when. you're scrubbing.

If the x movement takes 1 second and the image scale takes 0.5 seconds, when you scrub the image scale will take half the 'time' or scrub distance that the x movement takes.

You can get around this - albeit in a bit of a hacky way by making the distance value relative to the number of sections.

e.g.
 

let sections = document.querySelectorAll(".hrz-container.hrz1 h1");
let noOfSections = sections.length;
let relativeTime = sections.length/400;

 

 

 

----

I also just realised this is a duplicate of this previous post. I thought it looked familiar! As we mentioned, we do offer consulting services if you're really stuck!
 

 

 

 

 

Thank you for the sugession.

I do want consulting but the charges are very high. I have very limited budget for this work.

Not sure how i will be charged for some quick fixes i want to do. 

[mustafag]

On 6/2/2021 at 5:01 PM, Cassie said:

There are lots of ways to approach this and it is a complex one. However the issue with the image taking longer to size up when there are more sections comes down to scrubbing and how distance = time when. you're scrubbing.

If the x movement takes 1 second and the image scale takes 0.5 seconds, when you scrub the image scale will take half the 'time' or scrub distance that the x movement takes.

You can get around this - albeit in a bit of a hacky way by making the distance value relative to the number of sections.

e.g.
 

let sections = document.querySelectorAll(".hrz-container.hrz1 h1");
let noOfSections = sections.length;
let relativeTime = sections.length/400;

 

 

 

----

I also just realised this is a duplicate of this previous post. I thought it looked familiar! As we mentioned, we do offer consulting services if you're really stuck!
 

 

 

 

 

Thank you for your help.

It is not duplicate the only common thing here is the codepen sample, i posted a seperate question there. Intension was not to confuse.

 

Have notice one strange if i adding the zoom image thing at the end, it changes the start and end position for all h1 animations. This is the last thing i am stuck with please help me on this

 

[akapowl]

1 hour ago, mustafag said:

Have notice one strange if i adding the zoom image thing at the end, it changes the start and end position for all h1 animations.

 

Since you are adding tweens to the timeline that contains the fake-horizontal-scroll tween, that is to be expected because the amount to scroll for that fake-horizontal scroll tween containing timeline and the amount those sections get translated to the left in the animation won't be the same anymore - they will not be in sync anymore so to say. 

 

So if you'd want to keep things like you have, you will have to also compensate for that 'offset' you are creating and incorporate that in your start/end calculations for the headlines-ScrollTriggers. Or even better; you create an individual ScrollTrigger for the image-scaling from the start so you will not have to worry about the offset when it comes to the headlines. Then you'd have to get the timing right for that individual ScrollTrigger though.

 

Either way things are more complex/complicated than you might think - I did something similar to what you are trying to do and it took me several hours to get things totally 100% straight.

[mustafag]

57 minutes ago, akapowl said:

 

Since you are adding tweens to the timeline that contains the fake-horizontal-scroll tween, that is to be expected because the amount to scroll for that fake-horizontal scroll tween containing timeline and the amount those sections get translated to the left in the animation won't be the same anymore - they will not be in sync anymore so to say. 

 

So if you'd want to keep things like you have, you will have to also compensate for that 'offset' you are creating and incorporate that in your start/end calculations for the headlines-ScrollTriggers. Or even better; you create an individual ScrollTrigger for the image-scaling from the start so you will not have to worry about the offset when it comes to the headlines. Then you'd have to get the timing right for that individual ScrollTrigger though.

 

Either way things are more complex/complicated than you might think - I did something similar to what you are trying to do and it took me several hours to get things totally 100% straight.

Thanks appriciate your help.