Shaheer Posted April 13, 2022 Share Posted April 13, 2022 Hi guys, I'm seeking your help and thoughts on the below website, I'm trying to achieve the similar guided scrollTrigger animation on the camera, that it works like a loop to go through all the pictures in the animation and after reaching the final position it comes back to the first picture position. Which it makes the animation guided and looped throughout the experience. How can we achieve it with scrollTrigger without making the scrollbar visible in the viewport. Example website - https://www.magische-spiegelungen.de/ Thanks, Shaheer Link to comment Share on other sites More sharing options...
Solution akapowl Posted April 13, 2022 Solution Share Posted April 13, 2022 Hello @Shaheer the scenario of the post linked below is a slightly different one, but the part with regard to hiding the scrollbar should apply to your scenario too. Welcome to the forum and happy tweening! 3 Link to comment Share on other sites More sharing options...
Shaheer Posted April 13, 2022 Author Share Posted April 13, 2022 Hi @akapowl, Thank you for the quick reply. Let me go through it. Also did you check the webpage I mentioned in the article? It's having that smooth looping animation. Based on the scroll the camera moves in a guided path. do you have any idea how it can be achieved? Thanks, Shaheer Link to comment Share on other sites More sharing options...
Shaheer Posted April 13, 2022 Author Share Posted April 13, 2022 Hi @akapowl, Hiding the scrollbar in viewport is fixed with the below code in css. Thank you!! ::-webkit-scrollbar { display: none; } * { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } 1 Link to comment Share on other sites More sharing options...
akapowl Posted April 13, 2022 Share Posted April 13, 2022 If you are going to build it on top of native scrolling and ScrollTrigger, I suppose you would have to make sure the camera position is the same at the end of the scroll as it was in the beginning and maybe create an infinite loop of scrolling like one of the threads linked below are showing. But I'm not even sure if they are doing it like that on that example page or if they are just listenening to events like the 'wheel' and adjust their canvas depending on that. Since I can not move anything with my keyboard's arrow keys, I think that might very well be the case. For that latter case, the brand new Observer Plugin would come in very handy - but the logic for handling all that would be up to you to create 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