react-component / scroll-anim

Animate Scroll React Component

rc-scroll-anim

---

React ScrollAnim Component

Browser Support

IE 10+ ✔	Chrome 31.0+ ✔	Firefox 31.0+ ✔	Opera 30.0+ ✔	Safari 7.0+ ✔

Development

npm install
npm start

Example

http://localhost:8020/examples/

http://react-component.github.io/scroll-anim/

http://ant.design/

Feature

• support ie8,ie8+,chrome,firefox,safari

install

Usage

ScrollOverPack

var ScrollAnim = require('rc-scroll-anim');
var ScrollOverPack = ScrollAnim.OverPack;
var React = require('react');

// ScrollOverPack support rc-animate,rc-queue-anim,rc-tween-one;

React.render(<ScrollOverPack>
  <QueueAnim key='queueAnim'>
    <div key='a'>enter</div>
    <div key='b'>enter</div>
    <div key='b'>enter</div>
  </QueueAnim>
  <TweenOne key='tweenOne' vars={{x:100}}>one element</TweenOne>
  <Animate key='rc-animate' transitionName="fade" transitionAppear>rc-animate</Animate>
</ScrollOverPack>, container);

Parallax

var ScrollParallax = ScrollAnim.Parallax;
React.render(<ScrollParallax animation={{x:100}}>Parallax</ScrollParallax>,container);

Link, Element

var Link = ScrollAnim.Link;
var Element = ScrollAnim.Element;
React.render(<div>
  <div className="nav">
    <Link className="nav-list" to="page0">nav0</Link>
    <Link className="nav-list" to="page1">nav1</Link>
  </div>
  <Element className="pack-page" id="page0">demo</Element>
  <Element className="pack-page" id="page1">demo</Element>
</div>,container);

scrollScreen

ScrollAnim.scrollScreen.init();
ScrollAnim.scrollScreen.unMount();

API

中文文档

props

Element

Element or OverPack must set height;

name	type	default	description
component	string	div	-
id	string	null	need to location the id，parallax the location or link the to, need to use
targetId	string	null	scroll target id, if don't window scroll, parent element is overflow: scroll, use parent id to do scroll; demo refs
playScale	number / array / string	0.5	percentage of screen to start play, screen center is 0.5, if replay is true : [bottomEnter, topLeave]， topLeave >= bottomEnter
replay	boolean	false	play every enter, do you want to animate each time you show the current, false only scroll to down play animate
onChange	func	null	change callback({ mode, id }); mode: enter or leave
onScroll	func	null	scroll callback({ domEvent, showHeight, offsetTop, scrollTop, id }).
location	string	null	v0.6.0 above have,location, the parent id;
componentProps	object	null	component props.

Note: if the element is not the above component, you need to location this element; please use the Element

OverPack

OverPack inherit Element; component playScale onChange onScroll location replay refer to Element;

1.0.0 remove hideProps;

name	type	default	description
always	boolean	true	back to top, enter replay，as false will only play it again, leave does not play
appear	boolean	true	whether support appear the operation
componentProps	object	null	component props.

Parallax

name	type	default	description
animation	object / array	null	animation data
location	string	null	location, the parent id
always	boolean	true	-
targetId	string	null	refer Element targetId
component	string	div	-
componentProps	object	null	component props.

animation = { }

name	type	default	description
playScale	array	[0, 1]	play area, [start, end] timeline: [{playScale: [0, 0.2]}, {playScale: [0, 0.8]}]], Second will increase by 0.2, The second end is 1
ease	string	easeInOutQuad	animation easing string
onUpdate	function	-	animate updates, callback: onUpdate(percent)
onStart	function	-	scroll down animate start (playScale[0]) callback;
onComplete	function	-	scroll down animate completed (playScale[1]) callback
onStartBack	function	-	scroll up animate start (playScale[1]) callback;
onCompleteBack	function	-	scroll up animate completed (playScale[0]) callback;

animation = [{},{}] is timeline;

Link

v1.1.0 remove onAsynchronousAddEvent. Asynchronous demo

v2.3.0 toHash default is false;

name	type	default	description
to	string	null	need; Specifies the element to top; Element the id
toHash	boolean	false	add to to the location.hash
duration	number	450	scroll animate duration
ease	string	easeInOutQuad	animation easing string
active	string	active	selected className
showHeightActive	string / number / array	50%	enter: the element offset top 50% add active, leave: the element in the window 50% remove active; is array [enter, leave];
toShowHeight	boolean	false	scroll to showHeightActive
offsetTop	number	0	scroll to elem top offset
targetId	string	null	refer Element targetId
onFocus	func	null	check callback,onFocus({target,to})
onBlur	func	null	blur callback
component	string	div	-
componentProps	object	null	component props.

