Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
yasserzakaria1993

animating using .from has weird behavior

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 post
Share on other sites

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.

  • Like 1
Link to post
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 post
Share on other sites

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 post
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 post
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.

√ó