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

How to add a fade out effect to a scroll groups

New Here ,
Oct 23, 2021 Oct 23, 2021

Copy link to clipboard

Copied

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

Views

2.3K

Translate

Translate

Report

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

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

LATEST

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

Thanks again!

Votes

Translate

Translate

Report

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