ScrollAnim.scrollScreen.init(vars)

Use: scroll a screen window;

vars = { }

name	type	default	description
location	array	[]	llocation of scrolling screen, only element ID is supported in array
duration	number	450	scroll duration
ease	string	easeInOutQuad	easing
docHeight	number	null	Custom html height
loop	boolean	false	Before and after the phase cycle
scrollInterval	number	1000	rolling interval time

ScrollAnim.scrollScreen.unMount()

Clear a screen scrolling effect;

Event

var Event = ScrollAnim.Event;
Event.addEventListener('scroll.xxxx',func);
Event.removeEventListener('scroll.xxx',func);

scroll-anim's Issues

OverPack 使用 always 类型提示报错

Example link is 404

http://react-component.github.io/scroll-anim/

Link和Element分开在不同组件内导致Link报错

where is addScrollEvent? IE10 console error 对象不支持"addScrollEvent"属性或方法

scroll-anim/src/ScrollOverPack.jsx

Line 52 in 9bdc5d6

this.addScrollEvent();

ScrollOverPack使用问题

在学习这个http://motion.ant.design/#/components/scroll-anim?_k=96uiqy时候，发现一个demo，滚屏展示动画的，http://react-component.github.io/scroll-anim/examples/scrollScreen.html 这个例子有点问题，操作如下：
页面加载后，点击 page1，page2，有时候最后点击 page0后，有时候点着点着，就页面无法向下滚动，麻烦问下这个问题该怎么排查

ScrollOverPack可不可以手动设置一下触发的距离

我先描述一下我出现的问题：

当页面滚动距离较小，并且overpack包裹的元素在最底部的时候 overpack不会触发。

我分析是：

页面滚动不到触发overpack显示的需要位置。

所以我希望：

可不可以自定义触发的距离，也就是说手动设置距离overpack包裹元素多远时自动触发。

谢谢~~

OverPack中向上滑到顶部后再下滑会无法再次显示

将OverPack的always设为false后，会出现无法显示的情况
componentDidMount() {
this.onScrollHandler = _.throttle(() => {
const { headerColorClassName } = this.state
const className = window.scrollY > 0 ? 'menu-sticky' : 'menu-transparent'
if (headerColorClassName !== className) {
this.setState({ headerColorClassName: className })
}
}, 200)
window.addEventListener('scroll', this.onScrollHandler)
}
请问这个该如何解决？

window undefined

exports["default"] = new EventDispatcher(window);
^
ReferenceError: window is not defined

when compile, render at server have no window object.

please do a check before use it. like this

if (typeof window !== 'undefined') {
exports["default"] = new EventDispatcher(window);
} else {
exports["default"] = new EventDispatcher();
}

ScrollParallax 的 onUpdate 没有实现

Parallax 说明 中animation 有一个参数

onUpdate | function | - | 更新时回调, 返回 ease 的百分比

代码中并没有实现这个接口

Link如果没写className属性会报错

如图：

引入OverPack和QueueAnim配合antd的dropdown组件在划出下拉菜单时也有动画，如何取消

Dynamic playScale in timeline not working

Hello, if the dynamic value of playScale property is used in a timeline with the Parallax component when I change the playScale values after the first render (e.g. because of the window resize), it crashes.

Without dynamic values the timeline works fine. Try to put dynamic playScale not on the 0 index of animation, but farther.

<ScrollParallax
    animation={[
      {
            opacity: 1,
            playScale: [1, 1 + contentViewportHeight] // this is fine, contentViewportHeight value is around 0.5 in my test
      },
      {
            opacity: 0,
            playScale: [1 - contentViewportHeight, 1], // because of this value is changing, it crashes
            onStart: () =>
                this._updateState({ imageIndex: 1 }),
            onCompleteBack: () =>
                this._updateState({ imageIndex: 0 })
      }
   ]}
   component={StyledOverlay}
   style={{ opacity: 0 }}
/>

An issue when using Link and ScrollOverPack

Hi there,

As I saw in your example, you fix the height of each section and that works great.
However, in my case, I cannot fix the height because my content will increase the height of the section when open in mobile device.

If I don't use a ScrollOverPack, then it works fine, but I want to use it too.

I realize that the TweenOne elements will be not shown until I scroll to that section. That makes Link scroll to the wrong position.

