scroll-animator | 100 lines of code ) and dependency-free library | Animation library

by lavolpecheprogramma JavaScript Version: Current License: MIT

X-Ray Key Features Code Snippets Community Discussions(1)Vulnerabilities Install Support

kandi X-RAY | scroll-animator Summary

scroll-animator is a JavaScript library typically used in User Interface, Animation, React applications. scroll-animator has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can download it from GitHub.

A lightweight ( ~ 100 lines of code) and dependency-free library to animate elements on your page as you scroll written in pure Javascript.

Support

Quality

Security

License

Reuse

Support

scroll-animator has a low active ecosystem.

It has 7 star(s) with 0 fork(s). There are 1 watchers for this library.

It had no major release in the last 6 months.

scroll-animator has no issues reported. There are no pull requests.

It has a neutral sentiment in the developer community.

The latest version of scroll-animator is current.

Quality

scroll-animator has no bugs reported.

Security

scroll-animator has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

License

scroll-animator is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

scroll-animator releases are not available. You will need to build from source code and install.

Installation instructions, examples and code snippets are available.

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of scroll-animator

Get all kandi verified functions for this library.

scroll-animator Key Features

No Key Features are available at this moment for scroll-animator.

scroll-animator Examples and Code Snippets

No Code Snippets are available at this moment for scroll-animator.

Community Discussions

Trending Discussions on scroll-animator

Start flex elements off screen to animation into position

QUESTION

Start flex elements off screen to animation into position

Asked 2017-Oct-09 at 17:52

I'm having some trouble figuring out how best to get this animation to work.

I have two elements that are centered vertically inside of a flexbox layout, I want to get these elements to animate into their final positions by sliding in from off-screen, however, this seems to be giving me some unexpected results I assume because of their flex positioning. Any thoughts on how I can tackle this?

Here is a plunker showing the current state of things, I've slowed the animation down so you can see the dilemma and where I'm trying to take this.

...

ANSWER

Answered 2017-Oct-09 at 17:52

When using percent with translate, it is the elements own size it refers to, which means, if an element is 200px high, translateY(100%) will move it 200px (100% of its own height) down.

In this case you can use viewport units instead, i.e. transform: translateY(100vh);, which means it will position the element at the bottom of the viewport, no matter its height.

Updated codepen

Source https://stackoverflow.com/questions/46651450

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install scroll-animator

Be sure to polyfill:.
window.requestAnimationFrame

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: