4

I have a question that is kind of hard to explain, so bear with me I will try to explain it the best i can.

First, let me briefly explain the website I am creating. It starts with a full screen banner and below the banner there is a grid filled with items.

I am using wow.js to give each grid item an animation. Each item is hidden at first (because of wow.js) but they fly in from the left as you scroll down the page.

I have some category links at the top of the grid that call a working custom jQuery function that displays/hides certain grid items based on the link you click. each link has a category associated with it, and displays all grid items with that category when clicked. It also hides all grid items that do not have that category.

My issue is that the category links don't display all grid items in that category unless you scroll to the bottom of the page and load all grid items. the links will only show the grid items that have been loaded by scrolling down.

If I remove the wow animations, all grid items are visible on page load and the category links work fine, links fully show all grid items in that category.

I really want to keep the wow animations, they look cool and give life to the boring webpage.

Does anyone know of a way to somehow load all the elements (grid items) on page load while keeping the hidden wow.js effect?

I know this is a confusing question and I probably did not explain it the best. I will try to find a way to re-word my question so it is easier to understand but in the mean time I will keep this question active.

Thanks!

Mukesh Ram
  • 5,814
  • 4
  • 15
  • 34
cup_of
  • 5,033
  • 5
  • 27
  • 67
  • 1
    Better to create pen. So that someone can figure it out and help you. –  Jul 16 '16 at 04:55

1 Answers1

2

i figured it out, all i had to do was 

.wow {
    visibility: visible !important;
}

thanks

cup_of
  • 5,033
  • 5
  • 27
  • 67