Sadiq Shaikh

Thanks @Cassie, This helped , thanks for simplifying!

Hello , If you are getting the error in the console, Make sure to add you js file below the cdn links. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script> <script src="/js/app.js"></script> Something like this

thanks @Cassie, I thought initially it was just that it observer on particular trigger and then does the animation , but certainly it is very complex and far away from my understanding.. lol, thanks any ways for the solution you guys have provided!

Thanks @Rodrigo, The position property was something new, thanks for pointing out, however i still think what i am looking for can be done using observer property itself, the position property defines the position and switches the timeline, what i require is this animation to be on one scroll.

Hello Everyone, I need to animate the codepen so that only one scroll animates it (as far as i know, GSAP observer does it but i cannot find much reference how to do it. and failed miserably) Right now it is linked to the scroll but i need so that every single scroll event animates it Below are examples, which i definetely couldnt understand https://codepen.io/GreenSock/pen/oNdNLxL https://codepen.io/GreenSock/pen/XWzRraJ above are the reference what i am looking for, Below will be my codepen so you guys can help me. any help will be appreciated!