Skip to main content
S
selmah97681700
New Participant
October 23, 2021
Question

How to add a fade out effect to a scroll groups

  • October 23, 2021
  • 1 reply
  • 2831 views

Hi everyone 🙂

I am working on mobile webshop design, that contains a scroll group (horizontal) with buttons. The client would like to see the scroll group fading out at the right side. So in other words: The last element touching the right edge of the screen should be displayed gradient transparent. Does anyone know how to add such an effect? 

Thanks in advance!

This topic has been closed for replies.

1 reply

S
selmah97681700Author
New Participant
October 23, 2021

I found a way to add this effect:

  1. I have created a rectangle with a gradient from gray to white
  2. Then I put this rectangle above and at the end of the scroll group
  3. and then set the mode "Hard Light"

 

It works well.

Dan Rodney
Dan Rodney
Community Expert
October 25, 2021

I'm happy you found a solution. In case it helps, there is a slightly easier way that does not require a blend mode. Make a gradient that goes from white to white, but make the one white transparent.

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor
S
selmah97681700Author
New Participant
October 25, 2021

Thank you Dan! You´re right! It´s much easier. I don´t why I made that complicated 🙂

Thanks again!

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices