Jump to content
Search Community

GSAP Landing page and LocalStorage

Tonycre8 test
Moderator Tag

Recommended Posts

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

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

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)
        }
      })
    }
  }, [])

 

 

 

 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...