How to manage this animation with GSAP to be consistent on all screens size?

[Gilles Vauvarin]

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.

 

[mvaneijgen]

You could do several things. Your current setup used fixed pixel values, but as you said you could use percentage based values based ont the current elements size, so instead of x: -600, you could use xPercent: -50, to move it 50% of the elements width. In line with that you could also use x: ()=> window.innerWidth, if you make it a function based value with `() =>` it will also recalculate it's values on page resize. 

 

Instead of window.matchMedia, check out gsap.matchMedia, it has a lot of niceties built in for working with GSAP https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/

 

I don't think there will be a silver bullet that will fix all your responsive issues, but with these first tweaks you can already have it behave some what better on different screen sizes and with gsap.matchMedia you can fix the edge cases.

 

If you need any specific help, please provide a minimal demo, so that we can take a look at your code in action. Hope it helps and happy tweening! 

[Gilles Vauvarin]

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