GSAP Observer property with Scrolltrigger

[Sadiq Shaikh]

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

[Rodrigo]

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:

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

 

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!

[Sadiq Shaikh]

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.

[Cassie]

By 'on one scroll' do you mean like the observer demo?

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

In which case are you struggling with understanding the logic in this demo? It is certainly more complex than scrollTrigger. Observer purely helps to handle listening to scroll/mouse/keyboard events. In terms of what happens on those events - well, that's up to you.

If I were you I'd start by taking a good look at this demo, and then by writing down (in english, pseudocode or your native language) what logic you want to happen on which event. Once you have that decided you should be able to start writing out some GSAP code!

If you have specific questions about the demo we're happy to answer them!

[Sadiq Shaikh]

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!

[Cassie]

Ah yeah, well - It is observing a particular trigger and then doing animation, but the logic is custom.

This is the observer bit...
 

Observer.create({
  type: "wheel,touch,pointer",
  wheelSpeed: -1,
  onDown: () => !animating && gotoSection(currentIndex - 1, -1),
  onUp: () => !animating && gotoSection(currentIndex + 1, 1),
  tolerance: 10,
  preventDefault: true
});

This is saying 'listen to wheel, touch and pointer' - onUp and onDown are callbacks that fire on those events. The gotoSection function is custom code though. That can be whatever you want, but that logic is yours to write as you need. That's not 'out of the box'

Here's a very simplified demo.

See the Pen VwBeEmj?editors=1111 by GreenSock (@GreenSock) on CodePen

[Sadiq Shaikh]

Thanks @Cassie,

This helped , thanks for simplifying!