Styjun

I have been working on the side project, where I was requested to build a website with some animations around it. I choose to start with React (to learn a new framework and expand my knowledge).

The one important animation which I am following (or trying to replicate) is from Apple website.

When you start the webpage and scroll down the text appears smoothly by moving 60px and changing the opacity. Once it is in the view port.

I tried to do this with classes. However, I would get issues with classes as they would sometimes re-render my element or the component would not be visible when I refresh.

I also tried to use some fadeIn with setInterval, however, this works differently every time it is activated.

My component which uses the animations:

import React, Component from "react";
import "./SuccessStory.css";

class SuccessStory extends Component 
 state = 
 componentAppearsScrollUp: false,
 componentDisappearsScrollUp: false,
 componentAppearsScrollDown: false,
 componentDisappearsScrollDown: false,
 showComponent: false,
 translateMove: 60,
 opacity: 0
 ;

 fadingIn() 
 const timer = setInterval(() => 
 if (this.state.opacity >= 1) 
 clearInterval(timer);
 return;
 
 this.setState(
 opacity: this.state.opacity + 0.05
 );
 , 100);
 

 fadingOut() 
 const timer = setInterval(() => 
 if (this.state.opacity <= 0) 
 clearInterval(timer);
 
 this.setState(
 opacity: this.state.opacity - 0.05
 );
 , 100);
 

 componentDidUpdate(prevProps, prevState) 
 if (this.props.currentY < prevProps.currentY) 
 if (
 this.props.intersectionRatio > prevProps.intersectionRatio &&
 this.props.isIntersecting
 ) 
 if (this.props.intersectionRatio > 0.6) 
 console.log("Scrolling down enter");
 this.fadingIn();
 this.setState(
 componentAppearsScrollUp: false,
 componentDisappearsScrollUp: false,
 componentAppearsScrollDown: true,
 componentDisappearsScrollDown: false,
 showComponent: true
 );
 
 else 
 if (
 this.props.intersectionRatio < 0.8 &&
 this.props.intersectionRatio > 0.6
 ) 
 console.log("Scrolling down leave");
 this.setState(
 componentAppearsScrollUp: false,
 componentDisappearsScrollUp: false,
 componentAppearsScrollDown: false,
 componentDisappearsScrollDown: true,
 showComponent: true
 );
 this.fadingOut();
 
 
 else if (
 this.props.currentY > prevProps.currentY &&
 this.props.isIntersecting
 ) 
 if (this.props.intersectionRatio < prevProps.intersectionRatio) 
 if (this.props.intersectionRatio < 0.9) 
 console.log("Scrolling up leave");
 this.fadingOut();
 this.setState(
 componentAppearsScrollUp: false,
 componentDisappearsScrollUp: true,
 componentAppearsScrollDown: false,
 componentDisappearsScrollDown: false,
 showComponent: true
 );
 
 else 
 if (
 this.props.intersectionRatio > 0.6 &&
 this.props.intersectionRatio < 0.8
 ) 
 console.log("Scrolling up enter");
 this.setState(
 componentAppearsScrollUp: true,
 componentDisappearsScrollUp: false,
 componentAppearsScrollDown: false,
 componentDisappearsScrollDown: false,
 showComponent: true
 );
 this.fadingIn();
 
 
 else if (
 this.props.isIntersecting &&
 this.props.intersectionRatio > 0.9
 ) 
 this.fadingIn();
 
 

 render() 
 return (
 <div
 className=
 (this.state.componentAppearsScrollDown
 ? " story-appear-scroll-down "
 : "") +
 (this.state.componentDisappearsScrollDown
 ? " story-disappear-scroll-down "
 : "") +
 (this.state.componentAppearsScrollUp
 ? "story-appear-scroll-up "
 : "") +
 (this.state.componentDisappearsScrollUp
 ? " story-disappear-scroll-up "
 : "")
 
 style=
 opacity: this.state.opacity
 
 >
 <h1 className="success-story">The success story</h1>
 <h2
 className="success-story-text-one"
 // style=
 // this.props.isIntersecting && this.props.intersectionRatio > 0.8
 // ? opacity: 1 
 // : opacity: 0 
 // 
 >
 MobileLife brought together over 100 dedicated people based in
 Copenhagen and Vilnius to deliver innovative mobile solutions to the
 banking customers in Nordic markets.
 </h2>
 </div>
 );
 


