anotheruser

Sorry again , please check the following link , I rotated the text but the cursor point doesn't move with the text anymore. Is there a minor problem ?

@PointC, Is it possible to add them through gsap because these text are created dynamically by me through javascript. Also i tried your method which breaks the underline for spaces. please check the link, the text without the gsap effect and text with gsap effect looks different

Hi please check the following file , I have added text underline to the text and animated it , but the underline is not showing up. https://codepen.io/jeffin417/pen/gzBOLZ

Hi @Acccent. I have tried your method , it still appears shaky to me , Even in your demo

Awesome Codepen , I was waiting like whats next whats next , way to go , You were helping everyone when they need you , thanks , keep going !

Yeah I tried that after seeing your other post , But unfortunately Am seeing the same jumping text thing

Hi , I have a div where there is a text , I am trying to scale the div , but when scaling the text is shaking , Is there anything i am doing wrong ? It looks like the text keep on jumping , but i have not applied any tween to the text at all . only to the parent div. I have tested in chrome , this issue is coming only in chrome is suppose , in firefox it seems to appear smooth , (not sure , sometime it glitches)

Woah , Thats works wonderful , Thanks a lot

Hi, Thanks for that , but any luck on this? HI welcome <div>home friend</div> because your code doesnt work for this

Hi , Thanks for the reply ,I know there is extra div tag ,Unfortunately it is used to separate the break line in my case , I just wanna know is there anything possible along the same scenario I have? for example scenarios like the following might happen too and I need the following to be each line , Possible? <div>HI welcome</div><div>home friend</div></div>

Hi , You can see in the codepen that i am trying to animate each LINE to move from right to the current point , you can see that "HI", "welcome" "home" and "friend" should be each line , but what i am getting is "Home friend" as a same line , am i doing something wrong?

That link is redirected to the same page.

Is there any update on this?

I dont know why i went for that but i solved by setting the following TweenMax.set(svg, {xPercent: -50,yPercent: -50,x:xVal, y:yVal}); where xVal and yVal being the first points of the bezier.

Hi, I have been trying to tween an svg using bezier curve , In that example i created a path where i am trying to tween this , But i cannot tween from center or create an offset , what happens now is it moves to the left corner and then start tweening along the path , but i want to tween as it is , Yes i know that i can set xPercent, but no I do not want that , because it changes the position of the svg. Also I would be using dynamic SVG so i cant be using morphsvg plugin I worked in flash before using the following code Now i need the same for JS

Hey , the same user here , how to do the same in GSAP JS ?

Haha , yeah , thanks again for this , Yeah i hate SVG's but still had to use this for clipping , thank a ton .

Thanks again , is it possible to reverse the curve creation , now its clockwise , i need to do anticlockwise in your example i think it has to be done using startangle and sweep angle?

Woah , A zilllllllion thanks dude , I was exactly looking for this , You really are a superhero , Thank you very much , I was stumbling on this part for two days

@OSUblake Any suggestions ?

Hi , I have to clip a div using a svg circle and reveal it using radial wipe using greensock , it can be done using jquery which i have found an example shown in the codepen attached , I need to tween the same using greensock. Any help?

@Sahil The above codepen still hangs for me , Hangs big time , is it working perfectly for you ? because the zooming effect was very buggy , wait i will try to record it and send you if possible

@GreenSock

Am not Animating the elements. There are no elements , I have a div, where i will add three videos <div class="imgclass"> <!-- FIRST VIDEO --> <div class="videoTag" style="clip-path: url(" #svgTextPath0 ")> <video preload="auto " class="videoElement " src="http://techslides.com/demos/sample-videos/small.mp4"></video> </div> <!-- SECOND VIDEO --> <div class="videoTag " style="clip-path: url( "#svgTextPath1"); background-color: rgb(135, 113, 150); "> <video preload="auto " class="videoElement " src="http://media.w3.org/2010/05/sintel/trailer.mp4"></video> </div> <!-- THIRD VIDEO --> <div class="videoTag " style="clip-path: url( "#svgTextPath2"); background-color: rgb(201, 16, 173); "> <video preload="auto " class="videoElement " src="http://techslides.com/demos/sample-videos/small.mp4"></video> </div> </div> In the example above you can see that I have a div where i will add three videos like Splitscreen videos just like below. So now i have a div with three videos in it. Right? Now all i got to do is zoomin (scale to 5) the parentdiv (imgclass). So after zooming in( zoom the div , so the videos have to zoom too) and it will have to look something like the image which i have attached below. I think now you got what i mean , sorry for delayed response. Now i have acheived what i said , but when i am zooming in the animation is buggy. Also i have tried what you have said before (setting parent position to relative and child video compoentns position to absolute) and am still experiencing the issue. Am animating the parent div alone , not the video tags , I just need a smooth zoomin effect

Not a curtain effect , just zoomin the cameraitems div and zoom out var videoDiv = document.getElementById("cameraItems"); //zoom in t1.add(TweenMax.to(videoDiv, 4, { scaleX: 3, scaleY: 3, ease: Linear.easeNone }),3); //zoom out t1.add(TweenMax.to(videoDiv, 2, { scaleX: 1, scaleY: 1, ease: Linear.easeNone }),7);