[onStart() function fires twice on tween]

Hey guys I have a very weird issue happening. First I was trying to create a CodePen but I can't replicate the issue there.

 

I created a simple code example, so I have a tween on a timeline and I need functionality when the tween starts, the problem is that the onStart() function being trigger twice for some reason. First I thought that my function was being called twice but that is not the case. I did some research and I found similar issues but way back.

Since I don't have a codepen to show, this is the example code that I have

 

nextSlide(){
  console.log('enter function')

  gsap.timeline()
    .to(this.ImageSections[this.currentSection], {
    onStart: ()=>{
      console.log('enter OnStart() Timeline')
    }
  })
}

 

And this is the console log.

So I can see my function is being trigger once, but the onStart() is being called twice for some reason

 

 

[SplitText how to avoid text inside buttons]

@GreenSock The border class is there just for testing purposes. I can add a class to the paragraph that has the button on my real case project but I can't a class for every paragraph that doesn't have a button

[SplitText how to avoid text inside buttons]

Hey guys, I'm using SplitText plugin to show like a typing animation, the problem is that sometimes I have buttons inside the paragraph and the plugin is also typing those character when I don't need the text inside the buttons to have that animation.

 

It's there a way to get avoid that text to be splited?

 

I try several techniques, one was to remove the paragraph with the buttons outside of the SplitText animation, the problem there is that I need the movement to the next line

See the Pen bGWNVbY?editors=1010 by godhandkiller (@godhandkiller) on CodePen

[Tween translate overwriting css properties]

@OSUblake @GreenSock Thank you for the response. I was able to update my markup to make work but thank you for the information, this will help me in the future.

[Tween translate overwriting css properties]

Hey guys, I have a problem with a tween. I have a SVG with some tailwind css and there is breakpoints where I center the absolute positioned SVG but whenever I apply the y property, gsap uses a translate instead of translate-y which causes my SVG to not be centered anymore because it overwrites my x value.

 

How can I tell gsap to not apply any CSS on the x axis?

See the Pen zYwKRev?editors=1010 by godhandkiller (@godhandkiller) on CodePen

[TextPlugin typing bottom up animation]

@mikel It's there a way to skip text on the SplitText plugin?

 

 

On this example I have 2 buttons on a paragraph but SplitText is animating the text inside the buttons, is there a way to not do that only on the buttons text?

See the Pen bGWNVbY by godhandkiller (@godhandkiller) on CodePen

[TextPlugin typing bottom up animation]

I was able to achieve my desired behavior, this is the updated codepen

 

[TextPlugin typing bottom up animation]

@Trapti I was able to update my codepen

See the Pen bGWNVbY by godhandkiller (@godhandkiller) on CodePen

So whenever the line finish I try to move the master timeline up, but it only moves once, any Idea how can I make it so it keeps moving up?

 

@OSUblake thank you! i read the documentation and I was able to change it to 'from'

[TextPlugin typing bottom up animation]

11 hours ago, Trapti said:

Hey, 

 

I tried doing it with split text. One timeline is for animating the texts, and other for taking the container up. Adjust the time and distance according to your actual text. Hope this helps. 

 

 

 

Thank you for the answer, I have a question, I notice you're using 'staggerFrom' but isn't that an old function? I have use that with gsap3

 

Also is there a way to move the text up when the line finish writing the text?

[TextPlugin typing bottom up animation]

Hey guys, I have a problem and I can't find a solution on the TextPlugin documentation.

 

I have this section that is going to have text (the text is coming from a WYSIWYG so it's going to have a lot of HTML tags) and I need to create like a typewriting effect, the text is going to start from the bottom and is going to go up. I added a video so you can see the effect I'm looking for, the problem is that on the video it doesn't show that, but I need to animate individual characters.

 

I was testing the plugin but I don't see a lot of properties that I can use to create this effect, so is it possible to do it with this plugin? Or should I be using something else?

 

I added two examples on the codepen, on one I get the animation but only for the lines, no the characters. And on the second example I only get the last line animated, can't make to other text to appear

 

 

See the Pen bGWNVbY?editors=1010 by godhandkiller (@godhandkiller) on CodePen

[How to create a tearing tape animation]

22 minutes ago, Cassie said:

Heya! It'll need some tweaks as Mikel had some inline transforms I was a bit puzzled by

But this should set you off on the right foot. Masking 🥳
 

 

Thank you for this implementation, I'll try to make it work and get back to you if I'm successful (or not!)

[How to create a tearing tape animation]

 

hey @mikel I want to thank you for the great example. Even tho I was able to implemented  on my project It got more complex than I initially thought.

 

This is a very raw example of what I have on my project. So basically I have images representing tape, so the the main one (horizontal one) is going to be on top of the other images, so by using your implementation I have a white shape covering the images underneath

I understand the complexity of this and I run out of ideas of how to implemented, do you have another idea that I my try?

 

See the Pen gOWONwG by huzzidiel (@huzzidiel) on CodePen

[How to create a tearing tape animation]

Hello guys, sorry I don't have a codepen for this but I have no idea how to even start with this.

 

I need to do like a "tape tearing" animation but I don't know if it's possible with gsap