Pin an element in timeline after moving it to specific place using scrollTrigger

[ICON AD]

Hello everyone. 

I am new to scroll Trigger and this forum. 

I want to achieve 2 things in this demo. I will appreciate a little help here. I am trying it from last 24 hours but not sure what I am doing wrong.

 

• First I want to pin the Do More word after the scale down and scroll up the right side list .
• Second, when the do word come comes in from of list item it should change the color. just like this demo. https://codepen.io/mikeK/pen/poPwzae

 

Thank You 

See the Pen mdLJKOo by amirkhan1992 (@amirkhan1992) on CodePen

[Cassie]

Hi there!

 

If you'd like help with the 'do more' section can you please reduce the demo down to just the 'do more' section. It makes it a lot easier for people to help. Thanks so much!

 

Quote

Second, when the do word come comes in from of list item it should change the color. just like this demo. https://codepen.io/mikeK/pen/poPwzae

You've linked to a nicely set up working demo here so I'm not really sure what more we can help with. Do you have questions about it? Are you struggling to understand something? If so, let us know and we'll do our best to explain. 

 

If you'd like someone to help you implement it, this isn't really the place. But you can post in the jobs forum and maybe a freelancer can give you a hand!

 

 

[ICON AD]

@Cassie

 

Thanks for the reply. 

The reason I have added all the before code because its one timeline. and I wanted to understand, how It can be done with this one timeline.

[Cassie]

Ah ok - I see!

Well, if you want to pin different elements at different points and incorporate that demo, then you're probably best off creating a timeline for each section. At the moment you have everything positioned absolutely so I'd start by adjusting your HTML and CSS so you have something like this and then you can handle the 'DO MORE' timeline separately and follow the logic in Mikel's pen.

 

See the Pen poVJYRa?editors=1000 by GreenSock (@GreenSock) on CodePen

Otherwise you could do a rough approximation with staggers - that might work, but you'll have to tweak the timings and layout a little either way!

See the Pen vYjOPwg?editors=1010 by GreenSock (@GreenSock) on CodePen

I also noticed you're using some old syntax so you may want to have a little look at this article!

 

 

[ICON AD]

Thank You @Cassie that did the job.

 

Just one small thing, the endTrigger is not working exactly on "DO MORE" with the last option. as I want to finish it the last option.  

[Cassie]

Sure thing! 

 

See the Pen vYjOPwg?editors=0110 by GreenSock (@GreenSock) on CodePen

 

yPercent moves by a percentage of the elements height. yPercent:100 will move the element by it's entire height.

I can't edit your CSS because you're using tailwind, (sorry) but you can see that the element has an overflow - I've added a border for you. If you fix the overflow so that the border wraps around all the elements you want to animate you'll be able to control the y distance more precisely.