dxcqcv Posted May 9, 2023 Share Posted May 9, 2023 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 Link to comment Share on other sites More sharing options...
Solution PointC Posted May 9, 2023 Solution Share Posted May 9, 2023 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. 3 Link to comment Share on other sites More sharing options...
dxcqcv Posted May 9, 2023 Author Share Posted May 9, 2023 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted May 9, 2023 Share Posted May 9, 2023 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! 2 Link to comment Share on other sites More sharing options...
PointC Posted May 9, 2023 Share Posted May 9, 2023 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. 3 Link to comment Share on other sites More sharing options...
dxcqcv Posted May 10, 2023 Author Share Posted May 10, 2023 Thanks to @Rodrigo and @PointC for rescuing me from the mud puddle. 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