Split Screen Pinning

[amitr95]

Hello,

 

I've been trying to reverse engineer this demo from @Carl:

 

See the Pen vYVBPJq by snorkltv (@snorkltv) on CodePen

 

But with more reusable class names / suited to my use case. The issue I'm having is with the images, it does not change as you scroll down. Upon inspecting, I can see that it adds the following to my first .splitScreenPinning__image:

opacity: 0;
visibility: hidden;

The above, however, is not added in the above demo. I can see that Carl's demo is using GSAP V3 and I assume the autoAlpha property has been reworked since, which is causing this issue? Unless I'm missing something in the SCSS, animation is where the issue is stemming from?  

 

See the Pen ExJmrGq by Amit-Rai-the-styleful (@Amit-Rai-the-styleful) on CodePen

[GreenSock]

Nothing has changed about how autoAlpha works. I noticed a few problems in your demo: 

1. Your "wrapper" variable was null. You called detail.querySelector(".splitScreenPinning__wrapper") - but that's actually an ancestor of the detail element, so querySelector() won't find it. I assume you meant to use closest()? Since your ScrollTrigger's trigger was null, it was defaulting to the viewport/body, and therefore your start: "top 80%" and end "top 50%" resulted in NEGATIVE start/end scroll positions, so your whole animation was FINISHED at the very top of the page, before scrolling. That's why autoAlpha: 0 was already set. 
2. I'm pretty sure you meant to set the trigger to the detail element. 

See the Pen NWmjJLm?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

[amitr95]

Apologies for the late response @GreenSock. You're correct with the assumptions and I can confirm your demo is the working version I was trying to achieve

 

To expand upon the demo, I'm trying to achieve 2 further things:

1. If you navigate to this website and scroll down on the homepage, you will encounter a similar pinned module. If you look at the image change effect, it gives the effect of the image being "revealed" rather than sliding in from the bottom to top (as my demo is doing). Upon inspecting the functionality present on that site, it looks like they're changing the background-image position as a user scrolls. In my scenario, I have images which are positioned beneath the "active" one. As such, I know part of the solution to emulate this functionality is to remove gsap.set(photos, { yPercent: 100 }); so that the cards stack on each other. Would the next step then be a clip-path animation, so that it gives the effect that the image is being cut, revealing the one below it? If so, could you share any demos that showcase how this is achieved? I couldn't find any in the CodePen libraries or anything similar in the forums. 
2. Secondly, again using the above website as an example, I'm also trying to change background colours on each pinned item. The issue I'm having is that 1. it doesn't apply the BG colour for my first pinned element on scroll. 2. When transitioning from one section to another, there's points where it doesn't transition between the two colours. Initially I thought it's a margin issue, but it doesn't seem like it. Can you point me in the right direction?

Thanks

See the Pen ExJmrGq by Amit-Rai-the-styleful (@Amit-Rai-the-styleful) on CodePen

[Rodrigo]

Hi,

 

You can use ClipPath instead of transforms:

https://bennettfeely.com/clippy/

Here is a simple demo:

See the Pen VwRQoPB by GreenSock (@GreenSock) on CodePen

 

For the background color you can follow this tutorial by @Carl:

 

Hopefully this helps.

Happy Tweening!

[amitr95]

Thanks for the links @Rodrigo. Will explore the clip-path approach.

 

In regards to the background colour change, does that imply that my current method was incorrect? I thought it's close as the colours do change, but with glitchy behaviour. Keen to understand if the approach itself was incorrect usage / application for future reference.

[amitr95]

I've expanded on the above and created this new version where I've attempted three things:

1. clip-path revealing images
2. yPercent reveal image (to emulate the clip-path effect)
3. Background colour change effect

See V2 version here:

 

See the Pen jORzBpz by Amit-Rai-the-styleful (@Amit-Rai-the-styleful) on CodePen

 

In the above demo:

• The images are stacked on top of each other so that on scroll I can reveal the next image from the bottom up (as per the example on this site). To make sure that the image are stacked in order, I've done gsap.set(photo, { zIndex: allPhotos.length - index });. However, the issue with this is that neither my clip-path or yPercent animations are revealing the next image because of it. I also can't update zIndex in animation because it'll just blink into visual and you can't z-indexing part of an element.
• I've implemented the background color methodology as per the above demo (altered slightly for my use case of course). However, the issue issues I described above still remain where 1. when the user scrolls into the pin section (the first image and text section), the background colour isn't changing, it looks like it only begins when  the second image is in view (1st sections bg colour is being applied when 2nd image is in view). 2. There still seems to be an issue where when the BG colours are changing, it because transparent and then changes to the next colour. I want it to transition from colour A to B (currently looks like it's going from A to transparent to B).

Any pointers?

[Rodrigo]

Hi,

 

I think you are overcomplicating this quite a bit. It should be as simple as this:

See the Pen zYXWVdw by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[amitr95]

Ah, I see. Thanks for the demo, I've been trying to find something like this in the forums and on CodePen, but couldn't find anything similar. Is there an easier way to find these things or was a demo that was freshly created?

 

Nevertheless, thanks again for the demo. I'll try emulate for my use case and will post my solution back here in case it helps anyone else. 

[Rodrigo]

25 minutes ago, amitr95 said:

Is there an easier way to find these things or was a demo that was freshly created?

You can always try the search in our main forums:
https://gsap.com/community/forums/forum/11-gsap/

 

Although, as with any other search tool, you could get a lot of results based on your search terms. Other option is to search in google using the forums URL as the site parameter. Just type this in the search input on google:

scrolltrigger modal site:gsap.com

And it'll search for all the indexed results for scrolltrigger modal on our forums. Of course replace scrolltrigger modal with your terms.

 

The demo was made yesterday in the afternoon so is fresh out of the oven 👨‍🍳 🤌

 

Happy Tweening!

[amitr95]

@Rodrigo - I think part of my problem is that I never know what these animations / effects are called. E.g. I would never have searched for "split screen pinning" to find demos for those 😅

 

Nevertheless, I can confirm I have managed to create the effects I was after using the assets shared in this thread. 

 

Many thanks all

[Cassie]

There's a demos page in the docs too

https://gsap.com/demos/?page=1

 

We're going to add more demos there soon.

 

[Rodrigo]

1 hour ago, amitr95 said:

I think part of my problem is that I never know what these animations / effects are called. E.g. I would never have searched for "split screen pinning" to find demos for those

Yeah naming conventions are not really something that exists for this type of things. Depending on what's happening and how, most likely every single person could give a particular effect a different name and some people might even question those names: Why you give that effect that name? That's why is always a good idea to provide a demo or live sample so we can find/remember something like that. Of course that predicates on our memories not failing.