Maniak Development

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

@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

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

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

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?

@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? https://codepen.io/godhandkiller/pen/bGWNVbY

I was able to achieve my desired behavior, this is the updated codepen https://codepen.io/godhandkiller/pen/bGWNVbY?editors=1010

@Trapti I was able to update my codepen https://codepen.io/godhandkiller/pen/bGWNVbY 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'

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?

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 Screen Recording 2021-06-29 at 18.22.21.mov

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

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? https://codepen.io/huzzidiel/full/gOWONwG

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 Screen Recording 2021-06-25 at 17.11.30.mov