Animations are lagging when getting animated for the first time

[Destro]

If im animting some div and also adding keyframes to div's inside it then the animtions are starting with a delay amd sometimes laggy when animating for the first time

[GreenSock]

Hi @Destro. I read your question a few times and I really don't understand what you're asking. "Adding keyframes to div's"? If you'd like some help, please make sure you include a minimal demo, like a CodePen or Stackblitz, and we'd be happy to take a peek and answer any GSAP-specific questions. 

[Destro]

this animation is starting with a delay on the first time only
you can check it on this website:  fotf-frontend.vercel.app.

when a green box appears then there is a lag before the animation starts

const tl1 = gsap.timeline({

      paused: true

    })

 

    tl1.to(".box", {

      rotate: "45deg",

      transformOrigin: "center center",

      transform: "scale(40)",

      duration: .5,

    })

      .to(".box2-content , .box-2, .shuffle-top", {

        y: 0,

        duration: .5,

        opacity: 1

      }, 0)

      .to(".layers", {

        y: 0,

        duration: .5,

      }, 0)

 

    ScrollTrigger.create({

      trigger: ".box",

      start: "center center",

      end: "center 49%",

      scrub: 1,

      onEnter: () => {

        tl1.play()

      },

      onLeaveBack: () => {

        tl1.reverse()

      }

    })

[Rodrigo]

Hi,

 

Two things:

1. Why are you putting a scrub value if there is no animation to be scrubbed? There is no need for that IMHO.
2. You can resort to the toggleActions config instead of using callbacks:
   toggleActions
   String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

So your ScrollTrigger instance can be re-written like this:

ScrollTrigger.create({
  trigger: ".box",
  start: "center center",
  end: "center 49%",
  toggleActions: "play none none reverse",
})

See? Nice, simpler and concise.

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

By the way, this is not a good idea: 

tl1.to(".box", {
  rotate: "45deg",
  transform: "scale(40)",
  ...
})

rotate is a transform-related property, and you're telling it to animate to a specific transform of scale(40) which doesn't include a rotation. It's almost never a good idea to animate the literal "transform" property. Instead, you should use the individual components: 

tl1.to(".box", {
  rotation: 45,
  scale: 40,
  ...
})

That's faster and more reliable. 

[Destro]

thanks im also facing some issues while using locomotive scroll along with gsap i used the function that was already provided by gsap but still my div that were having fixed position were not working as they should

[GreenSock]

On 3/16/2024 at 4:41 PM, Destro said:

thanks im also facing some issues while using locomotive scroll along with gsap i used the function that was already provided by gsap but still my div that were having fixed position were not working as they should

LocomotiveScroll is not a GreenSock product, so we can't really support that. Sorry. But you'll significantly increase your chances of someone being willing to help if you provide a minimal demo that clearly illustrates the issue.