Share Posted November 23, 2017 Hi, I am trying to achieve an effect that when I scroll the page I move two different lists of words, and I can see just two word per time (one of each list). After I see the 6 words, I unpin the lists and go to another section. and I know I'm doing it quite wrong, so I'm asking for some help or tips. Thank you. See the Pen xPjZKj by sktklaus (@sktklaus) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted November 23, 2017 Sorry about my english.. I'm closer to get what I want here http://withininternational.com/ but there are many bugs yet, I have no idea why the 2 lists go in a different speed. Link to comment Share on other sites More sharing options...
Share Posted November 23, 2017 That's most probably because list on left side goes up and covers shorter distance to go out of view while one on right covers longer distance, so they will never be in sync. Try placing them in center, give them all same height as that container, then they will align perfectly. Link to comment Share on other sites More sharing options...
Author Share Posted November 23, 2017 I tried to set the same height, margin, time for both, but didn't work, the first list is still running faster. Link to comment Share on other sites More sharing options...
Share Posted November 23, 2017 Please post a demo with code specific for this problem, it won't be easy to check it on live site. Link to comment Share on other sites More sharing options...
Share Posted November 23, 2017 Alright, issue is that GreenSock has default ease of Power1.easeOut that's what was causing it. You can set global ease to Linear.easeNone or set it on individual tween. See the Pen mqLNVg by Sahil89 (@Sahil89) on CodePen 3 1 Link to comment Share on other sites More sharing options...
Author Share Posted November 23, 2017 I used the yPercent, it worked as magic. I am really sorry for not posting on codepen, I realise that posting there it helps more me than you. Thank you so much 1 Link to comment Share on other sites More sharing options...
Author Share Posted November 28, 2017 I need to reopen this topic, the way I did was working in many computers here, but it was because they all have the same height, when I resize the window it breaks the animation, can you help me? See the Pen xPjZKj by sktklaus (@sktklaus) on CodePen Link to comment Share on other sites More sharing options...
Share Posted November 28, 2017 You haven't really set it up as I had suggested. yPercent refers to height of element itself, if you set it to +100, then element will move down 100% of it's own height. If you fix it, then you will be able to change duration on resize. Using yPercent as my demo will be far more reliable. https://github.com/janpaepke/ScrollMagic/issues/105 1 Link to comment Share on other sites More sharing options...
Author Share Posted November 28, 2017 I can't work with Codepen, This website is under heavy load (queue full) We're sorry, too many people are accessing this website at the same time. We're working on this problem. Please try again later. Error 502 bad gateway. Is that normal? Link to comment Share on other sites More sharing options...
Share Posted November 28, 2017 Ya sometimes, it's down for me as well. Link to comment Share on other sites More sharing options...
Author Share Posted November 28, 2017 See the Pen xPjZKj by sktklaus (@sktklaus) on CodePen Is it what you said? Instead of 100 I'm using 90, but seem to work now Link to comment Share on other sites More sharing options...
Share Posted November 28, 2017 Ya but personally instead of animating containers, I would have animated the containing elements. Don't know why my embedded pen doesn't show up, here is the link. See the Pen mqLNVg by Sahil89 (@Sahil89) on CodePen 3 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