PNG Animated inside an SVG with White Lines

[astronaut954]

I'm animating some cloud PNG's  inside an SVG and for some reason the PNGs edges appear white lines. I thought it was a problem with the PNG so I cleaned it inside Photoshop, but the problem persisted. Here is a video of the behavior: https://puu.sh/KBxXd.mp4

I wasn't able to upload the SVG files anywhere to use CodePen (Google Drive doesn't provide the .svg), so I will provide all the website files (the main file is HTML/index.html): https://drive.google.com/drive/folders/1PV4wrMpYdlrwkPM-IA-kJCwubSeY2BjG?usp=sharing

If any other information is needed, please feel free to point me to it. Thank you so much.

[Rodrigo]

Hi @astronaut954 and welcome to the GSAP Forums!

 

There are over 350 lines of JS in your project and unfortunately we don't have the time resources to comb through all that code trying to find the problem, is beyond the help we provide in these free forums. Please create a minimal demo in codepen using just the image(s) that are causing the problem and a simple animation that makes it visible, the smallest amount of HTML/CSS/JS possible (no clouds rotating around, etc.), just the SVG to show the images in the HTML, the styles needed just for that part and the JS only for those animations, no preloaders or anything of the sort. You can add GSDevTools to scrub the animation back and forth:

https://gsap.com/docs/v3/Plugins/GSDevTools

 

You can create a free account in codepen and either upload the images to your assets or upload the images to a server and point to those URLs in codepen.

 

Happy Tweening!

[astronaut954]

5 hours ago, Rodrigo said:

Hi @astronaut954 and welcome to the GSAP Forums!

 

There are over 350 lines of JS in your project and unfortunately we don't have the time resources to comb through all that code trying to find the problem, is beyond the help we provide in these free forums. Please create a minimal demo in codepen using just the image(s) that are causing the problem and a simple animation that makes it visible, the smallest amount of HTML/CSS/JS possible (no clouds rotating around, etc.), just the SVG to show the images in the HTML, the styles needed just for that part and the JS only for those animations, no preloaders or anything of the sort. You can add GSDevTools to scrub the animation back and forth:

https://gsap.com/docs/v3/Plugins/GSDevTools

 

You can create a free account in codepen and either upload the images to your assets or upload the images to a server and point to those URLs in codepen.

 

Happy Tweening!

 

Thank you for your welcome @Rodrigo! I managed to create the CodePen, I'm new to this so I would like to thank your patience.
 

See the Pen wBMWBvZ by Ramoses-Hofmeister-Ferreira (@Ramoses-Hofmeister-Ferreira) on CodePen.

[mvaneijgen]

Loading images inside and SVG is weird and personally I like to avoid it at all cost. So also probably here you're running into weird browser rendering issues.

 

What I would do is render out all the layers in there correct file format, so if things are vector keep them SVG and of they are images with transparent parts keep them .png and if you lets say for the mountains export them as JPG, because that will probably save you a lot of file size, seen that that has no underlaying elements. To make your live easier, export all elements at the same size eg export everything 1960x1080 (16:9), so you can construct the 'stage' width ease in HTML, by just stacking everything with CSS. 

 

Hope it helps and happy tweening!  

 

btw fork of your pen using CSS animation with the same issue. Just to demonstrate it is a rendering issue and nothing GSAP can help with. 

See the Pen XJXKdyG?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen.

 

Edit: FYI you can write this a lot simpler 

...
gsap.to("#cloud6_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud5_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud4_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud3_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud2_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud1_fixed", { y: -1500, duration: 2 }),
...

// Tween a list of arrays 
.to(["#cloud1_fixed", ...allOtherClouds..., "#cloud5_fixed"] , { y: -1500, duration: 2 }),
  
// Or even better give all clouds a commen class eg .clouds
.to(".clouds" , { y: -1500, duration: 2 }),
  

Also the way you .add() tweens to a timeline is a bit weird, it isn't wrong but if you don't have a clear use case for doing it that way, because it is a bit overcomplicating the syntax. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

[astronaut954]

6 hours ago, mvaneijgen said:

Loading images inside and SVG is weird and personally I like to avoid it at all cost. So also probably here you're running into weird browser rendering issues.

 

What I would do is render out all the layers in there correct file format, so if things are vector keep them SVG and of they are images with transparent parts keep them .png and if you lets say for the mountains export them as JPG, because that will probably save you a lot of file size, seen that that has no underlaying elements. To make your live easier, export all elements at the same size eg export everything 1960x1080 (16:9), so you can construct the 'stage' width ease in HTML, by just stacking everything with CSS. 

 

Hope it helps and happy tweening!  

 

btw fork of your pen using CSS animation with the same issue. Just to demonstrate it is a rendering issue and nothing GSAP can help with. 

 

 

 

Edit: FYI you can write this a lot simpler 

...
gsap.to("#cloud6_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud5_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud4_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud3_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud2_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud1_fixed", { y: -1500, duration: 2 }),
...

// Tween a list of arrays 
.to(["#cloud1_fixed", ...allOtherClouds..., "#cloud5_fixed"] , { y: -1500, duration: 2 }),
  
// Or even better give all clouds a commen class eg .clouds
.to(".clouds" , { y: -1500, duration: 2 }),
  

Also the way you .add() tweens to a timeline is a bit weird, it isn't wrong but if you don't have a clear use case for doing it that way, because it is a bit overcomplicating the syntax. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

So you guys would not recommed to use SVG on this case? I saw this method in this tutorial about multilayer parallax scroll:
 

 

I thought it would give me more versatility and would be easier since the approach is pretty clever.

 

I'm not sure how I will be able to reproduce everything because I need 2 images (layer_1 and layer_2) to go beyond the original size since I use an effect that will make those images offset by some points based on mouse or touch coordinates and since all images need to be the same size they will appear cropped. How can I solve this?

[mvaneijgen]

30 minutes ago, astronaut954 said:

So you guys would not recommed to use SVG on this case? I saw this method in this tutorial about multilayer parallax scroll:

Not 'you guys', me personally would recommend that. I like my images optimized for different screen sizes and loading an image inside an SVG doesn't allow that. SVG is for vector elements and PNG's aren't vector, so they shouldn't belong in a vector, but this is my personal opinion. 

 

Indeed pretty clever and their effect seems pretty solid with no rendering issues. I would try and export your file using different parameters or even a different program. Maybe also try optimizing the images before putting them in your vector program. Also try an make a simpler version (with less layers) and see if the rendering issue goes away. 

 

36 minutes ago, astronaut954 said:

I'm not sure how I will be able to reproduce everything because I need 2 images (layer_1 and layer_2) to go beyond the original size since I use an effect that will make those images offset by some points based on mouse or touch coordinates and since all images need to be the same size they will appear cropped. How can I solve this?

I'm not sure what you're asking.

 

What I would do is just create all your layers and put them on a 'stage' and then export all layers at the same size then if you stack all the images with CSS everything would line up like it would in your design program (or current SVG), what you the do with CSS or GSAP wouldn't matter. 

 

Keep in mind that our help here is limited, because this isn't a GSAP issue and we like to keep these forums scoped to the plugins. 

 

Again hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

What I would try is that instead of using data:image as the image source just use a URL. There could be a possibility that the export process could be causing this. Have you tried using the PNG files directly as the source of an <image> element inside the SVG? I'd try that if I was you, you can still use the responsiveness and coordinates system of SVG with the PNG transparent images.

 

Hopefully this helps

Happy Tweening!