making a scale animation, but facing some css translate property issues

[RLM]

I am trying to make an animation just like the video that I have attached. The one that I have attached is also made by me, but I am facing a lot of issues because the one that you are seeing actually the animation which is getting produced due to some problem that i cannot resolve. I am very new to GSAP. I am using ScrollTrigger plugin for the animation that I want. Also, I am attaching a link to a video to show the complete issue that I am facing ( link" https://drive.google.com/file/d/10u0dioPKN8ykGuYdUKn2c9FHsANLW7IF/view?usp=sharing ) .

Following is the code ( I am using React ), and I am using no other CSS property or any other javascript either. This is the only code that I have written:

import React, { useRef, useEffect } from "react";

import { mbp } from "../../img/imageModule";

import { gsap } from "gsap";

import { ScrollTrigger } from "gsap/ScrollTrigger";

 

gsap.registerPlugin(ScrollTrigger);

 

const Intro = () => {

let mbimg = useRef(null);

 

useEffect(() => {

const el = mbimg.current;

 

gsap.fromTo(

el,

{

scale: 1.3,

},

{

scale: 0.75,

scrollTrigger: {

trigger: el,

markers:true,

start: "clamp(top top)",

// end: "clamp(bottom 50%)",

scrub: true,

pin: true,

},

}

);

}, []);

 

return (

<div className="hero-section relative">

<div className="hero-image">

<img className="mbp zoom" src={mbp} alt="macbook-pro" ref={mbimg} />

</div>

</div>

);

};

 

export default Intro;

[GSAP Helper]

Hi there! I see you're using React -

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.

Here's the structure:

// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start.
useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // all your GSAP animation code here
  });
  return () => ctx.revert(); // <- cleanup!
}, []);

This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background.

We strongly recommend reading the React information we've put together at https://greensock.com/react

Happy tweening!

[Rodrigo]

Hi @RLM and welcome to the GreenSock forums!

 

We have a collection of Starter Templates that use GSAP in React apps so you can take a look and fork in order to create a minimal demo:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Also be sure to check the resources in this page:

 

Hopefully this helps.

Happy Tweening!

[RLM]

20 minutes ago, Rodrigo said:

Hi @RLM and welcome to the GreenSock forums!

 

We have a collection of Starter Templates that use GSAP in React apps so you can take a look and fork in order to create a minimal demo:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Also be sure to check the resources in this page:

 

Hopefully this helps.

Happy Tweening!

Thanks, now I can show the actual problem that I am facing in a better way

[RLM]

2 hours ago, GSAP Helper said:

Hi there! I see you're using React -

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.

Here's the structure:

// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start.
useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // all your GSAP animation code here
  });
  return () => ctx.revert(); // <- cleanup!
}, []);

This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background.

We strongly recommend reading the React information we've put together at https://greensock.com/react

Happy tweening!

brooooo!! thank you very much. This helped me and fixed the issue also!!!!!!!!