Jump to content
Search Community

animating using .from has weird behavior

yasserzakaria1993 test
Moderator Tag

Recommended Posts

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

 

image.png.eaa14de11f8c1ccbc564eb7f00e87c04.png

 

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

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. 

 

  • Like 2
Link to comment
Share on other sites

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!

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