GSAP Animation

[Aruna05]

Hi Team,

 

1. When I come to the fact and figure section in the viewport at the top of the page, only the body should be hidden, and the animation should complete and move to the next. The problem I'm facing is that when the fact and figure section comes to the viewport even 10% , the body is hidden, and also scrolling up and down is not proper.
2. I need animation from bottom to top as I attached the video for refers
 

Thanks in advance.
 

See the Pen xxvroag by arunakeshavaiah (@arunakeshavaiah) on CodePen.

[mvaneijgen]

Hi @Aruna05 welcome to the forum!

 

Your video is really low resolution, so it is hard to see what is going on. Maybe you can post the full resolution on something like YouTube and share the link here?

 

Your setup also seems overly complex. Most of the time it is easier to forget all about ScrollTrigger and first focus on the animation you want to happen. 

 

It looks like you want to make a card stacking effect. I have a post all about this and how you could set it up, check its logic below this seems a lot simpler to me and at least a lot easier to manage. Hope it helps and happy tweening! 

 

 

 

 

[Aruna05]

Here is the clear video

https://dev-podcast-upgradep2.pantheonsite.io//wp-content/themes/p2theme/

[Rodrigo]

Hi,

 

That link is throwing an error 🤷‍♂️

 

I agree with @mvaneijgen though in that your setup seems quite convoluted, for example you're removing the overflow from the body element and than adding it back again. Also you're combining jquery's animate to scroll to a certain position with ScrollTrigger, that could lead to unexpected results, better use our ScrollTo Plugin:

https://gsap.com/docs/v3/Plugins/ScrollToPlugin

 

Also another alternative is to use the Observer Plugin:

https://gsap.com/docs/v3/Plugins/Observer/

 

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Aruna05]

Video link: https://dev-podcast-upgradep2.pantheonsite.io/wp-content/themes/p2theme/assets/sr.mov

I found this: 

See the Pen poBRQRj by GreenSock (@GreenSock) on CodePen.

 
One each mouse wheel the card should get stacked, hope above video works
Thanks for the reply

[Rodrigo]

Hi,

 

The video link is throwing a 404.

 

If you want each card to move up/down on a single wheel event, just follow the pattern in the Observer demo:

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen.

 

You'll have to find a way to combine those two demos in order to work the way you intend. This is mostly related to how  you create your HTML structure and the CSS styling associated with it in order to be able to create the animation.

 

Happy Tweening!

[Aruna05]

See the Pen mdNMvGP by arunakeshavaiah (@arunakeshavaiah) on CodePen.

For each mouse wheel /scroll, a card should get stacked (I have five cards) after the end, it should move to the next section, and the same for unstack
The issue I'm facing is that when the user scrolls fast, the stack and unstack get messed up(Either the user scrolls fast or slow, it should work properly), and sometimes, they don't work properly.

Thanks