Has anyone figured out how to control the opacity of fixed position elements that are nested inside a horizontal paged scrolling area that in turn is nested inside a vertically scrolling page?
I want the opacity of the pagination dots to shift when the carousel pages left or right.
I know how to do this using drivers when the paged scrolling area is FULL screen, but I can’t figure out how to make that work when the scrollable area is less than full screen, and the full screen is set to scroll vertically.
Hi Kire, what you are looking to achieve should be easily done by using drivers as you said, not sure what you mean when you say you can only make it work when in full screen, as drivers usually work with any element that has a scrolling/page/drag behaviour attached on, so in this case my assumption would be to do the drivers animation within that nested component.
If they were different components, you can always send messages from one to another to trigger the animations but in my opinion I’d keep the pagination and dots within the same one.
Mind sharing that example file so I can take a look and send it back to you with a solution? You can upload it to dropbox and put the link in here if that’s convenient for you.
Fwiw - when the overall page is set to scroll vertically, I can’t figure out how to trigger drivers for a nested carousel that scrolls (pages) horizontally… but it sounds like this is doable and I just haven’t seen the light
When you open the drivers animation timeline, it automatically detects and creates a ‘lane’ for each group that has a scrolling behaviour associated to it, in your case, when opening the drivers line you can see the 2 lanes, one for the vertical scroll and another one for the paged one.
So next thing to do is to choose what property of those elements you want to animate as the scroll progresses, in this case would be just the opacity, but if you wanted the dots to also animate in size, you could also select opacity and scale for example.
So you click in the blue + sign and choose opacity.
This will add 3 keyframes (one for each dot) in their opacity value, now you just need to move the page slider to the next position and change the values, continue doing this for all 3 dots.
Should end up looking a bit like this, notice that every dot has another keyframe just before changing it’s opacity, this keyframe help us to have a snappier transition than if it didn’t have it.
In this case, my approach would have been to make the page slider a component itself and do all this within itself (in the same way), that way you could also have triggers that send a message out of the component, like for example if you want to be able to tap each of the slider images and be taken somewhere.
Here’s the .prd file back if you want to take a look, hope it helps!
