Opacity immediately 0 when animation starts

[mariovde]

Hi all,

 

Getting my feet wet with GSAP for the first time and the results look promising

BUT...

I am bumping into an opacity issue.

 

I have a shadow-png positioned underneath another image (phone).

What I am trying to do is, when the phone moves up, I want the shadow png to become more transparant. But, when that animation starts, the opacity is immediately 0, instead of animating to 0. 

 

The animations here are:

- a laptop slides in from the left

- a phone slides in from the right

- the phone's shadow slides in as well

- when the scrolling begins, the phone needs to move up

- and the shadow needs to become more transparent. 

 

And that last animation immediately starts at 0.

 

What am I doing wrong?

 

Thanks for the advice!

 

 useLayoutEffect(() => {
        const laptop_animation = tl.from(sectionone_laptop_ref.current, {
            left: "-200px",
            opacity: 0,
            delay: 1,
        });
        const phone_animation = tl.from(
            sectionone_phone_ref.current,
            {
                left: "480px",
                opacity: 0,
            },
            "<",
        );
        const shadow_animation = tl.from(
            sectionone_phone_shadow_ref.current,
            {
                left: "480px",
                opacity: 0,
            },
            "<",
        );

        const parallax_animation_phone = tl.to(sectionone_phone_ref.current, {
            top: "0px",
            scrollTrigger: {
                trigger: "#page",
                start: "top top",
                end: "+=100%",
                scrub: true,
            },
        });
        const parallax_animation_phone_shadow = tl.to(
            sectionone_phone_shadow_ref.current,
            {
                opacity: 0,
                scrollTrigger: {
                    trigger: "#sectionOne",
                    start: "31% 30%",
                    scrub: true,
                    markers: true,
                },
            },
        );

        return () => {
            phone_animation.kill();
            shadow_animation.kill();
            laptop_animation.kill();
            parallax_animation_phone.kill();
            parallax_animation_phone_shadow.kill();
        };
    }, [
        sectionone_laptop_ref,
        sectionone_phone_ref,
        sectionone_phone_shadow_ref,
    ]);

 

[mariovde]

Ok, the fix is using .fromTo

This code works...

but when I change the 0.7 to sectionone_phone_shadow_ref.current.style.opacity, it doesn't work... I want to use the value of the CSS as my starting point, instead of hard-coding the start value in the animation.

 

const parallax_animation_phone_shadow = tl.fromTo(
            sectionone_phone_shadow_ref.current,
            {
                opacity: 0.7,
            },
            {
                opacity: 0,
                scrollTrigger: {
                    trigger: "#sectionOne",
                    start: "31% 30%",
                    scrub: true,
                    markers: true,
                },
            },
        );

[OSUblake]

Welcome to the forums @mariovde

 

17 minutes ago, mariovde said:

but when I change the 0.7 to sectionone_phone_shadow_ref.current.style.opacity

 

I'm not exactly sure what you mean. If you're trying to get the CSS value, it will not be on the style object. That's only for inline styles. You'd need to get the computedStyle, or use GSAP's getProperty method.

 

Also, you don't need to use strings for px values as that's the default.

 

left: "-200px",
  
left: -200

 

And I recommend using x and y over left and top for better and smoother performance.

 

[OSUblake]

Also, check out our React guide. It shows how to limit the amount of refs you need.

 

 

[mariovde]

Thanks for the reply and extra info!

Got it to work !

 

will also check the react guide 👍