Jump to content
Search Community

Invalid property autoAlpha set to 1 Missing plugin? (NVM autoAlpha error came from another component)

maxvia test
Moderator Tag

Recommended Posts

Hi, 

 

For some reason I have this warning poping up in my console. I was reading on the forum that it is appearing when you add this property next to a css object. I dont think it is the case for me?

 

Any idea where this is coming from? My component is usually working however sometimes I have a weird issue (I will have open another thread about it). 

 

Thank you !

 

import React, { useEffect, useRef } from "react";
import gsap from 'gsap'
import useWindowDimensions from './windowDimensions'
import { withPrefix } from 'gatsby';

const InstagramGallery = (props) => {

    let gridContainer = useRef(null)
    let grid = useRef(null)
    let centerPiece = useRef(null)
    let centerBlock = useRef(null)


    let gridBlock = useRef(null)
    gridBlock.current = [];
    const addToBlock = el => {
      if (el && !gridBlock.current.includes(el)) {
        gridBlock.current.push(el);
      }
    };

    let gridLayer = useRef(null)
    gridLayer.current = [];
    const addToGridLayer = el => {
      if (el && !gridLayer.current.includes(el)) {
        gridLayer.current.push(el);
      }
    };

    const { height, width } = useWindowDimensions();

    const scrollingArea = height * 3.3

    let positionCenter = height * 3.3  / 5

    useEffect(() => {
        gridLayer = gridLayer.current 
        gridBlock = gridBlock.current 


        let gridBlockNotCenter = 
            gridBlock.filter( e => {
                return e !== centerBlock
            })
        

        gridContainer = gridContainer.current

        gsap.to([gridBlockNotCenter], {display: 'none'});
        gsap.timeline({
            scrollTrigger: {
              trigger: centerBlock,
              start: 'top top',
              end: `+=${scrollingArea}`,
              scrub: true,
              pin: grid,
              anticipatePin: 1,
            }
          })
          .set([gridBlockNotCenter], {autoAlpha: 0, display: 'block'})
          .to([gridBlockNotCenter], {duration: 0.1, autoAlpha: 1}, 0.001)
          .from(gridLayer, {
            scale: 3.3333,
            ease: "none",
            transformOrigin: '44.9% 50%'
          });
         
          gsap.set(gridBlock, {backgroundImage: i => `url(${withPrefix(`/instagram/instagram-${i}.jpg`)})`});

        gsap.to([centerPiece, gridBlock], {autoAlpha: 1, duration: 0.5});

 
    })

    return (
        <>
        <div className="grid-container"
            style={{position: 'relative'}}
            ref={el => gridContainer = el}
            
        >
            <div className="grid"
                ref={el => grid = el}
            >
                <div className="gridLayer"
                    ref={el => addToGridLayer(el)}
                >
                <div className="gridBlock"
                    ref={el => addToBlock(el)}
                ></div>
                </div>
                <div className="gridLayer"
                    ref={el => addToGridLayer(el)}
                >
                <div className="gridBlock"
                    ref={el => addToBlock(el)}
                ></div>
                </div>
                <div className="gridLayer"
                    ref={el => addToGridLayer(el)}
                >
                <div className="gridBlock"
                    style={{backgroundColor: 'blue'}}
                    ref={el => addToBlock(el)}
                ></div>
                </div>
                <div className="gridLayer centerPiece"
                    ref={el => {
                        addToGridLayer(el);
                        centerPiece = el 
                    }}
                >
                <div className="gridBlock centerBlock"
                    ref={el => {
                        addToBlock(el);
                        centerBlock = el 
                    }}                
                ></div>
                </div>
                <div className="gridLayer"
                    ref={el => addToGridLayer(el)}
                >
                <a href="https://instagram.com/hotel_acr" target="_blank"
                        style={{width: '100%', height: '100%', cursor: 'pointer', zIndex: 10}}
                    >
                <div className="gridBlock"
                    ref={el => addToBlock(el)}
                >
                </div>
                </a>
                </div>
                <div className="gridLayer"
                    ref={el => addToGridLayer(el)}
                >
                <div className="gridBlock"
                    ref={el => addToBlock(el)}
                ></div>
                </div>
                <div className="gridLayer"
                    ref={el => addToGridLayer(el)}
                >
                <div className="gridBlock"
                    ref={el => addToBlock(el)}
                ></div>
                </div>
                <div className="gridLayer"
                    ref={el => addToGridLayer(el)}
                >
                <div className="gridBlock"
                    ref={el => addToBlock(el)}
                ></div>
                </div>
                <div className="gridLayer"
                    ref={el => addToGridLayer(el)}
                >
                <div className="gridBlock"
                    ref={el => addToBlock(el)}
                ></div>
                </div>
            </div>
        </div>
        <div className='row instagram-text'>
            <div className="col-sm-10 offset-2">
                <p className='small-title'>INSTAGRAM</p>
                <div style={{fontSize: 30}}>Follow Us</div>
                <div style={{fontSize: 30, fontStyle:'italic'}}>@hotel_acr</div>
                <div className="offset-1 button-area">
                    Join the adventure!
                    <div className="button">
                        FOLLOW US 
                    </div>
                </div>
            </div>
        </div>
        </>
    );
};

