Jump to content
Search Community

ScrollSmoother moves object from its original position without scrolling

fonveton test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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:

 

image.thumb.png.ffc61de1aa330ce14e4d2bb9c8025003.png

Link to comment
Share on other sites

  • Solution

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!

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

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

 

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

  • Like 2
  • Thanks 1
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.
×
×
  • Create New...