Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

How to add a fade out effect to a scroll groups

New Here ,
Oct 23, 2021 Oct 23, 2021

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!

TOPICS
How to
2.7K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 23, 2021 Oct 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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 24, 2021 Oct 24, 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
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 25, 2021 Oct 25, 2021
LATEST

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

Thanks again!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines