Trapti

Hi, Here is a simplified version of the effect. https://codepen.io/tripti1410/pen/gOKXgwr?editors=1010

Hi, This is very confusing. What exactly you want to animate using DrawSVG ?. In the given codepen there is no use of DrawSVG. The codepen you posted earlier I forked that. In the terminal line Draw SVG is working fine where it is being used. https://codepen.io/tripti1410/pen/LYrLVaG?editors=1010

Here is the https://codepen.io/tripti1410/pen/abKWxrR?editors=1010 I tried creating it with fromTo instead of startAt.

Hi, Convert this codepen animation to use GSAP 3. And then use scrollTrigger plugin to trigger the animation on "pie-SVG".

Hi, In the project style components is being used, which changes the class names to some random string. And in the code target class is .boxes so GSAP could not find that class name. Check the browser console it gives the warning. Below forked codesandbox of yours but without styleComponents. If you can figure out how to configure style components to not convert certain class it will work. Sorry I don't have in depth knowledge in that. https://codesandbox.io/s/target-multiple-componets-react-gsap-forked-1f9656?file=/components/ColoredBox.js

There is a syntax error. In HTML <h2 id="#heading2">Das ist ein krasser Text</h2> should be <h2 id="heading2">Das ist ein krasser Text</h2> change this and your animation will play https://codepen.io/tripti1410/pen/poKPKZx?editors=1010

Is this are you trying to achieve? I converted that to a timeline and added a position parameter "0" on each tween so that every tween start at 0. https://codepen.io/tripti1410/pen/YzvVXXy?editors=1010

Hi, You can use position parameter in a timeline to start the tweens at the same time.

Hi, The given codePen has many syntax error and scrollTrigger was not included. Also there was no HTML element ".first-move" which you are using to trigger this animation. I have corrected all the above in the below codePen. https://codepen.io/tripti1410/pen/qBKrvaj?editors=0011 I suggest you to read GSAP and scrollTrigger docs.

Hi, Your CodePen is not accessible. if I can see the pen working then it would be better. But here are a few points after reading the description. - If you want a dot to move on a circle. In the motionPath, there are two properties "start" and "end" using these two properties you can adjust the start and end of a moving dot. - Also, there is align and alignOrigin property you can use for adjusting the dot.

Hi, here is a forked pen https://codepen.io/tripti1410/pen/dyKvbOp?editors=1010 To see the effect clearly I added rotation for the underline. I have made changes in line 10 and 11 Hope this helps. Happy tweening!

Hi, you can adjust the position of the button https://codepen.io/tripti1410/pen/NWzdLgj?editors=1010

Calculate the duration of each tween and the overlapping of it and adjust. By default duration is 0.5 for each tween. Duration property on scrollTrigger will no work. Total duration of tl3 is 11*0.5 = 5.5. In the tl2 timeline if you give duration 1 to the first tween. So the total duration becomes 2.75. See what factor you can add to duration each tween to get 10. I hope this helps. I don't think there is a direct way to make total duration of a timeline except if you are using stagger.

Hi, Is this what you want to achieve https://codepen.io/tripti1410/full/xxzgqde onEnter syntax is wrong, it needs function. I added this opacity on scrub if you want you can remove also. If you want to add opacity on onEnter it will look something like this. Also there was a syntax error on your codepen I corrected that. onEnter: () => gsap.from(sticky, {opacity: 0.2, duration: 1})

Hey, You have js errors check console fix that.

I don't think you need two horizontal scroll as per the example site you have shown https://karinasirqueira.com/projects/mailchimp To me looks like you want to achieve like below pen. Just add your content ans style. Remove all the navigation. https://codepen.io/GreenSock/pen/bGexQpq Sorry if I understood your problem incorrect.

Thanks @mvaneijgen for this info I didn't know this. ?

In my pen autoRotate was commented out. If the solution is working for you then use that. autoRotate will rotate the object according to paths coordinates. You can choose to give numbers also like 90 or 180 how much ever you want to rotate. If it is set to "true" then gsap automatically figures out the amount of rotation it needs. Keeping "autoRotate: true" looks good in your case, so I uncommented that now in my pen.

Editor(Illustrator). I took the van image you used and make it facing right in the Illustrator. You can see HTML panel I have placed an inline SVG and used it to move along the path.

Here is a forked codepen. As per my knowledge, we cannot reflect using CSS. I changed the graphics direction in editor. For reverse I think you can use other graphic and move that for reverse and club these in a timeline. https://codepen.io/tripti1410/pen/ZEROvNQ?editors=1010

Here is working code https://codepen.io/tripti1410/pen/ZEROKBB?editors=0010

hey, The code is not correct. In gsap.to tween the target is ".char" class which is not being defined anywhere. If you want to define it, do this and use a class name. This class name will get applied to each character. const myText = new SplitType('#my-text', {type: "chars, words",charsClass: "yourCharClass"}) gsap.to(".yourCharClass", { .... }) Or simply access each character by doing this. const myText = new SplitType('#my-text', {type: "chars, words"}) gsap.to(myText.chars, { .... }) Please check documentation and code examples here.

The click handler for closing is on the ".hamburgerMenuClose" which does not exist. Below uses ".toggleClass" instead of ".addClass". Hope this is helpful. https://codepen.io/tripti1410/pen/YzvqWmQ?editors=1010

If you have below example CodePen then share that if it uses older GSAP code it will not be difficult to change it for GSAP 3. - a gradient changing to another gradient, and back –> but uses GreenSock v2 with the stagger function (which, apparently, doesn't exist with GSAP v3)

scrollTriger spelling is wrong.