ScrollTrigger - Horizontal scroller and image scaling

[Simon.Gioffredi]

Hello,
 

I am trying to set up a horizontally scrollable section that pinches. In this section, there are images that appear with a scale of 0.75 and that must be at a scale of 1 in the middle of the page.
 

The pin and the horizontal scroll are well set up and working, but I can't finish the animation of the images at the exact center of the page.
 

I made a simplified Codepen, with my divs and images. The black bar represents the center of the page and the blue bars the center of the images.
 

What I would like to achieve is that when the blue and black bars overlap, then the end bars of the ScrollTrigger also cross.

 

I don't understand what the problem is.

 

Does anyone have an idea? See a solution?

 

Thank you, 
Simon

See the Pen zYmKRPE by simon-gioffredi (@simon-gioffredi) on CodePen

[akapowl]

Hello there, Simon.

 

containerAnimation is very likely the feature you are looking for. It is built to make what (from my understanding) you are trying to achieve a whole lot easier. Give it a shot and let us know if you run into any issues along the way.

 

This right here is from the ScrollTrigger docs:

 

containerAnimation

Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a  See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen  and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger.

[Simon.Gioffredi]

Hi @akapowl, thanks for your answer

 

I am aware of containerAnimation but in my mind, it is not so simple to set up.

 

My horizontal scroll is set up on my section which contains 11 items that should animate as they appear.

 

If I want to do this with the AnimationContainer, I have to get the percentage of progress of the Horizontal Scroll and then do several calculations to animate the image according to the right section that is displayed.

 

But maybe I didn't understand how it works, I'll try to set it up again.

[akapowl]

35 minutes ago, Simon.Gioffredi said:

My horizontal scroll is set up on my section which contains 11 items that should animate as they appear.

 

That is exactly what containerAnimation is built for.

 

If after seeing the example I added below, you're still interested in getting this done without containerAnimation at any cost, here's an older post of mine, explaining the issue you are facing, and how to handle it.

 

 

 

 

35 minutes ago, Simon.Gioffredi said:

If I want to do this with the AnimationContainer, I have to get the percentage of progress of the Horizontal Scroll and then do several calculations to animate the image according to the right section that is displayed.

 

But maybe I didn't understand how it works, I'll try to set it up again.

 

Yeah, I think you might be overcomplicating things a bit - it's actually quite a bit easier than you might think.

 

Here's how I would set it up with containerAnimation - that looks a decent bit less complex than what you had before; and it works.

 

You'd just need to adjust the start and end of the individual ScrollTriggers to your liking. And one more change I would suggest making, is not animating the element that you are using as the trigger-element; that is bound to cause issues. Instead you could/should probably wrap that element and use that wrapping element as the trigger.

 

I hope this will help, though.

 

See the Pen WNaGzZE by akapowl (@akapowl) on CodePen

 

[Simon.Gioffredi]

I will continue to work with containerAnimation. It allows me to do one less ScrollTrigger, so I have a bit more performance.

 

I just realized that I have a problem on my real project with ScrollTrigger, since it does not take into consideration right and left. It uses it as up and down.

 

I'll see if I can fix that, but that's why I couldn't do what I wanted.

 

Thank you very much for your example, it's exactly what I was looking for. 

[Simon.Gioffredi]

@akapowl

After several tests, I wonder if the problem would not come from the gsap-bonus.tgz.

 

I develop on a Nuxt, so I use the package NPM gsap installed with the gsap-bonus.tgz.

 

When I use this package, the ScrollTrigger start: 'left' does not work. It's exactly like if I do a start: 'top'.

 

But if I remove this package, install gsap classically with npm and add the ScrollTrigger link that we use in CodePen, then everything works fine.

 

In both cases, the version of Gsap is the same, i.e. 3.11.5.

I don't know how I can get the ScrollTrigger version to check that it's the same in both cases.

 

I'll keep investigating, but can you check on your side that everything is ok on this level?

Edited April 19, 2023 by Simon.Gioffredi
Wordings

[akapowl]

20 minutes ago, Simon.Gioffredi said:

I'll keep investigating, but can you check on your side that everything is ok on this level?

 

Sorry, but I don't have the time to create a Nuxt project right now for testing this; if you need any assistance, please provide a minimal demo. If you're using something like Nuxt, you could use StackBlitz for example.

 

There is a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

 

 

58 minutes ago, Simon.Gioffredi said:

