MohammedLR

Thanks! That was it.

I have developed this animation in CodePen but when I try to create a local HTML, CSS and JS it is not working. I think I am missing an installation line in the code, because I have the exact same code in the Pen and in my local files and the only difference relies in the ability to add a external script in the CodePen settings. Here is the code I have in my local files. https://bit.ly/3rLnj3k

Sorry, let me try that again. The animation works like a charm, but the background image does not move. What I am trying to achieve is: scrolling down unveils progressively the rest of the background image just as it happens with any common static web page + having the scrollTrigger titles animation happening at the same time. Right now the scrollTrigger is happening but the background remains exactly the same. Here's the codepen, but I think that it is easier to understand in my previous video. https://codepen.io/cacabla/pen/XWePBMx Thanks again!

Thanks! I adjusted the duration and I'm pretty happy with the result. To finish off... I wanted the animation to occur at the same time that you scrolled through the page and right now the background is completely static. Not only it is static, but also it is not showing the whole page. It seems that the JS is cropping the page height, because when I open the HTML without it I can see the full background image. https://streamable.com/ib8ul4

Okey! Almost there, just one minor adjustment. Is there any way to increase the time that the 2 title appears? As soon as it appears it fades out. Thank you so much! https://codepen.io/cacabla/pen/jOGvMZo

Amazing! Thank you very much

Thanks! That looks great. For some reason the codepen you sent doesn't work for me but changing the JS trigger it did! I also added a short delay to avoid them overlapping and some Y movement. Just one quick question, how would you add a third element? I tried copying the ".from(".texto2"..." block and it didn't work. https://codepen.io/cacabla/pen/RwLYazw

Hello! I'm new to GSAP and kind of a stranger to code. I'm struggling a little bit trying to achieve a basic animation, so I'm hoping someone in this forum could help me! I'm looking to achieve a very simple effect: I have two titles pinned and I want the first one to fade out in the same exact moment that the second title appears. In order to do so I have generated an invisible container that works as a trigger. When it enters the viewport, the animation occurs. So far I've managed to get here, but no matter what number I specify for duration, the titles appear immediately, with no transition at all. Any idea why this is occuring? Thanks!