perfecti Posted March 11, 2021 Share Posted March 11, 2021 Hi, I can't solve this problem. I have an animation when the page onload/element appears, also on the same element there is an animation with a scroll and they overlap each other and the elements jump between two values. How can I solve this? As far as I understand, if these animations are not in the timeline, they will work as was expected See the Pen ZEBVOKb by Speculant (@Speculant) on CodePen Link to comment Share on other sites More sharing options...
Visual-Q Posted March 11, 2021 Share Posted March 11, 2021 The issue is if you start scrolling before the initial animation is done the scrub and start animation fight for control. You could try disabling scrolling till the first animation is complete but that might be confusing for people. At the very least make the fist animation faster so the scroll disable doesn't last so long. See the Pen VwmqKMN by Visual-Q (@Visual-Q) on CodePen 3 Link to comment Share on other sites More sharing options...
perfecti Posted March 11, 2021 Author Share Posted March 11, 2021 19 minutes ago, Visual-Q said: The issue is if you start scrolling before the initial animation is done the scrub and start animation fight for control. You could try disabling scrolling till the first animation is complete but that might be confusing for people. At the very least make the fist animation faster so the scroll disable doesn't last so long. Thx for try to help, but disabling scrolling is too annoying, so I am not considering such a solution Link to comment Share on other sites More sharing options...
GreenSock Posted March 11, 2021 Share Posted March 11, 2021 Like @Visual-Q pointed out, you have built things in a way that would make it logically impossible to do what you're asking. If one animation is trying to control the same position of the same object as another scroll-based animation is, to a totally different value, what would you expect to happen? (I don't intend that in a snarky way - I'm genuinely trying to understand what you thought should happen and why). You could add an onStart to your scroll-based timeline that kills the conflicting portions of the first animation, like: onStart: () => first.killTweensOf(".square1, .square2", "x,y,z,rotation") See the Pen 23b1abb2baf6e4876785778f7b3565f6?editors=0010 by GreenSock (@GreenSock) on CodePen 5 Link to comment Share on other sites More sharing options...
Visual-Q Posted March 11, 2021 Share Posted March 11, 2021 Jack's is definitely a better solution though it still creates intermittent problems depending on when you scroll. It's an interesting issue though, even if it hasn't come up before I can certainly see how people might want an initial animation that subsequently reacts to scroll input. The question is how best to handle it so it doesn't break the user experience. Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted March 11, 2021 Solution Share Posted March 11, 2021 A good way to do this sort of thing is to put elements in a container and affect the container with one animation and the content with another. 3 Link to comment Share on other sites More sharing options...
perfecti Posted March 11, 2021 Author Share Posted March 11, 2021 11 hours ago, GreenSock said: Like @Visual-Q pointed out, you have built things in a way that would make it logically impossible to do what you're asking. If one animation is trying to control the same position of the same object as another scroll-based animation is, to a totally different value, what would you expect to happen? (I don't intend that in a snarky way - I'm genuinely trying to understand what you thought should happen and why). I expect that when an element appears, it will have a start animation, and then when it ends, that element will have a scroll animation. But I don’t understand how to implement it correctly. 18 minutes ago, ZachSaucier said: A good way to do this sort of thing is to put elements in a container and affect the container with one animation and the content with another. hmm this could really be the solution Link to comment Share on other sites More sharing options...
Visual-Q Posted March 11, 2021 Share Posted March 11, 2021 Zachs answer about animating different elements made me think you might also animate different properties to move the same elements as well. Possibly set up the css so you can use Left,Top with one animation and the x,y transforms with the other. I believe this could solve the conflict and should allow everything to end up in the right place. Or you could use x,y with xPercent yPercent: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin See the Pen WNoLYMB by Visual-Q (@Visual-Q) on CodePen 3 Link to comment Share on other sites More sharing options...
GreenSock Posted March 11, 2021 Share Posted March 11, 2021 2 hours ago, perfecti said: I expect that when an element appears, it will have a start animation, and then when it ends, that element will have a scroll animation. But I don’t understand how to implement it correctly. But what do you expect to happen if the user scrolls earlier??? You could certainly use an onComplete in your initial animation and create your scroll-based stuff in there, but that doesn't really solve things because you're trying to have your cake and eat it too - if the user scrolls early and you set things up in your onComplete, it's still jump because you'd still be using the same scroll start/end values, thus if they scroll to a place halfway between, it'd have to jump there to be logically coherent. Zach's and Visual-Q's options seem workable since they're not creating a situation that's logically impossible to avoid. See what I mean? 2 Link to comment Share on other sites More sharing options...
perfecti Posted March 11, 2021 Author Share Posted March 11, 2021 10 minutes ago, GreenSock said: But what do you expect to happen if the user scrolls earlier??? You could certainly use an onComplete in your initial animation and create your scroll-based stuff in there, but that doesn't really solve things because you're trying to have your cake and eat it too - if the user scrolls early and you set things up in your onComplete, it's still jump because you'd still be using the same scroll start/end values, thus if they scroll to a place halfway between, it'd have to jump there to be logically coherent. Now I understand your question. I expect that the starting animation will play to the end and only after that the scroll animation will start (if the user has already scrolled by this time, then the element should be animated from the current positionю The current scroll should be the starting one) I tried Zach method, everything seems to be fine. Method Visual-Q good too. See the Pen mdOaGVo by Speculant (@Speculant) on CodePen thanks for the help 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