search

jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.39k stars 2.26k forks source link

Elements with 100% width never reveal? #373

Closed ezeinis closed 7 years ago

ezeinis commented 7 years ago

I have an html header tag in an image with a text that when is loaded from tablets it needs 2 lines whereas on desktop it needs 1 line

screen shot 2017-08-30 at 3 35 45 pm

screen shot 2017-08-30 at 3 35 52 pm

When the page is loaded from a device that is small enough for the text to appear on 2 lines it doesn’t reveal

screen shot 2017-08-30 at 3 36 01 pm

I have a live demo but it is a work in progress for a client. If you really need an example I can set one page up.

Thanks for your time in advance!

ezeinis commented 7 years ago

http://cdb.pxworks.co/category

You can see the issue in the first banner under the main menu. Let me know if you need something else :)

jlmakes commented 7 years ago

I haven’t been able to reproduce the issue on my own, but it appears that on your page when the element you’re trying to reveal is the same width as the window—it is never revealed. I don’t know what all is happening on your page, but the solution appears to be simple:

Add a non-100% width to your reveal targets in your smaller breakpoints.

I’m marking this as unconfirmed until this can be reproduced with a simple JSBin.

ezeinis commented 7 years ago

Your solution worked out thanks! Tried to reproduce it to help you but i couldnt, almost the exact code https://output.jsbin.com/sekijot/

Thanks for your time anyway!