Video + text appearing
Hello,
I wanted to have video controlled on scroll which I found a good an example and I just took it for testing purposes. I am happy with how it is working. What I wanted to achieve is - to add a text appearing and dissappearing so you have feeling that you are flying through the text - one paragraph by one.
I added a codepen as an example - but the thing is - my first paragraph is not shown at all and the second and third are for the short period shown - I tried to control them with the
Ahh yeah I see. In that case is better to create all the texts animations using a loop:
let tl = gsap.timeline({/*...*/});
const texts = gsap.utils.toArray(".text-p");
texts.forEach((text, index) => {
tl
.from(text, { scale: 0, autoAlpha: 0, duration: 1, })
.to(text, { scale: 5, autoAlpha: 0, duration: 1, }, ">+=1")
});
The reason for the video seems to be blocked is because the durations don't match. The total duration of all your text animations is far longer than the du
