Frame by frame bug

[Walaa]

Hi guys,

 

Thank you for the great library and you continuous support.

 

I have an issue, I’m developing a website based on a story and I used GreenSock library specially TimelineMax to build this website, the problem now is, Im using frame by frame animation and Im toggling between 0 and 1 values of Opacity to achieve this animation, for example:

 

var is_force3D = false;

 

var forest_moving_sq_background_moving = new TimelineMax();

 

var forest_moving_corvus_walk = new TimelineMax({repeat:18});

forest_moving_corvus_walk.to('.walk2', 0, {opacity: 1, delay:.09, force3D:is_force3D});

forest_moving_corvus_walk.to('.walk1', 0, {opacity: 0, force3D:is_force3D});

forest_moving_corvus_walk.to('.walk3', 0, {opacity: 1, delay:.09, force3D:is_force3D});

forest_moving_corvus_walk.to('.walk2', 0, {opacity: 0, force3D:is_force3D});

forest_moving_corvus_walk.to('.walk4', 0, {opacity: 1, delay:.09, force3D:is_force3D});

forest_moving_corvus_walk.to('.walk3', 0, {opacity: 0, force3D:is_force3D});

forest_moving_corvus_walk.to('.walk5', 0, {opacity: 1, delay:.09, force3D:is_force3D});

forest_moving_corvus_walk.to('.walk4', 0, {opacity: 0, force3D:is_force3D});

forest_moving_corvus_walk.to('.walk6', 0, {opacity: 1, delay:.09, force3D:is_force3D});

forest_moving_corvus_walk.to('.walk5', 0, {opacity: 0, force3D:is_force3D});

forest_moving_corvus_walk.to('.walk7', 0, {opacity: 1, delay:.09, force3D:is_force3D});

forest_moving_corvus_walk.to('.walk6', 0, {opacity: 0, force3D:is_force3D});

 

forest_moving_sq_background_moving.add(forest_moving_corvus_walk, "-=21.875", "sequence");

 

And It works as expected on all browsers except Safari, Sometimes all frames take Opacity 1 at the same time and this makes all the frames appears together and this not happening all the time.

 

You can see this video for the working case: 

And this video for the bug: 

 

I appreciate your support,

Regards,

[PointC]

Welcome to the forum.

 

I'm not quite sure why Safari is behaving that way, but if I may make a suggestion. Wouldn't a sprite-sheet be a whole lot easier than all those 0 duration tweens setting the opacity on and off?

 

Here's a good thread about using SteppedEase to animate a sprite-sheet.

If you could provide a demo, it would be easier to troubleshoot. More info.

Happy tweening.

 

[Walaa]

Thank you for your reply.

 

I agree with you that the sprite sheet is a lot easier but unfortunately, We can't re-do all the website animation now with the sprite sheets and We have tried before the sprite sheets but we faced problem that the sprite sheet dimensions is too big to load because every image in the sheet was around 1000 x 600 px and we had more than 100 image. 

 

You can take a look on the website from this URL http://thecorvus.com/teto283/ 

 

Regards,

 

[GreenSock]

I couldn't reproduce the issue at all. And it's extremely difficult to troubleshoot a live site like that with so many other things going on. If you still need some help, please provide a reduced test case in codepen or jsfiddle with only the absolutely necessary code to reproduce the issue (even if it's a simple <div>). 

 

Oh, and you don't need to constantly set the force3D values like that on every tween. You can set them once for each element (or set the CSSPlugin.defaultForce3D to affect everything thereafter). Like:

 

TweenMax.set(".walk1, .walk2, .walk3, .walk4, .walk5, .walk6", {force3D:false});

 

And if you're doing zero-duration to() calls, you can simply use a set() call instead. Either way is fine...just might save you some typing. 

 

Also, I'd strongly recommend using autoAlpha instead of opacity for performance reasons (browser, not GSAP). If an element has opacity:0 but is still visibility:visible, the browser has to render it, dispatch mouse events, etc. on the element but if you set visibility:hidden (which autoAlpha does for you), it eases the browser's rendering load. 

 

Good luck with the project. And again, if you still need help, please provide a reduced test case in codepen that clearly shows the issue. Thanks!

[Walaa]

Thank you again, We tested the AutoAlpha instead of Opacity and there is major performance enhancing  but the issue still exist, I will try to make an isolated sample of code to reproduce the issue.