yasserzakaria1993 Posted February 22, 2020 Share Posted February 22, 2020 Hi guys I really happy with gsap3, and I was waiting for it for very log time 🤩, but I now facing a very weird problem I'm animating some labels with gsap timeline.from to make them appear one by one "a really simple animation" but opacity is animating from 0 -> 0.003 or 0.06 also this is the same with scale from 0 -> 0.08 or something like this i'm using react-js but I don't think this is the problem useEffect(()=>{ labelsRef.current && tl .from(labelsRef.current.getElementsByTagName('mark'),{duration:1,opacity:0,stagger:1},0) .fromTo(labelsRef.current.getElementsByTagName('label'),{scale:0},{duration:0.5,scale:1,stagger:1, ease: "back.out(4)"},0.5) },[labelsRef.current]); when I animate the scale by fromTo everything works perfectly Am I doing anything wrong ???? Thank you very much See the Pen yLNVQXq?editors=0010 by mody-ydom (@mody-ydom) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 22, 2020 Share Posted February 22, 2020 Hey yasserzakaria1993 and welcome. What version of GSAP 3 are you using specifically? And can you please try to create a minimal demo of the issue? I can't seem to reproduce this behavior in my brief tests. 1 Link to comment Share on other sites More sharing options...
yasserzakaria1993 Posted February 23, 2020 Author Share Posted February 23, 2020 sorry for not providing a demo before Link to comment Share on other sites More sharing options...
OSUblake Posted February 23, 2020 Share Posted February 23, 2020 4 hours ago, yasserzakaria1993 said: when I animate the scale by fromTo everything works perfectly Am I doing anything wrong ???? Your demo has too much code, so I'm not going look at it, but this usually happens when a previous animation is interrupted or doesn't complete. from will create an animation from a value to the CURRENT value. If the current opacity is 0.06 when you create a from animation, then it is going to tween the opacity from 0 to 0.06. If you know the end value, then you should probably use fromTo. 2 Link to comment Share on other sites More sharing options...
yasserzakaria1993 Posted February 23, 2020 Author Share Posted February 23, 2020 maybe it is due to state is changing I will revise the code again Thank you for your helpful info about from functionality Link to comment Share on other sites More sharing options...
GreenSock Posted February 23, 2020 Share Posted February 23, 2020 Yep, if you add this inside your useEffect(), you'll see what Blake is talking about: if (labelsRef.current) { console.log(gsap.utils.toArray(labelsRef.current.getElementsByTagName("mark")).map(el => gsap.getProperty(el, "opacity"))); } That function is being called multiple times, interrupting the previous tween that's in progress. So it's just a logic thing, not a GSAP bug. The thing you've got to keep in mind when using from() tweens is that (as Blake said) it uses the CURRENT values as the destination ones, so in this case you're grabbing mid-tween values as the destination. Actually, some of them haven't even started animating yet but their opacity is set to 0 due to from() tweens having immediateRender: true (that's a good thing). And yes, it's always best to provide a reduced test case with only the absolutely essential code to reproduce the issue No worries. And thanks for being a Club member! 3 Link to comment Share on other sites More sharing options...
OSUblake Posted February 23, 2020 Share Posted February 23, 2020 Just a little demo. If you keep clicking fade, you'll see that it won't animate back to 1. See the Pen 8737c62b8f3253745552bba7992c58b4 by osublake (@osublake) on CodePen 2 Link to comment Share on other sites More sharing options...
yasserzakaria1993 Posted February 23, 2020 Author Share Posted February 23, 2020 you are the best guys ✌️ 1 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