Do you have any idea?

Best,

滚动不到指定位置

http://react-component.github.io/scroll-anim/examples/linkAsynchronous.html

http://react-component.github.io/scroll-anim/examples/link.html

Ant Design 官网首页报 warning

官网首页最近没改过，重装依赖就有这个报错了，错误来自 ScrollOverPack 内：

Warning: Unknown prop `hideProps` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by ScrollOverPack)
    in ScrollOverPack (created by Page1)
    in Page1 (created by Home)
    in div (created by Home)
    in DocumentTitle (created by SideEffect(DocumentTitle))
    in SideEffect(DocumentTitle) (created by Home)
    in Home (created by InjectIntl(Home))
    in InjectIntl(Home) (created by RouterContext)
    in div (created by Layout)
    in LocaleProvider (created by Layout)
    in IntlProvider (created by Layout)
    in Layout (created by RouterContext)
    in RouterContext (created by Router)
    in Router

OverPack 例子 有bug，快速拖动后不显示了

如题

timeout in componentDidMount causes race condition for componentWillUnmount

I'm experiencing issues with the removeEventListener call in componentWillUnmount of the ScrollParallax.js -> https://github.com/react-component/scroll-anim/blob/master/src/ScrollParallax.jsx#L65

It's sometimes failing to remove the eventListener by calling this function with an undefined this.eventType.

After digging into it I found this timeout https://github.com/react-component/scroll-anim/blob/master/src/ScrollParallax.jsx#L43 delaying the adding of the addEventListener in componentDidMount while the componentWillUnmount is already called.

Is there a reason for the timeout?

After removing the timeout locally my issue is gone. So I wonder if it can be removed. :)

Fire animation hiding on React Router change

Hi, wanted to know if is there a way to fire TweenOne animation out when changing Route using React-Router-DOM ?

playScale 支持更多类型。。

• playScale: string or number

string: 100px or 10vh

number == vh

可以多给些实例吗？TweenOne到底可以嵌套吗？

遇到很多问题，希望可以在增加一些实例

Parrallax behavior differ from child to child

Great tool! thank you for putting this together.

Please take a look at julesmoretti.digital, you will see 3 projects, 2 of which can be opened up (view those as an iPad pro or iPhone X device).

I implemented the parallax to the highlight of the titles "VR Care" "HARMONY EXPRESS" and so on... you will see that those triggers at different positions of the screen percentage.

The first one "Harmony Express" starts around 15% of the top of the page:

And then the second one starts around here:

And this is the animation config for it:

[
{
    width: "105%",
    duration: 100,
    playScale: [0.05, 0.1],
  },
  {
    width: '10%',
    duration: 100,
    playScale: [0.85, 0.9],
  },
]

I made sure that the parent element is set to position: relative. Let me know what I am missing here :)

Thank you.

ScrollAnim.scrollScreen中的 location 参数已经被移除了吗？

https://github.com/react-component/scroll-anim#scrollanimscrollscreeninitvars

在 IVarsProps 中没有 location 的定义，是不是现在不需要 location 参数了？

export interface IVarsProps {
  duration?: number;
  ease?: IEaseType;
  docHeight?: number;
  loop?: boolean;
  scrollInterval?: number;
}

export default class RcSCrollScreen {
  public static init: (vars?: IVarsProps) => void;
  public static unMount: () => void;
}

Reverse animation not working

I'm using ScrollPack + Tween on each item of a grid, enter animation work fine, but if I scroll back, the reverse animation is done instantly, without "animation" effect.

It's a the bottom of this page: https://navalexnet.web.app/

Is is normal ?

Link and OverPack同时使用会有scrollTo定位不一致情况

1. 设置了新的scrollContainer（有targetId）不知道是否存在影响

2. 设置了TweenOne的一个fadeIn animation 有一个Y方向的200px fadeIn/Out animation

3. 行为是，当Link to的OverPack在当前view下方时触发Link正常，而在当前view在OverPack下方是，会多出一部分滚动距离，两种情况下操作滚动到的位置不一致

服务器慢，滚动时图片显示空白

先 render 一遍，可选不用分屏加载方法。

Temporarily disable scroll animations?

Is there any way to temporarily disable the scroll animations? I have a Chrome extension that lets people screenshot web pages and on sites using this library it generally catches things mid-animation. Usually, it does things like set transitions to 0, but I’m seeing that the animations here are all done by setting explicit transform values directly in javascript. I don’t see a way to achieve that with this library (example site).

