Jump to content
GreenSock

iamrufus

Using gsap.set for multiple elements

Recommended Posts

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

Link to comment
Share on other sites

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 :) 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×