I just realized that I have a problem on my real project with ScrollTrigger, since it does not take into consideration right and left. It uses it as up and down.

 

Which version are you speaking of; my code using the containerAnimation feature or your code from the initial example?

 

Because if it is your initial code example you are referring to, that won't work by simply just setting the start to using 'left somewhere' as its value. 

 

20 minutes ago, Simon.Gioffredi said:

start: 'left'

 

Using singular parameters like that is invalid, btw - ScrollTrigger's start and end always need two parameters in their string-syntax; one for the trigger-element and one for the viewport.

 

Also,left and right will only fulfill their purpose in either native-horizontal scrolling with horizontal: true set on the ScrollTrigger or in ScrollTriggers with the containerAnimation property set. 

 

So I'm rather confused - and I can't be much more helpful than that without a minimal demo of some sorts.

 

[Simon.Gioffredi]

Hello @akapowl,

 

21 hours ago, akapowl said:

Sorry, but I don't have the time to create a Nuxt project right now for testing this; if you need any assistance, please provide a minimal demo. If you're using something like Nuxt, you could use StackBlitz for example.

 

There is a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

I can't test it with Stackblitz because I need to pay and that's not possible actually. I'm gonna try to install gsap without gsap-bonus.tgz

 

21 hours ago, akapowl said:

Which version are you speaking of; my code using the containerAnimation feature or your code from the initial example?

 

Because if it is your initial code example you are referring to, that won't work by simply just setting the start to using 'left somewhere' as its value. 

If I copy/paste your CodePen into my project, that's not working, but only if I install gsap with gsap-bonus.tgz.

If I do a classic installation of gsap (npm install gsap), that's working.

 

21 hours ago, akapowl said:

Using singular parameters like that is invalid, btw - ScrollTrigger's start and end always need two parameters in their string-syntax; one for the trigger-element and one for the viewport.

Yes, I know that, that was just for here.

 

21 hours ago, akapowl said:

Also,left and right will only fulfill their purpose in either native-horizontal scrolling with horizontal: true set on the ScrollTrigger or in ScrollTriggers with the containerAnimation property set. 

 

So I'm rather confused - and I can't be much more helpful than that without a minimal demo of some sorts.

Maybe am I missing something but in your Codepen you didn't used horizontal: true anywhere, but 'left somewhere' and 'right somewhere' are working as expected.

 

I didn't set  horizontal: true on my project and that's working too now, so I don't really understand.

[akapowl]

 

7 hours ago, Simon.Gioffredi said:

Maybe am I missing something but in your Codepen you didn't used horizontal: true anywhere, but 'left somewhere' and 'right somewhere' are working as expected

 

As I said; left and right work with horizontal: true OR ...

 

On 4/19/2023 at 1:13 PM, akapowl said:

or in ScrollTriggers with the containerAnimation property set. 

 

 

 

Now if it is speicfically an issue with the gsap-bonus.tgz file you are having; maybe you could just upload a very minimal and as much as possible stripped down .zip-file of your project in a post of yours.

 

Edit: Coming to think of it again, that probably isn't a good idea, since users of the free tier would be able to download it.

 

Anyways, I think that would be something, one of the Admins would have to have a look at then.

 

[Rodrigo]

Hi,

 

I just created an example in my local machine using the latest Nuxt3 version and I downloaded the Shockingly Green ZIP file and the same Container Animation example Paul is referring to in this thread is working as expected. I attached a file with the project. You'll have to include the gsap-bonus.tgz file and run npm install (in that specific order) in order to see it working.

 

Also your account is not linked to a Club GreenSock membership so be sure that the files are up-to-date. The container animation feature was included in version 3.8. If you have a previous version then you'll have to renew your membership in order to have access to the latest version.

 

Happy Tweening!

gsap-tar-test.zip

[Simon.Gioffredi]

@Rodrigo

 

Hello,

 

Indeed, your example works as expected and allowed me to see where my mistake was (even if I don't understand the problem).

I was installing gsap this way and the version is 3.6.1.

"gsap": "./gsap-bonus.tgz"

But if I use the same thing as you, gsap is in version 3.11.5.

"gsap": "file:gsap-bonus.tgz"

I have done some testing and the problem is with yarn.

When I do $ npm install ./gsap-bonus.tgz, it creates the right entry in the package.json (with the file:).

 

But when I use yarn, $ yarn add ./gsap-bonus.tgz, it doesn't put it automatically.

 

I have the same problem on your example.

 

Thanks for your time,