Timed fade in

How would you realize a timed fade in?
for example:

• load page
• wait for 2 seconds
• let text appear

页面已经有Link, 再打开有Link的Modal, modal里的Link标签就失效

页面已经有Link标签, 并且有Modal页面, Modal里也有Link标签,

当打开modal后, modal里的所有Link都失效了

Doesnt support React-hooks

Parallax: playScale lookup on scroll

Could you please provide a way to show the current playScale position on a scroll in order to set values correctly for Parallax?

Right now those, no not match with the vertical height percentage and I am struggling to determine why that is.

Ideally, something that would work with onUpdate().

instead of onUpdate: (e) => console.log(">>> animation percentage " + e),
onUpdate: (e) => console.log(">>> animation percentage " + e.percentage)
onUpdate: (e) => console.log(">>> animation playScale " + e.playScale)
onUpdate: (e) => console.log(">>> animation offsetTop " + e. offsetTop)

Or something thereof.

Thank you.

建议增加OverPack需要设置最小高度的提示

OverPack默认不渲染子节点，导致默认高度只有0。如果底部节点没法将OverPack顶到“播放点”，整个控件将无法显示。
只有在特定场景才会出现，测试的时候很诡异。希望在OverPack的说明页面增加相关注意事项。

例如：
屏幕大小200，OverPack下方的控件高度20，播放点为0.5。
由于OverPack未渲染，所以高度是0，滚动到底部时距离底部20，只有0.1，无法触发OverPack的setState({show: true})。
至少需要设定OverPack高度最小值80，才能保证滚动到底部时能触发播放事件。

ios上滑动页面，速度过快滑动到底部，带有动画效果时，底部会强制往下回弹下?

切换路由动画没显示

先关闭了描述 我自己尝试先解决吧

OverPack设置滚动目标targetId无效

我的结构是

div id="home"
div id="wel"
Element:page0
ScrollOverPack:page1
ScrollOverPack:page2
/div
/div

设置了targetId=home后page1、2都不能显示出来，改成targetId=wel后可以显示，但是是一起出来的，动画不会随着滚动条变化，请问是怎么回事呢？

1.0.0

• 刷新过显示区域，如没上出场，将呈现出来。

• 去徐 hideProps，默认带上。。

• 添加 appear; #15

• 添加以父元素做滚动视窗；

Is it possible to avoid the "pop in" effect?

Is it possible to have the elements always in the DOM just hidden? That way they don't change the height of their parent element when the animate in.

OverPack animation doesn't render if the object is at the bottom of the page

I have an issue with the (badly named) <OverPack> component which, if i understand, triggers an animation when the element is scrolled upon.
However, i have an animation to trigger but it's on the last section of my page, so it will never reach the middle of the viewport, but rather stay at the bottom of the page.
So, i don't want to trigger the animation as soon as the element comes into view (when it is fully visible in the viewport)
How should i do that ?
Is there a parameter that i missed ? There should be one to giving us the percentage of the viewport to consider to trigger an animation. In my case, it would be the full viewport's height : 0..100%

<Col className="call_to_action" span={24} lg={10}>
	<OverPack inViewport={[0, 100]}>
		<TweenOne animation={ type: 'from', x: 200, opacity: 0 } >
			<Link className="button" to={link}>{call_to_action}</Link>
		</TweenOne>
	</OverPack>
</Col>

no typescript `.d.ts` file for this npm package

I've googled about typescript .d.ts files for this npm package but no luck, it would be nice if someone writes a .d.ts file for this package, thanks!

开发环境和生产环境行为 export 导出内容不一致。

你好。

import ScrollAnim from 'rc-scroll-anim'
const ScrollOverPack = ScrollAnim.OverPack
console.log(ScrollAnim)
console.log(ScrollOverPack)

开发环境下：

// ScrollAnim
{Element, Event, Link, OverPack, Parallax, Link, scrollScreen}

// ScrollOverPack
function ScrollOverPack () {
  // ...
}

生产环境下：

// ScrollAnim
{default: {Element, Event, Link, OverPack, Parallax, Link, scrollScreen}}

// ScrollOverPack
undefined

环境

版本：2.4.1
react版本：15.6.1
系统：macOs 10.12.3 （centos）
浏览器：Chrome Safari

请教一下 为什么会有这种情况？

当页面刚刚mount时就触发enter会触发报错

可能的错误代码
当第一次mount就enter并且always为false时会进入这段代码, 此时event并没有初始化，见此代码。

所以此时this.eventType为undefined导致报错