|
|
@@ -1,27 +1,35 @@
|
|
|
import { Component, createRef } from "react";
|
|
|
-import gsap from "gsap";
|
|
|
+import { gsap, ScrollTrigger } from "gsap/all";
|
|
|
import PropTypes from "prop-types";
|
|
|
import { Action } from "../action";
|
|
|
import { css } from "@emotion/react";
|
|
|
|
|
|
export function TimeLinePureText(props) {
|
|
|
- const progressPosition = props.progressPosition
|
|
|
- ? props.progressPosition
|
|
|
- : 0.5;
|
|
|
+ const progressPosition =
|
|
|
+ void 0 !== props.progressPosition ? props.progressPosition : 0.5;
|
|
|
const fade = props.fade || 0.04;
|
|
|
const duration = props.duration || 0.1;
|
|
|
const verticalOffset = props.verticalOffset || "50vh";
|
|
|
const keyframes = [
|
|
|
- Object.assign({}, Action.fadeUp, {
|
|
|
- start: progressPosition,
|
|
|
- end: progressPosition + fade,
|
|
|
- }),
|
|
|
- Object.assign({}, Action.fadeDown, {
|
|
|
- start: progressPosition + duration + fade,
|
|
|
- end: progressPosition + duration + fade + fade,
|
|
|
- }),
|
|
|
+ Object.assign(
|
|
|
+ {},
|
|
|
+ Action.fadeUp,
|
|
|
+ {},
|
|
|
+ {
|
|
|
+ start: progressPosition,
|
|
|
+ end: progressPosition + fade,
|
|
|
+ }
|
|
|
+ ),
|
|
|
+ Object.assign(
|
|
|
+ {},
|
|
|
+ Action.fadeDown,
|
|
|
+ {},
|
|
|
+ {
|
|
|
+ start: progressPosition + duration + fade,
|
|
|
+ end: progressPosition + duration + fade + fade,
|
|
|
+ }
|
|
|
+ ),
|
|
|
];
|
|
|
-
|
|
|
console.log("keyframes-TimeLinePureText", keyframes);
|
|
|
return (
|
|
|
<TimeLineText
|
|
|
@@ -65,7 +73,6 @@ export function TimeLineWallText(props) {
|
|
|
parentHeight={props.parentHeight}
|
|
|
style={props.style}
|
|
|
progressPosition={props.progressPosition}
|
|
|
- // {...props}
|
|
|
>
|
|
|
{props.children}
|
|
|
</TimeLineText>
|
|
|
@@ -73,20 +80,30 @@ export function TimeLineWallText(props) {
|
|
|
}
|
|
|
|
|
|
export class TimeLineText extends Component {
|
|
|
- constructor() {
|
|
|
+ constructor(props) {
|
|
|
super();
|
|
|
this.containerRef = createRef();
|
|
|
- this.timeline = false;
|
|
|
+ this.timeline = null;
|
|
|
this.top = 0;
|
|
|
+ this.progress = 0;
|
|
|
this.keyframes = [];
|
|
|
this.trigger = false;
|
|
|
+ this.init(props);
|
|
|
}
|
|
|
init(props) {
|
|
|
- console.log("props", props);
|
|
|
+ // console.log("props", props);
|
|
|
+ this.props = props;
|
|
|
+ if (props.trigger && props.keyframes) {
|
|
|
+ var top = props.keyframes[0].start;
|
|
|
+ this.setTop(top);
|
|
|
+ } else {
|
|
|
+ if (this.props.progressPosition) {
|
|
|
+ this.setTop(this.props.progressPosition);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
componentWillUnmount() {
|
|
|
if (this.timeline) {
|
|
|
- console.error("remove-timeline");
|
|
|
this.timeline.kill(true);
|
|
|
this.timeline = false;
|
|
|
}
|
|
|
@@ -95,10 +112,6 @@ export class TimeLineText extends Component {
|
|
|
componentDidMount() {
|
|
|
if (this.props.keyframes && this.props.trigger) {
|
|
|
this.createTimeLine();
|
|
|
- var n = this.props.keyframes[0].start || 0;
|
|
|
- this.setTop(n);
|
|
|
- } else {
|
|
|
- this.props.progressPosition && this.setTop(this.props.progressPosition);
|
|
|
}
|
|
|
}
|
|
|
setTop(height) {
|
|
|
@@ -110,9 +123,12 @@ export class TimeLineText extends Component {
|
|
|
this.top = lastHeight + "%";
|
|
|
console.log("this.top", this.top);
|
|
|
}
|
|
|
-
|
|
|
+ componentDidCatch(error) {
|
|
|
+ console.error("error", error);
|
|
|
+ }
|
|
|
createTimeLine() {
|
|
|
if (!this.timeline) {
|
|
|
+ console.log("createTimeLine");
|
|
|
const start = this.props.keyframes[0].start;
|
|
|
const end = this.props.keyframes[0].end;
|
|
|
const dif = end - start;
|
|
|
@@ -123,41 +139,28 @@ export class TimeLineText extends Component {
|
|
|
const gapDiff = lastStart - end;
|
|
|
const timeRes =
|
|
|
(lastEnd - start) * (parseFloat(this.props.parentHeight) - 100);
|
|
|
- console.log("timeRes", timeRes);
|
|
|
|
|
|
- // var t = this.props.keyframes[0].start,
|
|
|
- // n = this.props.keyframes[0].end,
|
|
|
- // r = n - t,
|
|
|
- // a =
|
|
|
- // this.props.keyframes[this.props.keyframes.length - 1]
|
|
|
- // .start,
|
|
|
- // i =
|
|
|
- // this.props.keyframes[this.props.keyframes.length - 1].end,
|
|
|
- // o = i - a,
|
|
|
- // l = a - n,
|
|
|
- // s = (i - t) * (parseFloat(this.props.parentHeight) - 100),
|
|
|
- // debugger;
|
|
|
+ const flag = `+=${timeRes}%`;
|
|
|
+ console.log("timeRes", flag);
|
|
|
|
|
|
this.timeline = gsap.timeline({
|
|
|
scrollTrigger: Object.assign(
|
|
|
{
|
|
|
trigger: this.containerRef.current,
|
|
|
start: "top top",
|
|
|
- end: "+=" + timeRes + "%",
|
|
|
- onEnter: () => {
|
|
|
- // console.warn("onEnter");
|
|
|
- },
|
|
|
+ end: flag,
|
|
|
},
|
|
|
this.props.trigger
|
|
|
),
|
|
|
});
|
|
|
for (var i = 0; i < this.props.keyframes.length; i += 1) {
|
|
|
const cFrame = this.props.keyframes[i];
|
|
|
- 1 === i &&
|
|
|
- gapDiff > 0.001 &&
|
|
|
+ if (1 === i && gapDiff > 0.001) {
|
|
|
this.timeline.to(this.containerRef.current, {
|
|
|
duration: gapDiff,
|
|
|
});
|
|
|
+ }
|
|
|
+
|
|
|
if (cFrame.type === "set") {
|
|
|
this.timeline.set(
|
|
|
this.containerRef.current,
|
|
|
@@ -171,16 +174,13 @@ export class TimeLineText extends Component {
|
|
|
duration: dif,
|
|
|
})
|
|
|
);
|
|
|
- } else {
|
|
|
+ }
|
|
|
+ if (cFrame.type === "to") {
|
|
|
this.timeline.to(
|
|
|
this.containerRef.current,
|
|
|
- Object.assign(
|
|
|
- Object.assign({}, cFrame.animation),
|
|
|
- {},
|
|
|
- {
|
|
|
- duration: lDif,
|
|
|
- }
|
|
|
- )
|
|
|
+ Object.assign(cFrame.animation, {
|
|
|
+ duration: lDif,
|
|
|
+ })
|
|
|
);
|
|
|
}
|
|
|
}
|
gemercheung