Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

then() method is firing error "TypeError: Cannot read property '4' of null" #256

Open
Mertas opened this issue Aug 23, 2021 · 9 comments
Open

then() method is firing error "TypeError: Cannot read property '4' of null" #256

Mertas opened this issue Aug 23, 2021 · 9 comments
Labels
bug bug to fix

Comments

@Mertas
Copy link

Mertas commented Aug 23, 2021

Rect environment, this is a piece of my code. I cant make then to work. What am I doing wrong?

        progressAnimation.current = new mojs.Html({
            el: progressRef.current,
            width: {
                [progressRef.current.style.width || 0]: position * 100 + '%'
            },
            duration: 1000
        }).then({
            scale: {
                '1': '1.3'
            },
            opacity: {
                '1': '0'
            },
            duration: 1000
        }).play();
@Sandstedt
Copy link
Member

@Mertas I think you need to set an initial value for scale and opacity before you try to animate that value into the .then chain. Else mojs don't know what to animate from. Let me know if it helps.

@Mertas
Copy link
Author

Mertas commented Aug 23, 2021

No, unfortunately, id didn't, at least at first glance, getting the same error.

import React, { useRef, useEffect } from 'react';
import mojs from "@mojs/core";
import styles from './Progress.module.css';

function Progress({ position = 0 }) {
    const progressRef = useRef();
    const progressAnimation = useRef();

    useEffect(() => {
        if (!progressRef.current) return;
        progressAnimation.current && progressAnimation.current.reset();
        progressAnimation.current = new mojs.Html({
            el: progressRef.current,
            width: {
                [progressRef.current.style.width || 0]: position * 100 + '%'
            },
            duration: 1000
        }).then({
            opacity: {
                '1': '0'
            },
            duration: 1000
        }).play();
    });
    return (
        <div className={styles.container} styles={{'opacity':'1'}}>
            <div ref={progressRef} className={styles.progress} />
        </div>
    );
}

export { Progress };

@Mertas
Copy link
Author

Mertas commented Aug 23, 2021

Oh, I've made a mistake in the last comment, but still, opacity in styles didn't help

import React, { useRef, useEffect } from 'react';
import mojs from "@mojs/core";
import styles from './Progress.module.css';

function Progress({ position = 0 }) {
    const progressRef = useRef();
    const progressAnimation = useRef();

    useEffect(() => {
        if (!progressRef.current) return;
        progressAnimation.current && progressAnimation.current.reset();
        progressAnimation.current = new mojs.Html({
            el: progressRef.current,
            width: {
                [progressRef.current.style.width || 0]: position * 100 + '%'
            },
            opacity: {
                '1':'1'
            },
            duration: 1000
        }).then({
            opacity: {
                '1': '0'
            },
            duration: 1000
        }).play();
    });
    return (
        <div className={styles.container} >
            <div ref={progressRef} className={styles.progress} styles={{'opacity':'1'}} />
        </div>
    );
}

export { Progress };

@Sandstedt
Copy link
Member

@Mertas Can you make a Codesandbox or a Codepen with your problem? Tried putting your code here, and worked fine:

https://codesandbox.io/s/issues-256-gofsb?file=/src/MojsExample.js

@Mertas
Copy link
Author

Mertas commented Aug 23, 2021 •
edited

I've made my React app not inside a <div id="root">, but directly inside <body id="root">
Fixed that, and everything started to work fine.

That is one hell of a side effect!

Thank you for the support!

@Sandstedt
Copy link
Member

That's.. weird. But great you found the sollution yourself.

You're welcome!

@Mertas
Copy link
Author

Mertas commented Aug 23, 2021

I've tried different mo.js versions, different React versions - nothing helped.
The logical error was in the function _parseDeltaByGuess - it was guessing the names of Tween props that were coming from then (el, opacity, x, etc) as numerical or color values. Something wrong is with object assigning or something as a guess :)

@Sandstedt
Copy link
Member

Hmm okey. Then it sound like something we could look into. I will reopen this and tag as bug.

@Sandstedt Sandstedt reopened this Aug 23, 2021
@Sandstedt Sandstedt added the bug bug to fix label Aug 23, 2021
@xavierfoucrier
Copy link
Member

Hi all, I am in vacation right now, but I will give a try when I go back home 😉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug bug to fix
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Mertas @xavierfoucrier @Sandstedt