szehao Posted April 10, 2022 Share Posted April 10, 2022 Made a quick demo of what I want achieved, the animation I have is not smooth. Each animation feels like theres a small delay between before it loops again. What's the correct or better way of doing this? Any help is appreciated. Complete beginner herehttps://codesandbox.io/s/pedantic-gauss-ieftzd?file=/src/App.js Link to comment Share on other sites More sharing options...
Solution PointC Posted April 10, 2022 Solution Share Posted April 10, 2022 Hi @szehao Welcome to the forum. The delay you're seeing is the ease of "power4". I'm guessing you wanted something more like this with a linear or "none" ease. See the Pen mdpKxdb by PointC (@PointC) on CodePen I'd also recommend placing all the elements inside the SVG so everything scales nicely together. Does that help? Happy tweening and welcome aboard. 4 Link to comment Share on other sites More sharing options...
szehao Posted April 10, 2022 Author Share Posted April 10, 2022 Yes, everything is butter smooth now. I was planning to add the elements into SVG once I got it to work. Anyway, thanks for the help. You're amazing 1 Link to comment Share on other sites More sharing options...
PointC Posted April 10, 2022 Share Posted April 10, 2022 Happy to help. You can sometimes use a strokeDashoffset animation for these seamless loops too. No idea if it would work for your actual project, but it's a quick and easy animation and you don't even need the MotionPath plugin. YMMV. See the Pen YzYvLqN by PointC (@PointC) on CodePen Happy tweening. 3 Link to comment Share on other sites More sharing options...
szehao Posted April 10, 2022 Author Share Posted April 10, 2022 That's an interesting solution, I'll try to see if I can make use of it. By the way, is it possible to set a property based on the MotionPath progress? I'm trying to control the opacity of the animated objects, by setting the opacity from 0 opacity at 0% to 100% opacity at 30%. I know on ScrollTriggers, i can control that using the onUpdate, but can't seem to find any ideas on how to do it on MotionPaths Link to comment Share on other sites More sharing options...
GreenSock Posted April 10, 2022 Share Posted April 10, 2022 You mean like this? See the Pen rNpKrER?editors=0010 by GreenSock (@GreenSock) on CodePen You can just put that in the tween itself. And to avoid the first one being on top of the last one, I adjusted the stagger amount. 2 Link to comment Share on other sites More sharing options...
szehao Posted April 10, 2022 Author Share Posted April 10, 2022 Not exactly, in the demo you provided, the opacity starts from 0.3 and goes to 1 throughtout the length of the path. What I would like to achieve is being able to start from 0.3 opacity, but reaching opacity of 1 halfway through the path. Link to comment Share on other sites More sharing options...
PointC Posted April 10, 2022 Share Posted April 10, 2022 I'd probably give each clone its own timeline. Maybe something like this. See the Pen gOoKdOR by PointC (@PointC) on CodePen Happy tweening. 5 Link to comment Share on other sites More sharing options...
szehao Posted April 11, 2022 Author Share Posted April 11, 2022 Exactly like this, you're amazing Craig. Thank you. 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