ScrollTrigger "Scrollytelling"

[mikeage 2 Likes (Newbie)]

Hello, I'm trying to create a timeline that pins a sidebar when you get to the section on the page and updates the active image as you scroll through the years. It is partly working but seems to skip the first image altogether.

 

I've created a CodePen here:

 

It is based on this official demo:

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

 

Thanks for the great plugin. Any help is appreciated!

 

 

 

See the Pen oNxZGEP by mikemedoro (@mikemedoro) on CodePen

[ZachSaucier 7,132 Likes (Superhero)]

Hey Mike, welcome to the GreenSock forums.

 

That pen was just a concept, it's not guaranteed to be production ready  In your project you should probably use the boundingClientRect which calculates the offset more absolutely:

See the Pen ExKWLey?editors=0010 by GreenSock (@GreenSock) on CodePen

[mikeage 2 Likes (Newbie)]

Thank you Zach! That's what I was looking to achieve.