Destro Posted March 10 Share Posted March 10 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 Link to comment Share on other sites More sharing options...
GreenSock Posted March 11 Share Posted March 11 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. Link to comment Share on other sites More sharing options...
Destro Posted March 11 Author Share Posted March 11 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() } }) Link to comment Share on other sites More sharing options...
Rodrigo Posted March 11 Share Posted March 11 Hi, Two things: Why are you putting a scrub value if there is no animation to be scrubbed? There is no need for that IMHO. 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! Link to comment Share on other sites More sharing options...
GreenSock Posted March 12 Share Posted March 12 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. Link to comment Share on other sites More sharing options...
Destro Posted March 16 Author Share Posted March 16 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 Link to comment Share on other sites More sharing options...
GreenSock Posted March 18 Share Posted March 18 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now