[Split text plugin ignoring white spaces]

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

[Split text plugin ignoring white spaces]

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.

See the Pen yLaRxVe by cjayanth95 (@cjayanth95) on CodePen

[Animate different units of transform origin property]

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.

See the Pen rNMLryR by cjayanth95 (@cjayanth95) on CodePen

[Animate rotate3d angle from 0 to 360 deg]

 

10 hours ago, ZachSaucier said:

With that being said, we don't recommend animating the transform property directly. Instead we encourage you to stick to just rotateX and rotateY to do the rotations that you need to do. That way you can combine them with other transforms if necessary (and I think it's easier to work with).

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?

 

[Animate rotate3d angle from 0 to 360 deg]

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.

 

See the Pen ZEpQPMb by cjayanth95 (@cjayanth95) on CodePen

[Timing Function ease in GSAP]

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

Looking forward to answer

[Animation with split text]

Thanks for the response.

Here's the final implementation. Animating each list item separately.

Typewriter: 

See the Pen ExyVZvq by cjayanth95 (@cjayanth95) on CodePen

Sample text delivery animation: 

See the Pen RwRWGVJ by cjayanth95 (@cjayanth95) on CodePen

[Animation with split text]

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.

See the Pen ZEOGMRL by cjayanth95 (@cjayanth95) on CodePen