Text Split animation not working

[jo85]

Hello everyone,

I would like to animate a simple paragraph withe the class "text-medium" with gsap textsplit line.

unfortunately, all the lines slide over each other and there is a line above the text. see here: 

https://johannes-berlin-1af661.webflow.io/

 

the code is: 

 

<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

<script>
let typeSplit = new SplitType('p.text-medium', {
  types: 'lines, words, chars',
  tagName: 'span'
})

gsap.from('p.text-medium .line', {
  y: '100%',
  opacity: 0,
  duration: 0.5,
  ease: 'power1.out',
  stagger: 0.1,
  
})
</script>

where is the error? thanks again for your help...

[Toso]

hi @jo85 it would be great if you could share your demo in Codepen or something, 

 

also, you are using SplitType and that's not related to gsap,

gsap plugin called SplitText 

https://gsap.com/docs/v3/Plugins/SplitText/

 

 

and in the code you are providing you can try to remove the extra space in the 'lines,words,chars'  and try to make it work like that also no need to split it to chars if you won't animate the chars

and make sure if there is any other css doing any conflicts

 

let typeSplit = new SplitType('p.text-medium', {
  types:'lines,words,chars',
})

gsap.from('p.text-medium .line'{
  yPercent: 100,
  opacity: 0,
  stagger: 0.1,
})

 

i would recommend switching to SplitText It is more flexible, stable, and up to date, I am not against Split-type I worked with it many times but it creates some issues in SSR and also you can notice they don't update or fix old bugs 

 

It is great and I appreciate everyone's effort and the contributors but in my opinion, it's not a great option in the long run 

[jo85]

Thank you very much for your quick help @Toso

and thanks for the hint regarding splittype vs. spilttext...

unfortunately it still doesn't work with the adjustments in your code. the lines still animate on top of each other. do i have to set spans in the paragraph?

otherwise other solutions?

[Toso]

if you can create a codepen  demo it would be easier to debug the code

[Toso]

btw the line has a style 1px height and don't forget to add font-kerning in CSS