ICON AD Posted September 6, 2022 Share Posted September 6, 2022 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 More sharing options...
Cassie Posted September 6, 2022 Share Posted September 6, 2022 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 More sharing options...
ICON AD Posted September 6, 2022 Author Share Posted September 6, 2022 @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 More sharing options...
Cassie Posted September 6, 2022 Share Posted September 6, 2022 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! 3 Link to comment Share on other sites More sharing options...
ICON AD Posted September 9, 2022 Author Share Posted September 9, 2022 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 More sharing options...
Cassie Posted September 9, 2022 Share Posted September 9, 2022 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now