47 lines
1.2 KiB
JavaScript
47 lines
1.2 KiB
JavaScript
import React, { Component } from "react";
|
|
import "../assets/stylesheets/bubble.scss";
|
|
import { AnimationOnScroll } from "react-animation-on-scroll";
|
|
|
|
export default class Bubble extends Component {
|
|
render() {
|
|
return (
|
|
<div
|
|
// style={{
|
|
// marginLeft: `${this.props.left}`,
|
|
// paddingTop: `${this.props.top}`,
|
|
// }}
|
|
>
|
|
<div className="bubble">
|
|
<AnimationOnScroll
|
|
className="bubble_main"
|
|
animateIn="animate__fadeInUp"
|
|
animateOnce="true"
|
|
duration={1}
|
|
delay={0}
|
|
>
|
|
<h1>{this.props.h1}</h1>
|
|
</AnimationOnScroll>
|
|
<AnimationOnScroll
|
|
className="bubble_main"
|
|
animateIn="animate__fadeInUp"
|
|
animateOnce="true"
|
|
duration={1.2}
|
|
delay={0}
|
|
>
|
|
<h2>{this.props.h2}</h2>
|
|
</AnimationOnScroll>
|
|
<AnimationOnScroll
|
|
className="bubble_main"
|
|
animateIn="animate__fadeIn"
|
|
animateOnce="true"
|
|
duration={3}
|
|
delay={500}
|
|
>
|
|
<div>{this.props.children}</div>
|
|
</AnimationOnScroll>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|