Hi guys, a bit new to this gsap thing.
I saw a few threads around here talking about how to use gsap for landing animations that also utilise localstorage.
I have some code at the moment for this, but it seems as if gsap is breaking on the initial load, cancelling the animation entirely
import React, {useRef, useEffect} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Nav from './nav'
import {TweenMax} from 'gsap'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root');
);
export default function App() {
let app = useRef(null);
let loader = useRef(null);
var animPlayed = localStorage.getItem("loadingAnimPlayed");
console.log(animPlayed);
if (!animPlayed) { // This is the localstorage animation to be run.
console.log("Loader run");
TweenMax.to(loader, 1, {
opacity: 1,
onComplete: function() {
localStorage.setItem("loadingAnimPlayed", true)
}
})
}
useEffect(() => {
TweenMax.to(app, 0, {css: {visibility: "visible"}})
}, [])
return (
<>
<div className="loader" ref={el => {loader = el}}></div>
<div className="page" ref={el => {app = el}}>
<div className="header">
<Nav />
</div>
</div>
</>
)
}
I get a series of errors on the first load, when the condition of the animation are met, the main one being:
"TypeError: Cannot add property _gsap, object is not extensible"
I'm not sure how to fix my code in order to get the animation to run. Any ideas?
