Scrollsmoother parallax and size related tween

[LucasD]

Hi GSAP team !

I'm trying to apply a scrolltriggered scale animation to an image inside a container. At the same time i'd like this image to have a parallax effect inside its container, using scrollsmoother and the data-speed="auto" parameter.

 

The 2 effects do not seem to work well when applied simultaneously. You can see in my pen that the img is translated more than it should be.

 

What I understand is that the parallax translation amount is determined after the initial up scaling is applied, thus resulting in a bigger amount than  what is needed.

 

Is there any way to create the parallax effect based on the initial image size ?

See the Pen NWYaPXN by lucasdemea (@lucasdemea) on CodePen

[SteveS]

I believe this can be fixed in your HTML. Put your image in a container with a static height to be used for the parallax speed and then scale inside of that container.

Think about it this way, with parallax you take the height of an element, find the difference between that and the height of its container, and then you translate the inner element up by that much over the duration of the scroll. If you introduce scale into the equation it becomes significantly more complex since scaling can happen non-uniformly. e.g. image scaling can happen between 50% and 100% of page height, or any other values. It's not impossible to calculate, probably not even that difficult, but it doesn't make sense as a feature because of how niche the use case is vs the amount of code required to make it reliable.

[LucasD]

Thanks, I was also thinking about the double container solution, and finally implemented it. It works well.

 

I still wonder if the parallax translation could be calculated before any other "gsap.from" tween settings are applied.

[GreenSock]

11 hours ago, LucasD said:

I still wonder if the parallax translation could be calculated before any other "gsap.from" tween settings are applied.

No, I definitely wouldn't recommend creating conflicting animations where one is applying a transform (scale) and another (data-speed="auto") is applying a translation transform simultaneously on the same element. 

 

Or you could eliminate the data-speed="auto" altogether and just do all your animation in a single ScrollTrigger-driven animation, but of course you'd need to decide/calculate how far to move the image rather than relying on ScrollSmoother to do all those calculations for you. 

 

Good luck!