tatanka Posted August 25 Share Posted August 25 Hello, i found some slider using Gsap but i want to modify it with timelines. My goal is when i start scrolling my slide scroll and set rotation to 0 I tried to combine it with timeline but it jumps or anims end when i didnt scroll yet. Without timeline all of them rotates at the same time. See the Pen dywYReO by Orhan-Celik (@Orhan-Celik) on CodePen Link to comment Share on other sites More sharing options...
tatanka Posted August 25 Author Share Posted August 25 I made some improvements but cant achieve to rotate one by one. my latest codepen below: Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted August 25 Solution Share Posted August 25 Hi, You could try ScrollTrigger's container animation: https://greensock.com/3-8/#containerAnimation Here is a demo: See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
tatanka Posted August 25 Author Share Posted August 25 Thank you so much @Rodrigo I will try this one hope this will do my job 1 Link to comment Share on other sites More sharing options...
tatanka Posted August 25 Author Share Posted August 25 3 hours ago, Rodrigo said: Hi, You could try ScrollTrigger's container animation: Here is a demo: Hopefully this helps. Happy Tweening! It worked like a charm thank you again! See the Pen dywYReO?editors=1010 by Orhan-Celik (@Orhan-Celik) on CodePen 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted August 25 Share Posted August 25 You're welcome!! Looks really nice, great job! Happy Tweening! Link to comment Share on other sites More sharing options...
Mr choy Posted September 19 Share Posted September 19 hi all master, can this "Circular Image Slider" rotation be like the sample below? See the Pen eYbezYG by Mrchoy (@Mrchoy) on CodePen Link to comment Share on other sites More sharing options...
GSAP Helper Posted September 19 Share Posted September 19 Hi there! I'm not really sure what you're asking. 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" A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great. 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