Search the Community
Showing results for tags 'localstorage'.
Found 2 results
-
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?
-
Hello everyone, I have not been around in 8 years, since the foregone Flash days. But lately I have found my way back, again needing a pair of fancy green socks, so I have been recently lurking about trying to get my head around things again. What a great community this is with such awesome discussions, truly amazing talents and bright minds amongst the users. Its great to see Greensock still going so strong. In regards to Page Transitions: Recently I say this thread which make me think. I also spent time searching the forum pretty extensively, looking at various discussions and approaches. But in the end I still was left wondering -- I’m not sure if applicable but what about using localStorage as an approach ? Verse going the whole Single Page App (SPA) approach, etc., My thought is using localStorage in conjunction with timeline based functions for page “intro” and “outro” sequences specific to each page and saving the toggle state into localStorage to know which function or direction to play when coming or going between pages. Given GSAP’s powerful timeline capabilities, etc., it seems like it could be a viable option. Does this theory make sense, or am I missing the obvious in thinking to pair the two together? There seems to be very little discussion about localStorage or sessionStorage on the forum in general. So perhaps it would not be relative to how I am thinking it could be used, as it seems it would have already been discussed. I understand it begins to fall out of the scope of GSAP, but at least in my head they seem really applicable to be used alongside each other in many ways. Does anyone anticipate any drawbacks, issues, problems to this localStorage + GSAP approach for handling page transitions? If so please set my thinking straight. I would love to get some peoples thoughts, feedback or experiences before trying to go down the rabbit hole of pairing the two together. Especially if my initial thinking is flawed, and especially since I am just getting back into things after a long time away. Perhaps too much to chew off initially. Thanks in advance for any feedback anyone may offer, again great community!
