Jump to content
Search Community

scroll animation after onload animation

perfecti test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

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

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

 

 

  • Like 3
Link to comment
Share on other sites

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

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

  • Like 5
Link to comment
Share on other sites

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

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

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

 

 

  • Like 3
Link to comment
Share on other sites

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? 

  • Like 2
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...