Kutomba Posted August 20, 2020 Share Posted August 20, 2020 Hi Guys I have one element with multiple animations eg scale, fade, split etc , I am adding these animations on click , all other animations works fine except split text , Here is my split text animation const typingText = new SplitText(".text-box"), { type: "chars" }); const typing = gsap.from(typingText.chars, { autoAlpha: 0, duration:1, visibility:"hidden", repeat: -1, repeatDelay: 1, stagger: 0.1, immediateRender: false, paused: true //changing this to false it animate but I want to animate only click with play method }); Here is click button $(".btn").on('click', function(){ ....... switch (data) { case "typing": console.log("typing animation"); typing.play(); console.log('yoyo', typing.paused()) break; } }); Now when I click a button to add split text animation , animation is not playing, so checking typing.paused() state I get the following result on console Note: When I change parameter paused to paused:false it animate the text after loading the page , I want only on click with play method to add animation to my text , but its not playing the animation 🤐 What is wrong here ? Link to comment Share on other sites More sharing options...
elegantseagulls Posted August 20, 2020 Share Posted August 20, 2020 Hi @Kutomba, A basic codepen would be super helpful to debug this: Have you tried: typing.play(0); ? Or setup your tween as a timeline: const typing = gsap.timeline({repeat: -1, paused: true, ... }).from(...) Or just set your tween in your click event. Also: you don't need visibility: hidden' in your tween object, as autoAlpha does that for you. 2 Link to comment Share on other sites More sharing options...
Kutomba Posted August 20, 2020 Author Share Posted August 20, 2020 6 minutes ago, elegantseagulls said: Hi @Kutomba, A basic codepen would be super helpful to debug this: Have you tried: typing.play(0); ? Or setup your tween as a timeline: const typing = gsap.timeline({repeat: -1, paused: true, ... }).from(...) Or just set your tween in your click event. Also: you don't need visibility: hidden' in your tween object, as autoAlpha does that for you. Hi bro, its weird, when I create on code pen everything works fine, the same on my project when I remove the true to false I see its animating but otherwise when I want to play it on click its not animating , thanks for help, is there any way to change this state from true to false on click and the adding play() ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 20, 2020 Share Posted August 20, 2020 Please read the article on animating efficiently to better understand how to work with control methods. 1 Link to comment Share on other sites More sharing options...
Kutomba Posted August 20, 2020 Author Share Posted August 20, 2020 26 minutes ago, ZachSaucier said: Please read the article on animating efficiently to better understand how to work with control methods. Very good article , I love it , again thanks, by the way thanks to that articale I solved my problem using option number 8, now everything works like cham 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