Thin white lines on animation

Performance
1

Hello there, I am building a website and have set a black rectangle in a group. The group container is set to reveal from the bottom to the top of the page as the user scrolls (set to hidden until revealed).

As the black rectangle reveals I get random white horizontal lines appear, as I scroll back down they disappear and reappear in different places as I scroll back up.

I have tried it with and without multiple pause timelines and get the same issue.

It is much worse on Chrome than on Safari.

Thanks if you can help.

2

Can you try unchecking 'Use Webkit Graphics acceleration' and reexporting? This sounds like a weird graphics bug. If you could post a screenshot + example file that would be great.

3

Thanks Daniel. I just tried unchecking 'Use Webkit Graphics acceleration' but no change.
It seems to preview better on my laptop but not so well through the Mac Studio monitor.

website-white lines.hype.zip (21.3 KB)

lines1
lines13432×1792 117 KB

lines2
lines21920×577 40 KB

lines3
lines35062×2468 225 KB

4

I think it may be the group divs doing this.

When I ungroup the black background 1 in your example and put the height animation on it directly , I do not get any lines.

But I appreciate that that may not be as easy to do in a real project

It also seems to go away if you give the group a white border.. !??

--
Just gave the group a black border and it got worse..

Not sure why this would happen (hoping its not a red hearing ) but may help to point to the issue.

1 Like
5

That's really fascinating. Browsers, Safari especially, usually have problems invalidating around borders or shadows, but your document is only changing the size of a group with overflow. It looks like in particular this is due to using flexible layout, likely a zoom contents pixel rounding issue.

I'm not sure your end goal, but if you do something like change the origin of the black rectangle to animated up instead of changing the size of the overflow group, it will not produce this artifact.

1 Like
6

Thanks guys, I will try both of these solutions and come back to you.

I used the overflow group method because I wanted the background to stay within the boundaries of the page and simply reveal.

7

I guess there may be other ways to do this kind of animation using CSS but I don't know how, and I don't know if that can be included as part of the Hype file?

8

I tried both solutions but still getting the white lines. Did you do anything else to the file?
It is also really struggling on Chrome which is key!
I'd there any other way I can solve this problem?

9

It depends on the CSS; you may need to at least check Position with CSS left/top and possibly uncheck Protect from external styles in the Document Inspector for any solution to be compatible.

This was just the one I did, seems to work on chrome (for me, anyhow):

website-white lines-jonathan.hype.zip (34.6 KB)

10

Thanks Jonathan. In a spirit of finishing off the thread I worked out exactly why it wasn't working for me. I had grouped the block and set the group to reveal but looking at your file, you had set to animate the height of the block within the group, which worked of course.

I even tried just using the height animation without grouping the block first, but that caused the white lines to appear too.

So, group the block, then set the height to animate the block to appear. I have added multiple pause timelines so it animates per frame as opposed to a single animation.

I have provided a final file which works in Chrome and Safari, if it helps anyone. It also contains the javascript to reverse scroll.
Block reveal with NO white line error.hype.zip (35.3 KB)

2 Likes
11

Thanks for circling back and providing that!

12

No problem Jonathan. With my one page 'scrolling' site in mind, I read somewhere about the settings you need to make this work on an iPhone, but I cant seem to find them. Basically the website doesn't work on the phone (It won't scroll). Are there any settings I need to adjust to make this work fir mobile?

13

Mobile devices don't have a scroll wheel, so this becomes a bit of a different problem. I think there might be some other posts on the forums that cover it a little, though I don't think I am finding a strictly canonical one -- probably because any solution is pretty dependent on the exact behavior wanted.

From a very naive solution, you could just use touchstart/touchmove events on mobile, and then play the timeline based on these. It would be adding this code to the bottom of your pageloadscroll function:

	window.addEventListener('touchstart', function(event) { 
		window.lastTouchEvent = event;
	});
	
	window.addEventListener('touchmove', function(event) { 
		if(event.touches.length < 1 || window.lastTouchEvent.touches < 1) {
			return;
		}
	
		var deltaY = event.touches[0].screenY - window.lastTouchEvent.touches[0].screenY;
		if (deltaY > 0 && (hypeDocument.currentTimeInTimelineNamed('Main Timeline') > 2)) {
			hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionReverse);
		} else if (deltaY <= 0) {
			hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)		}
	
	
		window.lastTouchEvent = event;
		event.preventDefault();
	}, { passive: false });

However, I think you'll find probably doesn't scroll exactly how you want. Your document has a lot of pause points so I think it is hitting many of those. Instead it seems you may more want swipe behavior?

I'd probably just add On Swipe Up/On Swipe Down actions in the scene inspector, and then have those run some other timeline that essentially accomplishes the same scrolling instead of this code.

14

Thanks Jonathan, I will look at that and come back to you.

1 Like
15

What is the best way to add a particular part of an animation to a particular timeline?

16

There's a few ways; the easiest may just be selecting the animation and copy/pasting it. You could also duplicate the timeline via the duplicate button in the "Animation Timelines" section of the Scene Inspector.

The most complex but reusable method would be to put it all in a symbol and use symbol actions to run the timeline.

17

I think looking at all the choices it seems the code you supplied works really well. Thanks so much for writing it.

I have removed many of the paused timelines to make it work better.

1 Like