Scroll Animation (Duration, speed, etc.)

[edohak]

Hi everyone,

 

I hope you can help me. Please open codepen link and check the website. 

 

1. First problem is - when I'm at the top of the site and start scrolling, I want the first 1 scroll to not work visually, but the blue bars animation.

 

That is, when I went to the site and want to scroll down, the first thing the site does not go down is the animation.

 

I've already done most of it, but I can't visually stop the first scroll to start the animation.

 

I am attached the video - https://streamable.com/163gjg

 

 

______

 

2. Second problem is: How I can control my scroll down and up via this website (example - https://www.sleepiest.com/). 

I no have idea , when I open inspect I see this - 

style="transform: translate3d(0px, -1528px, 0px);"

But I cant use this code in my own website.

 

 

I really hope you help me. Thanks a lot ❤️

See the Pen QWVEqRW by nkwcooha-the-sans (@nkwcooha-the-sans) on CodePen

[mvaneijgen]

@edohak I'm not completely clear what it is what you want to do, but lets tackle one problem at a time. 

 

By default ScrollTrigger will just play your animation when it hits the top of the trigger. I've moved your trigger to the .section_1 and put an overflow: hidden on it, to prevent it from drawing scrollbars when the solar panels are animating. I've also set pin to true and scrub to true, now when the trigger is hit the section will pin and the animation is hooked up to the users scroll position. 

 

If I understand your question correct, you want the animation to play regardless of the user is scrolling or not and only allow scrolling when the animation is finished. Personally I don't like hacking the scrollbar, what if it is my 10th time visiting this website, do I need to be forced to watch your animation again? With my solution I could just scroll really fast and skip it. But if you need to force a user watch your animation each time you can look in to disabling the scroll via https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily and hook those up to the timeline events onStart and onComplete to disable and enable the scroll again. Does this answer your first question? 

 

Side note you can just animate all your .outsole elements if you give them all the same class in one line if you put a stagger on it. See codepen for the updated tween. 

 

See the Pen yLxJmXj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[edohak]

@mvaneijgen Thank you so much for reply.

 

I just need that with the scroll, the menu and content do not move, that is, at the first scroll, everything remained in place and the animation of the panels worked, and then during the second scroll when the animation ends, I could scroll down.

 

https://scrollmagic.io/ - This is example, when we scroll (https://www.veed.io/view/a7496928-fefa-41bd-9c8e-a54170e444d5?sharingWidget=true&panel=share)

 

 

[mvaneijgen]

That seems the exact same as my example. If I'm missing something please create a fork of my pen with the edits you want to happen (even if it isn't working) and explain your issue as follows:

 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container"