When I execute method `to`, method `from` fails, how do I fix it?

[dxcqcv]

I modified the official `splitText` example so that the text is not displayed by default, when the `show` button is clicked the text is displayed, when the `disappear` button is clicked the text disappears, then when I click the `show` button again the text is not displayed, I want to click the `disappear` button and then click the `show` button to display the text again, how should I modify it? Thanks

See the Pen qBJoqJp by dxcqcv (@dxcqcv) on CodePen

[PointC]

That's happening because your 'disappear' tween ends with an opacity of 0. Then you click the 'show' button which is a from tween, but it tweens from 0 to its current value which is also 0 so it appears nothing is happening. Probably best to use a fromtTo() tween if this is the way you want to wire this project.

https://greensock.com/docs/v3/GSAP/gsap.fromTo()

 

Happy tweening.

 

[dxcqcv]

8 hours ago, PointC said:

That's happening because your 'disappear' tween ends with an opacity of 0. Then you click the 'show' button which is a from tween, but it tweens from 0 to its current value which is also 0 so it appears nothing is happening. Probably best to use a fromtTo() tween if this is the way you want to wire this project.

https://greensock.com/docs/v3/GSAP/gsap.fromTo()

 

Happy tweening.

 

thx for your response,

 

and I'm very confused  "because your 'disappear' tween ends with an opacity of 0",  because I already set the dom  opacity is 1 before `from` method, right? like 

 .set('#quote', {opacity: 1})

so I think `show` button will be set opacity of 1 every time before it does tween 

 

and I also try to change to `fromTo` method, but it's not work, I don't know why, 

the demo is 

See the Pen yLRKQJV by dxcqcv (@dxcqcv) on CodePen

 

[Rodrigo]

Hi,

 

There are a few issues with your GSAP config. You're setting the from values in the to object:

  tl
    .fromTo(chars, {
      opacity: 0,
    }, {
      duration: 0.8,
      opacity: 1,
      scale: 0,
      y: 80,
      rotationX: 180,
      transformOrigin: "0% 50% -50",
      ease: "back",
      stagger: 0.01
    }
    );
  };

You're basically telling GSAP animate the elements from opacity 0, to:

• opacity: 1,
• scale: 0
• y: 80
• rotationX: 180

So basically that scale 0 will mean that the elements will not be visible. Also your quote element still has an opacity of 0.

 

This seems to work:

document.getElementById("show").onclick = function () {
  gsap.set("#quote", { opacity: 1 });
  tl.fromTo(
    chars,
    {
      opacity: 0,
      scale: 0,
      y: 80,
      rotationX: 180,
    },
    {
      duration: 0.8,
      opacity: 1,
      scale: 1,
      y: 0,
      rotationX: 0,
      transformOrigin: "0% 50% -50",
      ease: "back",
      stagger: 0.01
    }
  );
};

Hopefully this helps.

Happy Tweening!

[PointC]

27 minutes ago, dxcqcv said:

and I'm very confused  "because your 'disappear' tween ends with an opacity of 0",  because I already set the dom  opacity is 1 before `from` method, right? like 

 .set('#quote', {opacity: 1})

Yes - you set the #quote div to opacity:1, but you're animating the opacity of the characters which are all in their own div.  Think of the original #quote div as the parent and all the line,word and char divs as children created by SplitText. Hopefully that makes sense.

 

I think @Rodrigo's snippet above should get you all fixed up. Happy tweening.

[dxcqcv]

Thanks to  @Rodrigo and @PointC for rescuing me from the mud puddle.