Trying to do make the scrolling effect with the image and its card,

[Raman Pratap]

Hi,

I am a newbie to GSAP after referring to some examples I have created some tutorials like codepen. I want the image should change on a scroll and when the left part i.e. detail in the center was working when its height was 100vh but I don't want it I want the height of the content.

 

Here is the image of what I actually want to achieve I am using the react slick slider for the slider and changing them onUpdate function.

So if you see the code pen on the bigger device like 2560*1600 it is breaking as all the card are view in one view.

 

 

 

See the Pen WNYgaEL by imraman (@imraman) on CodePen

[mvaneijgen]

Hi @Raman Pratap 

 

Take a good look at your markers, with these you can see what is doing on and thus if that is correct with what you think they should do. You had set the end trigger to be bottom bottom and the start top top, this means that when the top of the element hits the to the the browser it starts, but the same with end, when the bottom of the element hits the bottom of the browser it is done. In your case that ment that as soon as it started it was already done, so your tween jumped to the end. 

 

I've changed your end trigger to bottom top, now when the bottom of the element hits the top of the browser it is done. I've also changed your pin to be true, so it pins the whole trigger, change it back to .right to see what happens when you only pin the .right element.

 

Check out this video, it is really a great resource for the basics of ScrollTrigger 

 

 

I hope I'd understand your question correctly. Hope it helps and happy tweening! 

 

See the Pen OJaqXzz?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Raman Pratap]

Hi @mvaneijgen,

Thanks for the quick response.

 I got your answer but the left side is not sliding it should slide 

Here is another link with a reference: https://www.ju.st/eat/just-egg

Just scroll to the section named: Kiss cholesterol goodbye.

 

[mvaneijgen]

Ah ok, then  you will need to look in to gsap.matchMedia() and do your logic on the one screen size as the first pen and if the screen is small do the pen below

 

Check out https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

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