scroll animation

[Arun_ms]

Hello Guys, iam trying to recreate this scroll animation https://lulufinserv.com/products/gold-loan/  on this section "10 Reasons that prove LuLu Gold Loans", i tried creating it . but im stuck 

See the Pen BagJrNv by Rare4pple (@Rare4pple) on CodePen.

[mvaneijgen]

It took me a while to fine the animation, because it only works when you scroll directly on the text, otherwise you just scroll the page. Personally I would pin the whole container and have the animation take over for as long as it lasts.

 

The logic here is that you have one ScrollTrigger that does all the pining and a ScrollTrigger for each section that animates the current label in and out. You of couse have to play with the start and end values to get it to look like you want. Hope it helps and happy tweening! 

 

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

[Arun_ms]

@mvaneijgen Really appreciate your reply, i have changed some styling and the script, i also forked the code pen now here is the 

See the Pen ZEdvRLZ?editors=0010 by Rare4pple (@Rare4pple) on CodePen.

 new one, but there is still some issues, the scroll is not correct, like the heading on the left is not accurate 

[mvaneijgen]

Yeah you have to tweak your markers so that they reflect what you want. I highly recommend turning them all though out the whole development process end only turn them of for production.

 

As you can see your start marker is already by the third item while the second one is still in view. 

 

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

[Rodrigo]

Hi,

 

On top of Mitchel's great advice you can look at these demos for inspiration:

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

 

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

 

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

 

Hopefully this helps

Happy Tweening!

[Arun_ms]

@Rodrigo @mvaneijgen Thank you for your, great response.  

See the Pen oNrqoEw?editors=1010 by Rare4pple (@Rare4pple) on CodePen.

 i have implement some features and now its kinda working the way im looking for but still some issues when clicking on the left heading its not showing the corresponding right content and also when scroll the start and end is not perfect, i tried different values but still when scrolling its not perfect and sometimes its skips some headings😥, can you guys please help

 

[mvaneijgen]

It seems like you need to add the offset of how far the right column starts from the top of the page, this is around 220px. Also your right column can't scroll as much as it needs to finish the animation, so you need to increase the allow scroll or adjust your markers to reflect the distance. Hope it helps and happy tweening! 

 

See the Pen YzoaEgL?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen.

[Arun_ms]

 @mvaneijgen  thanks for your quick response, but still sometimes its having the same issue when scrolling, the right content is not fulling showing at the end, i tried to set the end and start values dynamically based on the height but not working as excepted. is there any other way to overcome this 

 

[mvaneijgen]

Yes there are two things you can do to fix this on from the top of my head.

1 hour ago, mvaneijgen said:

Also your right column can't scroll as much as it needs to finish the animation, so you need to increase the allow scroll

So make it so the right column can scroll further, by adding padding to the end or something

1 hour ago, mvaneijgen said:

adjust your markers to reflect the distance.

Or adjust the start and end markers for the last element to start and end earlier. Hope it helps and happy tweening! 

[Arun_ms]

@mvaneijgen Thank you so much, you are truly a life saver🤝, thanks for the suggestions and  guidance. Have a nice day