Sirisha Pendem

reduceWhiteSpace:false is indeed what I was looking for. Thank you for pointing it out.

I'm trying to achieve typewriter animation using split text plugin. If my initial text contains white spaces, the split text plugin ignores white spaces while splitting into divs. Any way I can achieve typewriter animation keeping the white spaces intact? Thank you.

Hi, I'm trying to implement the following effect from animista https://animista.net/play/entrances/slide-in-elliptic Here the transform origin property changes from "50% 100%" to "50% 1400px" But if I give the same values to gsap, the transform origin property remains at the initial value and doesn't change. How do I animate a css property whose values differ in units? Thanks in advance.

Hey Zach, thanks for your reply. With rotate3d, it's possible to specify the axis of rotation, where as rotateX,rotateY only rotate about x,y axes. In my case , I want to achieve one full rotation of an element about the diagonal axis.(https://animista.net/play/entrances/rotate-in/rotate-in-diag-2) . Using rotate3d, I could specify the diagonal axis easily like rotate3d(width/height, 1, 0, rotationAngle). And varying the rotation angle from 0 to 360 deg would give me the correct animation. Do you suggest any other way of achieving one full rotation about the diagonal axis using gsap?

Hi, I want to achieve animation similar to https://animista.net/play/entrances/rotate-in/rotate-in-diag-2 If I give the following properties to gsap, I expect the object to a complete rotation. But in this case the animation doesn't even start playing { transform: "rotate3d(-4.9, 1, 0, 0deg)" }, { transform: "rotate3d(-4.9, 1, 0, 360deg)", duration: 1 } Any help is appreciated. Thank you.

I want to add timing function: ease for the animation as present in https://animista.net/play/entrances using GSAP. Looking forward to answer

Thanks for the response. Here's the final implementation. Animating each list item separately. Typewriter: https://codepen.io/cjayanth95/pen/ExyVZvq Sample text delivery animation: https://codepen.io/cjayanth95/pen/RwRWGVJ

Hi, I have some bulleted text with a background color. When I try to animate this using split text plugin, I could animate individual chars. But I'm unable to remove the background color and bullets, so that I can show them only when the text corresponding to list items is being shown. Basically I want the background color to be present only when the corresponding list item is being shown. Any tips on how to achieve this is appreciated. Thank you.