Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Tweens destroyed when scrolling fast in IE10 #119

Closed
stefanobergrussberger opened this Issue Nov 9, 2013 · 6 comments

Comments

Projects
None yet
3 participants

Hi Jan,

sorry for warming up this topic again but in IE10 it's even worse. There it's enough when I scroll fast with the mouse wheel to destroy my tweens.
I added fromTo in my demo script as you suggested here: #104 but still you will see, sometimes the tweens don't work anymore even when I scroll slowly afterwards and only fast in the beginning.

Here the link again: http://osmm.de/scrolldemo/
and the demo files zip: http://osmm.de/scrolldemo/scrolldemo.zip

It would be great if you could take another look at it.
Thank you!

Stefan

Collaborator

janpaepke commented Nov 12, 2013

Hi Stefan,
I'll have a look as soon as I can.
Sadly I'm quite busy at the moment but I should get around to it some time this week...
Regards,
J

jkrot commented Nov 12, 2013

I still think this is a fundamental problem in the way you are doing your tweens and adding them to the controller. From what I can tell you are just overwriting your own tweens.

Review the following property of timelinemax

http://www.greensock.com/overwritemanager/

overwrite : int Controls how (and if) other tweens of the same target are overwritten by this tween. There are several modes to choose from, and TweenMax automatically calls OverwriteManager.init() if you haven’t already manually dones so, which means that by default AUTO mode is used (please see http://www.greensock.com/overwritemanager/ for details and a full explanation of the various modes):
NONE (0) (or false)
ALL_IMMEDIATE (1) (or true)
AUTO (2) – this is the default mode for TweenMax.
CONCURRENT (3)
ALL_ONSTART (4)
PREEXISTING (5)
Example: TweenMax.to(mc, 1, {x:100, overwrite:5});

By default you are on auto you are having some overwriting issues, you really have two ways around this. Wrap everything in a timelinelite and force it to go through a sequence or be better about managing your tweens overwriting.

Hi jkrot,

thank you.
What I tried now: I wrapped every single tween in a timeline and added onStart and onComplete. There I set manually the start and end values of margin-left and margin-right again (so I set the end value actually twice, in the tween and in onComplete). But still no luck.
Maybe I misunderstood you. Could you please tell me how you would do that in my example above?

Thank you!

jkrot commented Nov 13, 2013

If you wanna post your modified code so I can take a look I will make adjustments to it later today. Basically you are just trying to force each animation to play out and not jump and you can do that in the timeline.

Collaborator

janpaepke commented Nov 13, 2013

Hey James,

Also check this Issue, where we originally discussed the issue: #104

regards,
J

jkrot commented Nov 13, 2013

If you really want to ensure that the animation happens the way you want, I would make a function to trigger an add to the timeline lite oncomplete from the previous tween. You pass in a parameter for the next tween and if you follow a naming schema you can do it dynamically.

I think you are running into the fundamental issue of how superscrollorama interacts with the greensock animation is that it updates the progress of the timeline or tween based on the scroll amount vs number of pixels you have for the scroll.

As in the previous issue I gave you an example where onUpdate i was running a js function to clean up the animation, it is going to happen where the progress gets messed up. I really only see the two ways of getting around this if you can't get your animation to work right within a timeline.

However I still feel that you can accomplish this in a normal timeline if you set the overwrite property to none. If that still doesn't work then you will have to manually clean up your tweens.

  1. Dynamically add the next tween on on complete and update, which this is going to be rather cumbersome.
  2. Have a function that keeps track of where you are in progress of the animation. If you have 10 tweens and jumped to tween 3, make sure you onStart check where you are in your progress and force the animation to do what you want.

@janpaepke janpaepke self-assigned this Feb 3, 2014

@janpaepke janpaepke closed this Feb 3, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment