Tonycre8 Posted July 5, 2020 Share Posted July 5, 2020 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? Link to comment Share on other sites More sharing options...
Tonycre8 Posted July 5, 2020 Author Share Posted July 5, 2020 How typical of me, seems as if I've already solved it myself. Let me go through what I did for any other spectators: export default function App() { let app = useRef(null); let loader = useRef(null); useEffect(() => { TweenMax.to(app, 0, {css: {visibility: "visible"}}) var animPlayed = localStorage.getItem("loadingAnimPlayed"); if (!animPlayed) { console.log("Loader run"); TweenMax.from(loader, 2, { opacity: 1, onComplete: function() { localStorage.setItem("loadingAnimPlayed", true) } }) } }, []) I moved my local storage code within the useEffect hook, and then change the animation from TweenMax.to() to TweenMax.from(). This is a viable solution. I couldn't find any solution like this elsewhere on google so, I guess here it is for any unsuspecting problem hitters. Link to comment Share on other sites More sharing options...
OSUblake Posted July 6, 2020 Share Posted July 6, 2020 TweenLite, TweenMax, TimelineLite, and TimelineMax are deprecated. You should use the new syntax. import { gsap } from 'gsap' export default function App() { let app = useRef(null); let loader = useRef(null); useEffect(() => { gsap.set(app, {visibility: "visible"}) var animPlayed = localStorage.getItem("loadingAnimPlayed"); if (!animPlayed) { console.log("Loader run"); gsap.from(loader, { duration: 2, opacity: 1, onComplete() { localStorage.setItem("loadingAnimPlayed", true) } }) } }, []) 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now