smallio Posted August 3, 2022 Share Posted August 3, 2022 Just looking to add delay / speed to this to make the images parallax while horizontally scrolling. It works fine vertically but I assume I need to pass in window width or something to get it working horizontally? Can't figure it out for some reason. I'm currently working in a much larger project which I can't isolate easily so hopefully this example demonstrates the idea. Thank you in advance for any replies! EDIT - Would be an awesome feature to just pass in direction: X or something to do this quickly. See the Pen dydpJzY by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted August 4, 2022 Solution Share Posted August 4, 2022 You could just create a timeline animation that handles the horizontal movement of the container (like you already have) AND add some horizontal movements of those images at different amounts, all running simultaneously in the timeline. So imagine it scrubbing that horizontal container animation and in that, it's also subtly moving each of the images on the x-axis by varying amounts. -OR- Here's a relatively quick stab at a method that'll let you add data-speed-x attribute: See the Pen MWVVvWz?editors=0010 by GreenSock (@GreenSock) on CodePen I only applied it to the first row, but hopefully this gets you going in a good direction. Does that help? 3 Link to comment Share on other sites More sharing options...
smallio Posted August 4, 2022 Author Share Posted August 4, 2022 Very much so, thank you so much. I love the data attr approach - do you plan to add more in SS? That's one of the main features I loved about locomotive, having the ability to be able to quickly add side-scrolling / diagonal elements at different speeds via like 2-3 attrs. Would love to see it and use the crap out of it if you do end up adding it haha. Regardless great demo. Cheers! @GreenSock Link to comment Share on other sites More sharing options...
smallio Posted August 4, 2022 Author Share Posted August 4, 2022 In fact, while I'm here I may as well pick your brain! - Some other libraries when you invert values it changes direction. Is there anyway to do direction with this? So say two lines go up and one goes down? Would be super useful to have a "direction" attr or something similar for when you want to quickly achieve this along with the parallax effect. smoother.effects(".hc1", {speed: 0.5, lag: 0.5, direction: -1}); smoother.effects(".hc2", {speed: 0.5, lag: 0.5, direction: 1}); smoother.effects(".hc3", {speed: 0.5, lag: 0.5, direction: -1}); Link to comment Share on other sites More sharing options...
GreenSock Posted August 4, 2022 Share Posted August 4, 2022 I'm not sure I follow (I'm brain-dead, it's after 4:30am and I my body is saying "I can't do this anymore"), but wouldn't it be as simple as using a negative speed? See the Pen QWmmmpv?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
smallio Posted August 5, 2022 Author Share Posted August 5, 2022 17 hours ago, GreenSock said: I'm not sure I follow (I'm brain-dead, it's after 4:30am and I my body is saying "I can't do this anymore"), but wouldn't it be as simple as using a negative speed? Great stuff Jack. Thanks. 2 Link to comment Share on other sites More sharing options...
smallio Posted August 31, 2022 Author Share Posted August 31, 2022 Hey Jack! @GreenSock Been playing around with this tons, so many cool results. Is there a way to use the data attr method you used to choose between doing parallax X or Y? I get how you'd normally do it, but with data attributes it makes it so much easier to add to elements. Is there a way to go like X1.5 or Y1.5 to control both axis and speed? If so please could you show me a really simple example on the old cat demo we were looking at? See the Pen MWVVvWz by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
smallio Posted August 31, 2022 Author Share Posted August 31, 2022 Ahh never-mind i was overcomplicating it, I guess it's easier to just to make a new foreach and just do Y or X, all solved sorry to ping. 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