Guest Posted August 28, 2021 Share Posted August 28, 2021 Hello community , how we can apply scroll trigger for img from data base in foreach this is the images div from database <div><img src="{{$app->image_path}}" class="flower" alt="image" ></div> then this is the gsap part , but it fire the trigger for all image in the same time gsap.from(".flower", { rotateX: -80, ease: "expo.out", transformOrigin: "50% 100%", scrollTrigger: { trigger: '.flower', pin: true, start: 'top top', end: 'top center', scrub: 1, } }); Link to comment Share on other sites More sharing options...
Solution nico fonseca Posted August 28, 2021 Solution Share Posted August 28, 2021 Hey @Lolia Trafam you need to use a forEach to animate each element individually, otherwise GSAP animate all elements with the same time. You can see more about it here: 2 Link to comment Share on other sites More sharing options...
Guest Posted August 28, 2021 Share Posted August 28, 2021 28 minutes ago, nicofonseca said: Hey @Lolia Trafam you need to use a forEach to animate each element individually, otherwise GSAP animate all elements with the same time. You can see more about it here: thanks alot Mr ! 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