Aamir Khan

here is the link, please check https://stackblitz.com/edit/gsap-react-basic-f48716-9ted8s?file=src%2FApp.js when I click to play animation, its not working

I am using reactjs and this is my code ( if (animations) { animations.seek(0); animations.play(); setIsPlaying(true); } else { if (gsapList.length !== 0) { const newAnimations = gsap.timeline(); let totalAnimationTime = 0; for (const element of gsapList) { let duration = (element.objToPass.keyframes[1].val - element.objToPass.keyframes[0].val) / 1000; let delay = element.objToPass.keyframes[0].val / 1000; const newTempObj = { ...element.objToPass }; delete newTempObj.keyframes; let objPassed = { duration: duration, delay: delay, }; Object.assign(objPassed, newTempObj); // Use the timeline to create and sequence your animations newAnimations.to(`#${element.elementName}`, objPassed, `<`); const endTime = element.objToPass.keyframes[1].val / 1000; if (endTime > totalAnimationTime) { totalAnimationTime = endTime; dispatch(addTotalAnimTimeToStore(totalAnimationTime)); } // When the timeline is completed, set isPlaying to false newAnimations.eventCallback("onComplete", () => { setIsPlaying(false); }); if (isPlaying) { // If it's already playing, just continue from the current progress newAnimations.play(); setIsPlaying(true); } const timerElement: any = document.getElementById("timer"); function updateTimer(progress: any) { const durationInSeconds = progress * totalAnimationTime; function formatTime(seconds: any) { const minutes = Math.floor(seconds / 60); const remainingSeconds = Math.floor(seconds - minutes * 60); const milliseconds = Math.floor( (seconds - Math.floor(seconds)) * 1000 ); const formattedMinutes = minutes.toString().padStart(2, "0"); const formattedSeconds = remainingSeconds .toString() .padStart(2, "0"); const formattedMilliseconds = milliseconds .toString() .padStart(3, "0"); return `${formattedMinutes}:${formattedSeconds}:${formattedMilliseconds}`; } const formattedTime = formatTime(durationInSeconds); timerElement.innerHTML = formattedTime; } function animate() { const progress = newAnimations.progress(); updateTimer(progress); requestAnimationFrame(animate); } animate(); } setAnimations(newAnimations); } } ) If total animation time that I set is 8 sec but animations take more than 12 sec to be completed.

I am moving a svg object from x position to y position on click on a button using gsap. I want when I click again on the button, that svg object should come to original x positon and move again to y position. I mean I want to repeat the animation only when I click on a button, how can I achive this feature. Please help.

Thanks

can I have this effect if I use div (html) instead of svg? If yes, please explain in codepen. how?

Hi, I want to create a effect on text like in the attached svg/image Lorem Ipsum is written on Trapezoid shape. Here is the link of my codepen(https://codepen.io/khanaamir/pen/wvEZNgz). I want to apply the same effect on text as Lorem Ipsum is having with the trapezoid in the attached svg. Please help. POV_3.svg

I am trying to apply 3d rotation animation on text in svg by selecting text by its id but its not working while when I select svg by query selector then its working. If there are multiple elements in an svg and I just want to apply 3d rotation animation on any one of them , how can I do ? Please help.

Is drawSVG plugin paid?? as I am unable to import drawSVG plugin. Please help

How can I import and use SplitText in my project

I am trying to add handwriting effect on path in svg. here is the link of my codepen. I am trying to do as Rodrigo suggested but I can not do. Could you please check where I am lacking https://codepen.io/khanaamir/pen/QWBVaZa

I was reffering to handwriting effect example. This one for typewriter animation, I understood. I am trying to do as jack suggested but still I am confused for handwriting effect. Please let me a very basic example if you have. Thanks in advance.

These example are very complex, could you please show me very basic example

yes, but I want letter by letter not word by word

This typewriter animation is happening on text element but in my svg I do not have text element instead I have path thatswhy I am having issue. Can you help to do typewriter animation on path in svg?

Hi, I am new to gsap and I am tyring to perform handwriting and typewriter animation on path as well as on text animation in svg using gsap. Please help

Hi, I am new to gsap. I want to apply fade up character animation on the text in the svg like it is animating in this (https://codepen.io/snorkltv/pen/bGqrJGN) example. but I want to select my text in my svg using id of the text element. Please help

https://codepen.io/khanaamir/pen/WNKjyQP This is the link of my codepen.

https://codepen.io/GreenSock/pen/aYYOdN avove is the link of my codepen. I have svg and I want to animate the text of that svg using id of text element. How can I apply fade up character effect on my text.

what types of animation can be done to text in svg using gsap.

Thanks. It helped.

I want to apply typewriter style effect to my text in svg. I am looking for help

Does GSAP provide typewriter style effect for SVG Text?