Jump to content
Search Community

play paused animation on click

Kutomba test
Moderator Tag

Recommended Posts

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

 

image.png.93d4d5e9f424a36dda084031abc3e61a.png

 

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

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.

 

 

 

  • Like 2
Link to comment
Share on other sites

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

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