Problem triggering objects in horizontal parallax

[Christian_LNET]

Dear GreenSock community!

 

I am currently working on a project with a horizontal parallax. Each "scene" needs to be in full width and height of the viewpoint with a static background and up to 3 "objects" within this "scene" that just slightly move horizontal with different speed on scrolling, so that it creates kind of a depth effect.

 

I already built this by using rellax library and it worked pretty well, at least while using a modern mouse (Magic Mouse etc) without a physical wheel. My client is using a mouse with a wheel and this is causing the scrolling to be very faltering. I tried to combine my first attempt with several scroll smoothing libraries, nothing worked.

 

So now I completely rebuilt this by using GSAP and ScrollTrigger. In general, the scroll smoothing works now with all kinds of mouses, which is great! BUT: I can only get the objects in the very first scene to move. In all other scenes, the objects do not move. I spent hours on this but can't get it run properly. I really hope to get some feedback on this issue from the community. Thank you in advance!

See the Pen vYxOVWp by cleuenberg (@cleuenberg) on CodePen.

[Cassie]

Hi Christian! Welcome.

I'm not sure exactly where you want your start and end triggers to be, but I don't think they're where you think they are.

I added markers:true and they're triggering much further down the page

If you take those values out and added in markers true and you can see the parallax behaviour. You may have to have a little play around with what values you need, but I think that may be the issue. 

See the Pen da9ec71ac8a3c81f7044ed400e92d115?editors=0011 by cassie-codes (@cassie-codes) on CodePen.

[Christian_LNET]

Thanks Cassie for your feedback!!

You're right, start and end triggers seem not to be correct. After removing them, the objects in the 2nd scene move a little bit but all others still doing nothing. I have the feeling that all objects get triggered at once, that's why only the first ones are moving. I need to trigger those when their container / scene is entering the viewport. I am wondering, how this could be achieved … any ideas? ?

[Cassie]

I'm not really a pro with scrollTrigger yet, but I think this may be something to do with how you're doing the horizontal scrolling.

At the moment it thinks you're scrolling vertically so all the objects are entering and leaving at the same time.

I know you can set horizontal:true on your scrollTrigger - but you're not technically scrolling horizontally? I guess you could get around this by declaring different vertical start and end points on each of the objects?

[mikel]

Hey @Christian_LNET,

 

This could be an option (not perfect). A separate scroll trigger would be required for the last section.

 

See the Pen abJOPbQ?editors=0010 by mikeK (@mikeK) on CodePen.

 

Happy testing ...

Mikel

 

 

[akapowl]

 

Hi there.

 

32 minutes ago, Cassie said:

I know you can set horizontal:true on your scrollTrigger - but you're not technically scrolling horizontally? I guess you could get around this by declaring different vertical start and end points on each of the objects?

 

Yes, Cassie is right.

 

Since you are technically just faking the horizontal scroll with a tween on vertical scroll, for triggering animations on seperate elements along the way/scroll, you'd have to calculate their starts/ends based on their offsetLeft (as the demo @mikel posted does).

 

Since in your case the amount of the x-translation of the fake-horizontal tween and the 'duration' of the scrubbing ScrollTrigger are not the same, you would also have to incorporate an 'offset' into those calculations., which in mikel's demo is the later part with the maxWidth and the window Width.

 

start: () => 'top top-=' + (sct.offsetLeft ) * (maxWidth / (maxWidth - window.innerWidth))

 

I wrote up one bit more detailed explanation on that in this thread here, which might help understand what exactly it does and why it is neccessary.

Hope it helps.

 

 

 

 

 

[Cassie]

Ah, these are great links and demos. Thanks gang!

[Christian_LNET]

Thanks so much to all of you! I'm trying to dig deeper into this with your examples and hopefully will get this running soon 

[Christian_LNET]

Hey there again! Thanks to your examples I was able to improve my script and made a huge step now  The objects get triggered on entering the viewport. Just one last thing that I'm currently not getting right: I'm using xPercent to move the objects but it seems that their reference is not their parent container. This makes the objects move more the further they are to the right. I'm not sure, how to solve this the best way … do I need to calculate something or am I missing some useful parameter?

 

See the Pen qBrOVjx by cleuenberg (@cleuenberg) on CodePen.

[Cassie]

xPercent/yPercent is based on the element itself - not the parent container.

If you really want values based on the parent container you could wrap the objects in a containing div, make that div 100% width and height of the container and then animate that instead?

[akapowl]

Hey @Christian_LNET

 

Aside of Cassie's suggestion, there could be a problem with the way you are doing it now. onEnter of each section, you are creating animations attached to ScrollTriggers over and over again, that's not so good - best only create the ScrollTriggers initially.

 

Here's how I would do it:

Inside the forEach for the sections create another forEach for the objects in that section, because you will need the offsetLeft of the object itself for the correct calculation on the start as well as the offsetLeft of the section, as offsetLeft is always in reference to the parent.

 

That could then look something like this (note, that the triggerpoint here is in the center of the screen for demoing purposes)

 

See the Pen 243b57fc9d5e6ae0b37e9bf406ade7f6 by akapowl (@akapowl) on CodePen.

 

 

[Christian_LNET]

Thanks @akapowl! That's pretty much it! I'll try going from center to right side of the screen, but this is nearly perfect!  

[noleeo]

@akapowl I'm having the same issue.  I'm trying to use a %, but that is not consistent.  I am new to GreenSock and have limited scripting knowledge.

 

Can you help me figure out the calculation for the start and end on this? 

See the Pen OJjjjQW by noleeo (@noleeo) on CodePen.

 

I tried this start, but it is not working...

start: () => 'top top-=' + (sct.offsetLeft - window.innerWidth/2) * (document.querySelector(".horizontal-slideshow3").offsetWidth/(sct.offsetWidth * (sections3.length - 1))),

 

Any help you can give would be appreciated.

[akapowl]

1 hour ago, noleeo said:

Any help you can give would be appreciated.

 

Easiest would be to have a look at the new containerAnimation property that came with GSAP 3.8.0 - that will take the roadblock of those calculations out of the way for you and pretty much lets you trigger animations on seperate elements within the fake-horizontal tween as if it was a normal horizontal-scolling section.

 

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.