export default SuccessStory;

My parent component which passes the intersection observer values to the child component:

import React, Component from "react";
import "./SecondPage.css";
import SuccessStory from "./SuccessStory";
import InView from "react-intersection-observer";
// import SuccessStoryText1 from "./SuccessStoryText1";
import SuccessStoryText2 from "./SuccessStoryText2";

class SecondPage extends Component 
 state = 
 isIntersecting: false,
 intersectionRatio: "",
 currentY: "",
 isIntersectingSecondText: false,
 intersectionRatioSecondText: "",
 currentYSecondText: ""
 ;

 render() 
 return (
 <div className="second-page">
 <div className="navigation-second" style= position: "sticky" />
 <div style= paddingTop: "25%", height: "60vh" >
 <InView
 threshold=[0.1, 0.2, 0.3, 0.4, 0.6, 0.75, 0.8]
 onChange=(inView, ref) => 
 this.setState(
 currentY: ref.boundingClientRect.y,
 isIntersecting: ref.isIntersecting,
 intersectionRatio: ref.intersectionRatio
 );

 // console.log("Inview:", inView, ref);
 
 >
 ( inView, ref ) => (
 <div ref=ref style= position: "sticky", top: "30%" >
 <SuccessStory
 isIntersecting=this.state.isIntersecting
 intersectionRatio=this.state.intersectionRatio
 currentY=this.state.currentY
 />
 </div>
 )
 </InView>
 </div>

 <InView
 threshold=[0.1, 0.2, 0.3, 0.4, 0.6, 0.75, 0.8]
 onChange=(inView, ref) => 
 if (ref.intersectionRatio > 0.1) 
 this.setState(
 currentYSecondText: ref.boundingClientRect.y,
 isIntersectingSecondText: ref.isIntersecting,
 intersectionRatioSecondText: ref.intersectionRatio
 );
 
 // console.log("Inview:", inView, ref);
 
 >
 ( inView, ref ) => (
 <div ref=ref>
 <SuccessStoryText2
 isIntersecting=this.state.isIntersectingSecondText
 intersectionRatio=this.state.intersectionRatioSecondText
 currentY=this.state.currentYSecondText
 />
 </div>
 )
 </InView>
 </div>
 );
 

//
export default SecondPage;

And here is Css which I am using for the animations:

.story-appear-scroll-down 
 animation: successStoryTextAppearScrollDown 0.3s linear;
 animation-fill-mode: forwards;


@keyframes successStoryTextAppearScrollDown 
 from 
 transform: translate3d(0, 60px, 0);
 
 to 
 transform: translate3d(0, 0, 0);
 


.story-disappear-scroll-down 
 animation: successStoryTextDisappearScrollDown 0.3s linear;
 animation-fill-mode: forwards;


@keyframes successStoryTextDisappearScrollDown 
 from 
 transform: translate3d(0, 0, 0);
 
 to 
 transform: translate3d(0, 0, 0);
 


.story-appear-scroll-up 
 animation: successStoryTextAppearScrollUp 0.3s linear;
 animation-fill-mode: forwards;


@keyframes successStoryTextAppearScrollUp 
 from 
 transform: translate3d(0, 0, 0);
 
 to 
 transform: translate3d(0, 0, 0);
 


.story-disappear-scroll-up 
 animation: successStoryTextDisappearScrollUp 0.3s linear;
 animation-fill-mode: forwards;


@keyframes successStoryTextDisappearScrollUp 
 from 
 transform: translate3d(0, 0, 0);
 
 to 
 transform: translate3d(0, 60px, 0);
 

I was thinking what would be correct way to activate this kind of animation which I am trying to replicate and it would look the same every time it is activated (as in Apple webpage). As I already have spent too much time on this, however, I am not able to get the results that I want.

I appreciate your help, and any tips or suggestions are welcome as this is my first post.