Jump to content
GreenSock

amirehman

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

Recommended Posts

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

Link to comment
Share on other sites

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!

 

 

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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!

 

 

  • Like 3
Link to comment
Share on other sites

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.  

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×