fonveton Posted July 27, 2022 Share Posted July 27, 2022 I'm using ScrollSmoother and data-speed attribute. Using data-speed="2" value changes object transform from its original position, before scrolling. I'm using complicated scss files so can't create a simple demo but you can see the example of problem I'm having here: Link to comment Share on other sites More sharing options...
Solution Cassie Posted July 27, 2022 Solution Share Posted July 27, 2022 Hi there - Yep, that's by design. If you need to adjust that you could do a custom scrollTriggered scrub animation instead, then you'll have control over the start/end and amount it moves. Pop over a codepen with a couple of coloured divs and your attempt if you need help with this! 2 Link to comment Share on other sites More sharing options...
fonveton Posted July 27, 2022 Author Share Posted July 27, 2022 2 minutes ago, Cassie said: Hi there - Yep, that's by design. Oh, didn't know that. data-lag works perfecly, It's a shame that data-speed can't be same. I will move on with scrollTrigger then. Thank you. Link to comment Share on other sites More sharing options...
Cassie Posted July 27, 2022 Share Posted July 27, 2022 It hits the correct position when it's perfectly in the center of the viewPort. We decided that was the most common preference! Sorry it doesn't fit your project. 1 Link to comment Share on other sites More sharing options...
Ficus Media Posted September 6, 2022 Share Posted September 6, 2022 Hello. I have a similar problem. Here is the website that I made so far. https://bigeyeballs.netlify.app/ Smooth scrolling and parallax are achieved by using Locomotive Scroll. Unfortunately, Locomotive has some issues that I thought ScrollerSmoother solved, thus I decided to give it a try. But I am unable to get the same effect that you can notice on my website. I want my logo letters to stay fixed inline, until I start scrolling, and then make them move at a different speed. A locomotive scroll has a "data-scroll-position" parameter, which helps me to set elements to the top of the container prior to starting scrolling. Is there any way to make the same effect with ScrollSmoother? You mentioned ScrollTrigger's scrub, but I cannot see it helping me in this situation. Link to comment Share on other sites More sharing options...
akapowl Posted September 6, 2022 Share Posted September 6, 2022 Here's an idea for how you can approach this @Ficus Media Set up a ScrollTrigger that starts at the top of the page and ends the height of your headline/logo after that. Over that distance scrub a tween, transforming each of the letters upwards by a certain amount multiplied by a certain value you wish for its 'speed', stored in e.g. a data-speed attribute of each letter. I chose the height of the title itself in this demo as the 'base value' for the y transform and multiply it by that data-speed attribute of each letter - the higher the value you choose as your basis, the faster it will move up of course. Maybe this can get you started. If you have still have any questions, it would be best to create a new topic and add a minimal demo, that makes it easier to help. Happy tweening! See the Pen abGOebz by akapowl (@akapowl) on CodePen 2 1 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