Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Owen Hughes Owen Hughes

Fade elements in on scroll

Is there a way to fade in UI elements in when it comes into the view port? 

 

The only vague way i can get it to work is if its on a timer. 

 

Thanks in advance

Owen

0

comments

sort by


FAHANMI Ambrose Wuraoluwa
InVision ambassador FAHANMI Ambrose Wuraoluwa , ambassador
Comment actions Permalink

Hi Owen,

I also think the vague way might be the most reliable way. Using the timer animation, you can be certain to always achieve the 'fade in'.


An extra you might want to add to make the fade more obvious is reducing the opacity and fill colour of the UI element from the preceding artboard (I personally reduce it to 50%) . 

Generally, let's say you are fading in a UI element from artboard A to artboard B,

  • First make sure the element is on both artboards and have the same name on the artboards.
  • For artboard A, you'll move the element out of the viewport (direction you move out determines the direction it'll fade in from),
  • Then reduce the opacity and fill colour of the element in artboard A as you deem fit.
  • For Artboard B, move the element to the final position you want it to fade in to.

I hope this helps.

Regards, 
Wurah.

0

Owen Hughes
InVision ambassador Owen Hughes , ambassador
Comment actions Permalink

Hi Wurah, 

Thanks for this! 

Im looking for how it can appear when you scroll just so users aren't limited to a timer if that makes sense? 

Thanks

Owen

0

Owen Hughes
InVision ambassador Owen Hughes , ambassador
Comment actions Permalink
0

FAHANMI Ambrose Wuraoluwa
InVision ambassador FAHANMI Ambrose Wuraoluwa , ambassador
Comment actions Permalink

Hi Owen,

If I understand correctly, the UI elements should fade in while the user is scrolling through some other elements?

If that's the case, the work around I would suggest is doing the above first (creating and adding the elements to both artboards as listed above) but not adding any transition to the elements.

This implies that the only transition you would have between the artboards will be the 'scrolling' transition.

When you get to the 'edit timeline' panel:

  • Identify the UI elements you want to 'fade in' from the list of elements on the artboards displayed
  • Use the 'transition edit (name I call it)' button (as displayed in attached picture).
  • Select the 'ease in' option and tweak as you deem neccessary.

I think that should work fine without adding any timer animation to the elements you want to fade in.

Hope this solves the request.

P.S: I made the transition on the circle but added the 'ease in' on the rectangle.

Regards,
Wurah.


0

join the conversation

to comment, sign up or sign in.