mikel

Hey TOM, Of course: https://codepen.io/mikeK/pen/Bazyaee?editors=1010 mySplitText = new SplitText("#quote", {type:"words,chars", wordsClass:"word++"}), ... .set('.word2', {color:'green'}) Happy applying ... Mikel

Hey @Dawid, Position the nav 'absolute' and use the percentage-based translation xPercent and yPercent: https://codepen.io/mikeK/pen/oNLNVJE Happy transforming ... Mikel

Hey @Devang Vala, Welcome to the GreenSock Forum. Which code? Where is your case? Please show it in a CodePen. Happy tweening ... Mikel

Hey @mkamarga, If the viewBox attribute is present and the width and height are set to 100%, all modern browsers adapt the graphic to the space available in the comprehensive container. Here a perfect tutorial of Sara Soueidan https://codepen.io/mikeK/pen/MWeWLzx Happy morphing ... Mikel

Hey @mkamarga, Welcome to the GreenSock Forum. The SVG #morph is aligned to the window height (height: 100vh) to fit perfectly into the CodePen here. Try instead of width: 100%. Happy morphing ... Mikel

Hey @Tom Roberts, You can also use charsClass, wordsClass or linesClass: Property Description charsClass String - A CSS class to apply to each character’s <div>, making it easy to select. If you add "++" to the end of the class name, SplitText will append an incremented number to each character’s <div>, starting at 1. For example, if charsClass is "char++", the div’s class for the first character would be "char1", the next would be "char2", then "char3", etc. Default: undefined. Happy splitting ... Mikel

Hey @JamesGrubb, I am not sure what exactly you want to achieve. This is how you could use GSAP attr : https://codepen.io/mikeK/pen/zYxgdRw Happy tweening ... Mikel

Hey @leGenti, Please take a look at the DOCS of GSAP ScrollTrigger and my example. Then you will understand how the structure for a ScrollTrigger works.

Hey @ihor__, Welcome to the GreenSock Forum. I would use two tweens to animate autoAlpha of the boxes per stagger. https://codepen.io/mikeK/pen/QWEWdaL?editors=1010 Happy scrolling ... Mikel

Hey @leGenti, If you would use GSAP ScrollTrigger, you could benefit from the scrub function. https://codepen.io/mikeK/pen/XWdwdeR?editors=1010 Happy scrolling ... Mikel

Hey @oligsap, Welcome to the GreenSock Forum. I am not sure what exactly you want to achieve. Here an option https://codepen.io/mikeK/pen/ExyYaye?editors=1010 Happy tweening ... Mikel

Hey @Ryosuke, You could fade in the individual boxes piece by piece. Then it runs in from the left. This is a kind of helper construction. There may be better solutions. https://codepen.io/mikeK/pen/af864b2472e234469cd4fb65b71bc7e3?editors=1010

Hey @Ryosuke, Increase the width of the boxes or add more boxes https://codepen.io/mikeK/pen/779c22fe2ea38589f02d7eb1d3220d48 Happy testing ... Mikel

Sure, that is the job of the GSAP modifiers. But you commented it out (??? line 22 ff). Happy weekend ... Mikel

Hey @Ryosuke, Take a look at the GSAP modifiers plugin and the new GSAP 3.0 https://codepen.io/mikeK/pen/oNXoOBq Happy tweening ... Mikel

... please don't forget motiontricks.com of @PointC.

Hey @midnightgamer, Check this example. Any Questions ? https://codepen.io/mikeK/pen/LYNKvzE?editors=1010 Happy tweening ... Mikel

Hey @midnightgamer, Please show us your attempts in the CodePen. Comment on your problems ... Every attempt brings you further Mikel

Hey @Love Kumar For sure. Check out the MotionPath DOCS.

Hey @Love Kumar, To animate an object like this, you need a path. And an image is not a path. So you could create an SVG that looks like your infinity symbol. Happy tewwning ... Mikel

Hey @kylerumble, Like this ... https://codepen.io/mikeK/pen/xxVoaoZ?editors=1010 If you want to start with 500px height https://codepen.io/mikeK/pen/MWyMPyg Happy tweening Mikel

Hey @midnightgamer, Just another approach ... https://codepen.io/mikeK/pen/ExKBNGv Happy studying ... Mikel

Hey @Love Kumar, Is it what you expect ??? https://codepen.io/mikeK/pen/oNxrzaz?editors=1010 Happy rotating ... Mikel

Hey @kylerumble, Look at this animation flow. Is it what you expect ? https://codepen.io/mikeK/pen/KKzjzVj Thanks for joining and happy tweening ... Mikel

Hey Zach, Thanks. https://codepen.io/mikeK/pen/XWdwxRN