[GSAP Observer property with Scrolltrigger]

Thanks @Cassie,

This helped , thanks for simplifying!

[RegisterPlugin is not working]

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
 

[GSAP Observer property with Scrolltrigger]

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!

[GSAP Observer property with Scrolltrigger]

12 hours ago, Rodrigo said:

Hi @Sadiq Shaikh and welcome to the GreenSock forums!

 

Based on the example you posted I switched everything to a single timeline using ScrollTrigger and the position parameter:

 

 

 

I recommend you to check GSAP Timeline's API in order to get a better grasp:

https://greensock.com/docs/v3/GSAP/Timeline

 

Finally take a look at this video in order to have a better approach for creating ScrollTrigger projects and why is better to sometimes just leave the ScrollTrigger part for the end and just focus on the animations at first:

 

Hopefully this is enough to get you started. Let us know if you have more questions.

 

Happy Tweening!

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.

[GSAP Observer property with Scrolltrigger]

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

See the Pen oNdNLxL by GreenSock (@GreenSock) on CodePen

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

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!

See the Pen xxJZVdw by ssadiq96 (@ssadiq96) on CodePen