Only first div is moving. expected all the div(s)

[tmusharraf]

[UPDATE]

The code is the same but on my local files first div not working and sometimes some images stop and wait till all the animation is complete. but in the demo code version images stop and wait till all the animation is complete.

---

Hello there. ( this problem is related to the old question: 

 

Now the problem is when I add image src's from the outside its only move the first div not all. I'm trying to achieve like the animation here: https://www.elite-designstudio.com/ .

 

The old question solved my problem but when I added other required features like a stop on hover and show animations. I have to use the left property instead of the gsap.set() . as the scale property was not working. 

 

Also, I want the width of the images to be different as in the site, How I can do this?

 

here is the demo: https://stackblitz.com/edit/web-platform-7yxssv?file=index.html (I'm using it on Webflow so that's why I'm using it in a single file)

 

Thanks 

See the Pen by edit (@edit) on CodePen

[Rodrigo]

Hi,

 

You might want to have a look at this thread:

Also a few pointers. You're using version 3.7.1 of GSAP, that's quite old, so I'd suggest you to update it to the latest 3.11.5 version.

 

Also if you're using Webflow, you can create a codepen demo since it's simpler to setup than Stackblitz for this cases.

 

Finally I forked the codepen from your previous thread and update it using the Observer Plugin to achieve the same effect as the link you shared:

See the Pen yLxGKae by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[tmusharraf]

Thanks for your help. 

 

I need to achieve the functionality of the when hovering on image show text below the image. that's why I'm using this HTML structure to only display the 

 

<div class="container">
                <div class="wst-image-container">
                    <div class="wst-image-item-wrapper">
                        <a href=''><img loading="lazy" src="https://fastly.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="" class="wst-image-item"></a>
                    </div>
                    <div class="wst-img-overlay">overlay text</div>
                </div>
</div>

 

Can we make the images responsive using GSAP or we can do with CSS?

[GreenSock]

52 minutes ago, tmusharraf said:

I need to achieve the functionality of the when hovering on image show text below the image. that's why I'm using this HTML structure to only display the 

Why don't you give it a shot and then if you get stuck, please post a minimal demo (like a CodePen...you can fork the one from Rodrigo)? 

 

53 minutes ago, tmusharraf said:

Can we make the images responsive using GSAP or we can do with CSS?

I'm not entirely sure what you mean. You can definitely build responsive things with GSAP. You might want to look at gsap.matchMedia(). If you just mean adjusting the size of images at different breakpoints, that's pretty simple to do in the CSS layer. Again, if you're stuck, please provide a minimal demo along with your specific question and a description of your goal. We're happy to answer any GSAP-specific questions.

 

Also, be careful about this: 

<img loading="lazy" />

When you do lazy loading, that means the page will fire its "load" event BEFORE those images finish loading. ScrollTrigger listens for that "load" event to know when it should call its ScrollTrigger.refresh() and calculate all the start/end points. So if you're doing lazy loading that may shift the layout around (thus affecting start/end positions), you'll need to make sure you manually call ScrollTrigger.refresh() when you're sure that all the layout shifting is done (images are loaded). 

[tmusharraf]

30 minutes ago, GreenSock said:

Why don't you give it a shot and then if you get stuck, please post a minimal demo (like a CodePen...you can fork the one from Rodrigo)? 

 

I'm not entirely sure what you mean. You can definitely build responsive things with GSAP. You might want to look at gsap.matchMedia(). If you just mean adjusting the size of images at different breakpoints, that's pretty simple to do in the CSS layer. Again, if you're stuck, please provide a minimal demo along with your specific question and a description of your goal. We're happy to answer any GSAP-specific questions.

 

Also, be careful about this: 

<img loading="lazy" />

When you do lazy loading, that means the page will fire its "load" event BEFORE those images finish loading. ScrollTrigger listens for that "load" event to know when it should call its ScrollTrigger.refresh() and calculate all the start/end points. So if you're doing lazy loading that may shift the layout around (thus affecting start/end positions), you'll need to make sure you manually call ScrollTrigger.refresh() when you're sure that all the layout shifting is done (images are loaded). 

Thanks for the help. Yes, I tried here minimal demo I removed the extra things: 

See the Pen oNPJyGB?editors=1000 by Tahir-Musharraf (@Tahir-Musharraf) on CodePen

 

 

The issue is some images are overlapping and not working as expected. sometimes when I use webflow image URLs only the div doesn't move.

 

 

This the minimal demo for GSAP working with some images: 

See the Pen zYJyajv by Tahir-Musharraf (@Tahir-Musharraf) on CodePen

 

I failed to identify the problem, it's due to the number of images increasing or may be something else. Please have a look. 

[Rodrigo]

Hi,

 

Why are you adding the timeline returned from the helper function to a timeline that has a repeat: -1 and yoyo true? The helper function already returns a Timeline that can run forever, that's why the function is called a seamless endless loop. The extra timeline is only causing troubles.

 

I updated the example a bit to include the text animations:

See the Pen eYLbLqx by GreenSock (@GreenSock) on CodePen

 

All the other features you want to add should be easy to achieve using that as a starting point. Just don't put the loop timeline inside another one, I don't see a lot of usage for that.

 

Happy Tweening!

[tmusharraf]

Hi,

I have updated the code and fixed the previous error, but there are still some new issues.

 

1. The first issue is that I tried to make the elements responsive by setting the x value of gsap.set to a percentage, but it appears very small on mobile devices. You can view the code here:

See the Pen ExeGBgW by Tahir-Musharraf (@Tahir-Musharraf) on CodePen

2. The second issue is related to image sizes. I am trying to set the first image on the left, the second on the right, and the fifth one in the center using the gsap.set function. However, the image size suddenly becomes very big when I do so. Here is the code:

 

gsap.set(images, {
width: "random(25, 35)" + "%",
x: function(i, target) {
if (i === 0) {
return "0%";
} else if (i === 1) {
return "50%";
} else if (i === 4) {
return "25%";
} else {
return "random(-10, 60)" + "%";
}
}
});

Thanks.

 

[Cassie]

Heya - If I were you I would just set the sizes and the position in the CSS.

 

Setting an image width to a percentage value will usually mean it is going to be small on mobile and larger on desktop screens, that's not a GSAP related issues, just how CSS works! You could get around this by setting a min-width in your CSS or using media queries to define a different width.

This has drifted out of GSAP territory a little and there's been a bit of 'scope creep' since the original question, so I think it's probably best if we leave this thread as finalised now, unless you have any more simple GSAP related questions?

If you need more general help with your project feel free to post in the GSAP freelance forums, we also do offer custom consulting for a fee.

[tmusharraf]

17 hours ago, Cassie said:

that's not a GSAP related issues, just how CSS works!

 

Thanks the issue was with css and I fixed it. Thank you all.