export default InstagramGallery;

 

Link to comment
Share on other sites

  • maxvia changed the title to Invalid property autoAlpha set to 1 Missing plugin? (NVM autoAlpha error came from another component)

Hi,

 

A couple of things. First you created three different posts for the same autoalpha issue, please try to keep it to just one, the admin/mod staff always try as hard as possible to answer every question as fast as possible, no need to re-post, you'll only caught out attention the wrong way.

 

Second, I see a couple of issues in the React side of your code. Your useEffect() hook doesn't have a dependencies array passed to it as the second parameter, that means that the entire code in that block will run everytime the state of the component is updated or a prop passed to it is updated. Perhaps pass an empty array to it?, or check the dependencies upon whose change you want/need to re-run the code. Normally an empty array (run when the component is mounted) should be enough. Also this part is a bit incorrect:

// No need to store a ref in a variable, is better to use a constant
// No need to assign the value of current, just pass it
// to the useRef
let gridBlock = useRef(null);
gridBlock.current = [];
let gridLayer = useRef(null)
gridLayer.current = [];

// The lines above could be set in just one like this
const gridBlock = useRef([]);
conts gridLayer = useRef([]);

useEffect(() => {
  // This is a big NO-NO
  gridLayer = gridLayer.current 
  gridBlock = gridBlock.current
  gridContainer = gridContainer.current
}, []);

Then inside the useEffect hook you're re-assigning the value of gridBlock and gridLayer. The returned object from useRef should not be mutated, that's why the current property exists in it, that is what you can mutate as much as you want. Right now you're replacing the entire object with a reference to one of it's own properties .You can create a new set of constants:

useEffect(() => {
  const currGridLayer = gridLayer.current 
  const currGridBlock = gridBlock.current
  const currGridContainer = gridContainer.current
}, []);

Also you have this:

let gridBlockNotCenter = gridBlock.filter( e => {
  return e !== centerBlock
});

gsap.to([gridBlockNotCenter], {display: 'none'});

The array.filter() method already returns an array, no need to wrap it around another array, right now you're telling GSAP, take the DOM nodes inside this array and set their display property to none, the thing is that the actual target is an array, which is a type of object so that is not an actual issue, just remove those brackets there and in all the other references in order to see if it works.

 

Finally, please create a reduced sample in codesandbox in order to have a live editable code to check.

 

Happy Tweening!!!

  • Like 4
Link to comment
Share on other sites

Hi @Rodrigo

 

Thank you for your fast and detailed reply! I am going to read it through and update accordingly.

Sorry if I posted the same question 3 times, didn't do it on purpose. I think there was an error with the forum's server this morning or may be it comes from my connection but I had some issues posting my question. 

 

Will keep you updated once I have fixed my errors 

 

Thanks

Link to comment
Share on other sites

@Rodrigo I am having some issues determining my container height. I was looking at the dom and I saw that the 'pin-spacer' has the perfect inline-styling height once the Dom is loaded. I was trying to use this value in order to give to my container height but didnt succeed. 

Anyway to access this value? 

 

Thank you

Link to comment
Share on other sites

One alternative would be to store the ScrollTrigger instance in a constant and after is created access the spacer property where you'll find the pin spacer element with the inline styles.

 

@GreenSock Jack, is it safe/recommendable to access the spacer property in a ScrollTrigger instance with the purpose of getting it's inline styles?

 

Another option is to directly access the parent of the element of the trigger property of the ScrollTrigger instance. Be aware that sometimes this could be another element, so you might want to wait a few milliseconds to access it or you'll get an unexpected result.

 

Happy Tweening!!!

  • 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...