Hello,

How can I animate elements when I scroll down?

I know this can be done with ScrollMagic.io but I can't seem to understand how I can solve my problem with this plugin.

So basically what I want is to have a background image and when you scroll down, the background stays there and over it elements show/hide based on the scroll position.

Any idea?

Thanks, Klevis

Marco Alka's photo

Software Engineer, Technical Consultant & Mentor

tl;dr of Jason's answer:

throw away that JS lib, you don't need it. Just create a div element with the image as background-image, make it position: fixed and background-size: cover. Then write your content as usual. The background image will stay and cover your screen, while you can scroll through your content.

Edit (VanillaJS scroller animations):

Show +7 replies
Marco Alka's photo

Klevis Miho I think you don't need the lib and CSS can give you plenty of control! All you have to do is make containers, which define sliding behavior and to which child elements can relate. Then fill them with the sliding backgrounds, one per container. You only have one background fixed and every other background is absolute. The first one is absolute at the bottom of its container, every other one needs two classes, which either put them at the top or bottom of their container, depending on the scroll position. Then all you need to do is define a few elements you want to display and where they should appear. I made a simple example with two backgrounds and six elements, which appear at certain scroll positions relative to their background's scroll position in the container. It's just a quick hack and can be improved in a number of ways, but I hope you get the gist of how to get simple stuff done without big, complex and inflexible libraries.

Klevis Miho's photo

Marco Alka that seems to solve my issue. I think I will use your solution. Thank you very much.

Jason Knight's photo

The less code you use, the less there is to break

If all you have is a background-position:fixed background and stuff showing up on screen when you scroll, why are you getting JavaScript involved?

Though if you're talking goofy animated slide-in fade-in style nonsense, or that parallax scrolling garbage, JUST STOP! All you're doing is pissing off users by making things slower loading, memory wasting, battery wasting, and harder to use.

That type of artsy fartsy "flashy" stuff only exists to let graphic artists DELUDE themselves into thinking they know what design is, and to cover up for a lack of 'content of value'. It really has no business on any legitimate website about a legitimate topic which is why you rarely find that stuff anywhere but sleazy, scummy advertising pages for things that cannot stand on their own merits.

... or on pages created by artists and programmers who don't know how to keep it in their pants.

End of the day people visit websites for the CONTENT, not the goofy graphics, stock images, or fancy animations you slop around the content; to that end that's where your efforts should go... no matter what lies some marketing executive who knows nothing about websites or graphic artist who doesn't know the first blasted thing about accessibility might try to spoon feed you -- either out of their own ignorance, or trying to cover up for a lack of competence.

I'm not saying you can't make it pretty, but look around at the big success stories of the web. Are they pulling these types of graphical flashy stunts? Hell no.

Klevis Miho's photo

I totally agree, but in this case it will be a intranet thing.