renny Posted October 9, 2021 Share Posted October 9, 2021 https://principle.app/share?id=4o9kHrg46mkZpPNWctWR i need to setup this image zoom and zoom out on scroll Link to comment Share on other sites More sharing options...
Cassie Posted October 9, 2021 Share Posted October 9, 2021 Hi Renny, Sure, that's relatively simple. Have you checked out the scrollTrigger docs? https://greensock.com/docs/v3/Plugins/ScrollTrigger If you set up a minimal demo with the necessary HTML and styling we'll be able to nudge you in the right direction. 2 Link to comment Share on other sites More sharing options...
renny Posted October 11, 2021 Author Share Posted October 11, 2021 On 10/9/2021 at 4:16 PM, Cassie said: Hi Renny, Sure, that's relatively simple. Have you checked out the scrollTrigger docs? https://greensock.com/docs/v3/Plugins/ScrollTrigger If you set up a minimal demo with the necessary HTML and styling we'll be able to nudge you in the right direction. if you don't mine but can you share anyone demo like that, so i can implement from there Link to comment Share on other sites More sharing options...
Cassie Posted October 11, 2021 Share Posted October 11, 2021 Here you go. See the Pen dyzyxaZ by GreenSock (@GreenSock) on CodePen For future reference - It's polite to provide a minimal demo as a starting point. It really helps to cut down on the work you're requesting from people. Hope this helps. 3 Link to comment Share on other sites More sharing options...
renny Posted October 12, 2021 Author Share Posted October 12, 2021 i got it that also how can i image move with scroll like i show on that video Link to comment Share on other sites More sharing options...
OSUblake Posted October 12, 2021 Share Posted October 12, 2021 Have you checked out the ScrollTrigger demos? There's a lot of examples to learn from. https://greensock.com/st-demos/ 1 Link to comment Share on other sites More sharing options...
renny Posted October 12, 2021 Author Share Posted October 12, 2021 yes i checked it not not found right example Link to comment Share on other sites More sharing options...
Cassie Posted October 12, 2021 Share Posted October 12, 2021 The value you're looking for is scrub. Please read the docs or watch the video provided at the top of the documentation page. Link to comment Share on other sites More sharing options...
renny Posted October 12, 2021 Author Share Posted October 12, 2021 can you show me one example ? Link to comment Share on other sites More sharing options...
Cassie Posted October 12, 2021 Share Posted October 12, 2021 gsap.to('img', { scale: 1.5, duration: 1, scrollTrigger: { trigger: 'img', markers: true, scrub: true, start: 'bottom bottom' } }) If you add the line scrub:true to your scrollTrigger the animation will synch with the scroll. This is detailed in the second code snippet on the docs page I linked you to. Please read the documentation or attach a demo of something you've tried before asking any more questions. Good luck with your project Link to comment Share on other sites More sharing options...
renny Posted October 12, 2021 Author Share Posted October 12, 2021 thanks can you also send me example of horizantal slider as per my video ? Link to comment Share on other sites More sharing options...
Cassie Posted October 12, 2021 Share Posted October 12, 2021 There's an example of a horizontal scrolling slider in the demos page that Blake linked you to.https://greensock.com/st-demos/ 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