Using gsap.set for multiple elements

[iamrufus]

Hi Greensock

 

Just looking for some advice regarding setting some styles using gsap.set, I'm slowly getting to grips with gsap so bare with me 

I have about 4 elements i would like styled on page load, i currently have it like this

 

let serviceName = document.querySelectorAll('.service--name');
let serviceImgMain = document.querySelectorAll('.service--image--main img');
let serviceImgBackLeft = document.querySelectorAll('.service--image--back--left');
let serviceImgBackRight = document.querySelectorAll('.service--image--back--right');
let currentSlide = 0;

gsap.set(serviceName[currentSlide], {
        opacity: 1,
        duration: 0
    })
    gsap.set(serviceImgMain[currentSlide], {
        scale: 1.2,
        duration: 0
    })
    gsap.set(serviceImgBackLeft[currentSlide], {
        xPercent: -25,
        duration: 0
    })
    gsap.set(serviceImgBackRight[currentSlide], {
        xPercent: 25,
        duration: 0
    })

I just wondered if there was a better way to write the above? I know i could quite easilly set the styles in css but because i wanted to keep all the styling for this slider done in gsap

 

Also on a side note i have noticed that my tweens in firefox don't appear to be very smooth compared to safari and chrome. Is there anything i could do to increase performance in firefox?

 

Appreciate any advice

Thank you

[ZachSaucier]

Hey Rufus. You can remove the duration: 0 from each tween - there's no point in adding it as it is ignored. 

 

25 minutes ago, iamrufus said:

i have noticed that my tweens in firefox don't appear to be very smooth compared to safari and chrome. Is there anything i could do to increase performance in firefox?

That's a browser issue and there may or may not be anything you can do about it. You could try adding force3d: true on some tweens that aren't forced to be 3d. Maybe try using will-change on some elements that are animated. Hard to say without being able to see it