Horizontal scrolling with pinned line animation

[Canvas Reply]

Hello everyone, I hope you're doing well.
 

I'm seeking immediate assistance with a topic concerning horizontal scrolling.
 

Initially, I have an image that needs to be zoomed (scaled) from the center to the top, and then further zoomed into the center (the zooming functionality is currently working fine). Following that, I need to implement a horizontal scroll to the right.
 

When the left edge of the text card reaches the center of the viewport, it should reveal a line (desktop-line-animation) towards the image, which is positioned halfway on the left side. The scrolling should be pinned while extending and reducing the line. Once the line is completely revealed, scrolling should continue, and the text needs to change to new content until the video comes fully into view, at which point the scrolling ends.

I've been using stops, but currently, everything occurs after the image has finished zooming and before scrolling starts, resulting in a significant delay. Any suggestions or improvements to optimize this process would be greatly appreciated.

I'll attach a desing and  to show you how it should look like:

See the Pen YzggJjP by armandohyssii (@armandohyssii) on CodePen

[mvaneijgen]

Hi @Canvas Reply welcome to the forum and thanks for being a club member! 

 

I would make it simple, just create one timeline with all your animations on that timeline, then hook one ScrollTrigger to that timeline and have it control the whole duration of the timeline over the total scroll distance you've set. Below one timeline called tl and one ScrollTrigger to control that timeline.

 

Also while developing the animation I would disable ScrollTrigger and just watch the animation and tweak what it is doing on not scrolling. A great tool for debugging it is GSDevTools, now add to your demo.

 

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

 

Some side notes:

If you need some more fine control in your animation you still can, you just have to rethink your approach. Normally in GSAP things work with durations, but when working with ScrollTrigger these durations get converted to distance. It might be hard to wrap your head around, but maybe this example helps. 

 

Let's say we have four tweens that all take 1 second to animate and the total ScrollTrigger distance is 400px each tween will then take up 100px. If we remove one tween and make the last tween take 2 seconds the first two tweens will take still 100px, but the last tween will get stretched over the remaining 200px.

 

Sometimes you also want to do nothing for a bit, to ephesize a point in the animation, what I than like to do is create an empty tween that does nothing for x amount of seconds eg:  tl.add(() => {}, "+=1"); add this to the timeline at the point you want to do nothing 

 

And instead of end: `${totalWidth}px`, you can also do end: () =>  `${window.innerHeight  * 5}px top` to set the scroll distance to x amount the height of the browser and tweak that value what feels nice on most device sizes. 

 

Hope it helps and happy tweening! 

[Canvas Reply]

39 minutes ago, mvaneijgen said:

See the Pen gOEEZvE by armandohyssii (@armandohyssii) on CodePen

Hi mvaneijgen, thank you for your reply!
I changed end to `${window.innerHeight  * 5}px top` .
 

In this specific case, if I use just one ScrollTrigger, how can I initiate the zooming from the center of the screen to the top? I'm relatively new to GSAP, so apologies for any uncertainty.
 

Additionally, as you can see I'm facing significant delays after the zooming action. How can I eliminate these delays? Furthermore, could you guide me on how to insert a stop in the middle of the screen to reveal the line?

Maybe it's not so clear I can attach also a short video on how it should be.
 

[mvaneijgen]

Yeah that is why I've removed ScrollTrigger and add GSDevTools, so you can focus on the animation at frist and don't worry about ScrollTrigger. 

 

Check it out, I've removed everything you had and just one by one add the tween you want to happen. I've add some comments to the set up to better explain things 

 

See the Pen PoLLXVM?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

I've written a guide how I go about creating animation, it is not a step by step guide, but more a philosophy how I like to start a project, maybe it helps. I would start by first laying out all your elements with CSS and then add the animation you want to happen and only if that is truly how you want it add ScrollTrigger to see how it would work on scroll. 

 

 

[Canvas Reply]

I understand, and incorporating short delays between tweens does enhance clarity.

Hopefully i have a last question, revealing of the line should happen in the middle of last tween(horizontal scroll) - that's why i used "stops" previously - to stop in the middle of horizontal scroll.

To clarify, the horizontal tween has commenced, and at this point when the left of text card reaches middle of viewport, I need to draw the SVG line. Currently, the line is being drawn at the beginning, before the horizontal scrolling takes place.

And like it is now it has also a big white space in the end, after the video. Probably the end is not calculated properly

New edit: Also horizontal scroll animation goes too fast

[mvaneijgen]

Yeah I would restructure your layout so that you can easily do this. Right now you moved the whole container its width over the whole screen, but I would instead position all your elements on top of each other, something like this 

 

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

 

And move the elements in view when you need them, then it will be also much simpler to have certain things happen at the same time. Hope it helps and happy tweening! 

 

See the Pen jOJJJzX?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[Canvas Reply]

Thank you @mvaneijgen, it helped a lot.