Gilles Vauvarin

Thanks @mvaneijgen for your advices, it's very helpfull

Hello, A customer approached me to create his website, which featured an animation on the home page. The client provided me with the video and I first suggested putting it in background if the file wasn't too heavy. But in the end, the client asked me to recreate the video animation in JS. I'd never done a JS animation before this project, so I did some research and chose GSAP. Here's an example of the video animation to be reproduced in GSAP: So I tried to reproduce the video animation with GSAP (there are actually two animations that load randomly, above is just one of the two) by moving two images on the screen. Here's the result: http://woo.hva4psbjuo-58e60100v4d7.p.temp-site.link/ I used X and Y coordinates in pixels, here's an example of JS code. <script> /* Knitted figures animation */ const knitted_figure_1 = document.getElementById("knitted-figure-1") const knitted_figure_2 = document.getElementById("knitted-figure-2") const knitted_figure_1_tablet = document.getElementById("knitted-figure-1-tablet") const knitted_figure_2_tablet = document.getElementById("knitted-figure-2-tablet") const knitted_figure_1_mobile = document.getElementById("knitted-figure-1-mobile") const knitted_figure_2_mobile = document.getElementById("knitted-figure-2-mobile") let kf_1 = gsap.timeline() if ( window.matchMedia('(min-width: 1538px)').matches ) { knitted_figure_1.style.display = "block" knitted_figure_1_tablet.style.display = "none" knitted_figure_1_mobile.style.display = "none" kf_1.set(".knitted-figure-1", { x: -600, y: 200 }) kf_1.to(".knitted-figure-1", { x: 300, y: -120, duration: 1 }) kf_1.to(".knitted-figure-1", { x: 550, y: 110, duration: 1 }) kf_1.to(".knitted-figure-1", { x: -170, y: 30, duration: 1, rotation: 5 }) kf_1.to(".knitted-figure-1", { delay: 1.5, x: 2500, y: 170, duration: 2, rotation: 35 }) kf_1.to(".knitted-figure-1", { x: 2500, y: 40, duration: 1, rotation: 185 }) kf_1.to(".knitted-figure-1", { x: -100, y: -10, duration: 1 }) kf_1.to(".knitted-figure-1", { x: 1200, y: 10, duration: 1, rotation: 100 }) kf_1.to(".knitted-figure-1", { x: 1100, y: 80, duration: 1, rotation: 200 }) kf_1.to(".knitted-figure-1", { x: -500, y: 80, duration: 1 }) kf_1.to(".knitted-figure-1", { delay: 0.5, x: 400, y: 80, duration: 0.5, rotation: 50 }) kf_1.to(".knitted-figure-1", { x: '25%', y: 80, duration: 2, rotation: 390 }) kf_1.to(".knitted-figure-1", { x: -2500, y: 80, duration: 2 }) kf_1.to(".knitted-figure-1", { x: -2500, y: -2000, duration: 0.1 }) kf_1.to(".knitted-figure-1", { x: -2500, y: -2000, opacity:0, display:"none", duration: 0 }) } else if ( window.matchMedia('(min-width: 1366px)').matches ) { ... </script> My problem is that when I want to manage the animation for responsive, I can't keep it constant for all mobile or tablet models because screen resolutions change and so does the rendering of the animation's figure path. For example, I make the images leave the screen, then I make them come back, so I have much larger coordinates for large screens than for mobiles. As I'm using media queries for screen size intevals, if I have several mobiles with different screen sizes but which fit into this interval, I'm going to have different renderings of the animation because a 400px displacement on an 800px screen doesn't move my image to the same place on the screen as if my screen is 1200px. I hope you can see the problem. I've tried using X and Y units in percentages, but then the images would also have to be resized according to screen sizes, and I can't cover all device models. Did I miss something in GSAP that could have solved this problem? How would you have tackled the problem so that the animation would be constant on all screen types? Thanks in advance for your feedback.

Thank you very much Rodrigo

Hello, Is it possible to use unit like vh and vw for X and Y with Greensock. I ask because I would like my animation to stay visible in the viewport whatever the screen size.