ScrollTrigger stop scrolling

[rohit111AAA]

 

See the Pen VwRpOLG by Codingdata (@Codingdata) on CodePen

 

i am using only

 

html

css

 js 

[mvaneijgen]

Hi @rohit111AAA welcome to the forum! 

 

I've split your question to its own topic, from here

 

 

Due to the way you set up your animations (especially your CSS how you start with things) everything loses their starting points and gets all jumbled up. There are certain properties you are better of not animating for instance width, height, top, bottom, left, right, if you need those there are always better properties to use first x, y, scale, eg all the transform properties in CSS.

 

I've written a guide for this exact use case stacking some cards, it goes over the basic setup how to start with CSS and lay the cards out so that we know where they are on page load. Check it out:

 

 

And here one of the demos that lays the cards out in a stacking fashion.  If you still need help please try and reduce your minimal demo, there are over 200 lines of CSS and HTML, we just need the bare minimum to see the issue, so please don't include your whole project. Hope it helps and happy tweening! 

 

See the Pen zYbZQML?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[rohit111AAA]

but i wont  if scrole down on my web page the card shud me going center to left  if i scrole up on my web page the card shud animate left to center 

[mvaneijgen]

That is great! What have you tried? We love to see what you can come up with, so that we can see your thought process and thus better help you understand the tools. 

 

Just for the pen and add your tweaks to it, when you get stuck post back here and show us what you've tried.