mariovde Posted April 1, 2022 Share Posted April 1, 2022 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, ]); Link to comment Share on other sites More sharing options...
mariovde Posted April 1, 2022 Author Share Posted April 1, 2022 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, }, }, ); Link to comment Share on other sites More sharing options...
OSUblake Posted April 1, 2022 Share Posted April 1, 2022 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. Link to comment Share on other sites More sharing options...
OSUblake Posted April 1, 2022 Share Posted April 1, 2022 Also, check out our React guide. It shows how to limit the amount of refs you need. Link to comment Share on other sites More sharing options...
mariovde Posted April 1, 2022 Author Share Posted April 1, 2022 Thanks for the reply and extra info! Got it to work ! will also check the react guide 👍 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now