Umid Posted October 25, 2022 Share Posted October 25, 2022 I need to make this animation. I've tried different ways - via clip-path, but it doesn't work correctly. I wanted to try with pins, but the scroll trigger doesn't kick correctly and just replaces the video. Please help me. ezgif.com-gif-maker.mp4 See the Pen QWxWqee by ipoizn (@ipoizn) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted October 25, 2022 Share Posted October 25, 2022 Hi there! This question needs a few more details in order for people to be able to assist. I'm afraid that I don't really understand what 'this animation' is. Could you provide a bit more clarity? Quote I need to make this animation Here are some tips that will increase your chance of getting a solid answer: 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" 2 Link to comment Share on other sites More sharing options...
Umid Posted October 26, 2022 Author Share Posted October 26, 2022 14 hours ago, Cassie said: Hi there! This question needs a few more details in order for people to be able to assist. I'm afraid that I don't really understand what 'this animation' is. Could you provide a bit more clarity? Here are some tips that will increase your chance of getting a solid answer: 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" I added a video of what the animation should look like. I apologize for the poor quality, but there is a 1mb limit Link to comment Share on other sites More sharing options...
Umid Posted October 26, 2022 Author Share Posted October 26, 2022 I would also like to note that if you connect Locomotive Scroll, everything works and this animation works as it should, but why can not do the same without Locomotive? Link to comment Share on other sites More sharing options...
Cassie Posted October 26, 2022 Share Posted October 26, 2022 Hi again, thanks for the video. That helps! I looked into your GSAP code and there's no code written in there for those image swipes. All you're doing is pinning and controlling the video. So I'm not sure how/why it would work with locomotive unless you're including some more code somewhere instructing it to do clipped/masked swipes... Have you got an example of what you tried using clip path? Seeing your working will help us assist you This demo may help too? See the Pen 6a2480c123d88dc391faba0ea5cc590f by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
webprouser Posted November 17, 2022 Share Posted November 17, 2022 On 10/26/2022 at 6:57 PM, Cassie said: Hi again, thanks for the video. That helps! I looked into your GSAP code and there's no code written in there for those image swipes. All you're doing is pinning and controlling the video. So I'm not sure how/why it would work with locomotive unless you're including some more code somewhere instructing it to do clipped/masked swipes... Have you got an example of what you tried using clip path? Seeing your working will help us assist you This demo may help too? it's not working. please can you remove smoth scroll? there is no smooth scroll. first and last sections's height must be more then 200vh Link to comment Share on other sites More sharing options...
Rodrigo Posted November 17, 2022 Share Posted November 17, 2022 Hi @webprouser, Please be more specific about what exactly is not working. If you don't need the smooth scrolling plugin just remove it and adjust the HTML and JS accordingly. This seems to work without the smooth scrolling: See the Pen VwdMNxy by GreenSock (@GreenSock) on CodePen Happy Tweening! Link to comment Share on other sites More sharing options...
webprouser Posted November 17, 2022 Share Posted November 17, 2022 48 minutes ago, Rodrigo said: Hi @webprouser, Please be more specific about what exactly is not working. If you don't need the smooth scrolling plugin just remove it and adjust the HTML and JS accordingly. This seems to work without the smooth scrolling: Happy Tweening! Rodrigo, please help me!!! can we do this like the video? without black background and opacity please? when scrolling that text is stoping for a second. can we fix this? I really need help. Link to comment Share on other sites More sharing options...
webprouser Posted November 17, 2022 Share Posted November 17, 2022 1 hour ago, Rodrigo said: Hi @webprouser, Please be more specific about what exactly is not working. If you don't need the smooth scrolling plugin just remove it and adjust the HTML and JS accordingly. This seems to work without the smooth scrolling: Happy Tweening! please, see how the website is looking Link to comment Share on other sites More sharing options...
Rodrigo Posted November 17, 2022 Share Posted November 17, 2022 Hi, We can't provide fully working solutions as we don't have the time resources for that. Please provide a minimal demo of what you are currently doing and where you're facing issues in order to help you with any GSAP related problems and/or questions you might have. Happy Tweening! 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