Getting data attributes with ScrollTrigger

[Serhat Düzgün]

Hello everyone.

In a project, we pull data with scrollTrigger and give it to the text div below. But there is a problem and I can't solve it.

I am using the width of the photos for data caption. I use the section width for data-title and data-meta. I try several functions but it doesn't work. How should I go about running this? Thank you so much.

See the Pen rNvaWwd by trevor-ghiam (@trevor-ghiam) on CodePen.

[Cassie]

Hi there, could you explain clearly what your goal is?

Thanks so much.

[Serhat Düzgün]

I need to achieve this, but I couldn't do it. @Cassie

scrolling.pdf

[Cassie]

Heya - are you trying to display the caption of the image that's in the center of the screen?

[Serhat Düzgün]

4 minutes ago, Cassie said:

Heya - are you trying to display the caption of the image that's in the center of the screen?

I am getting data from HTML with ScrollTrigger.

I have three data. I get the data-title and data-meta from the width of the Sections. In other words, this data changes when ScrollTrigger touches the sections.

The third data is data-caption, these come from the photos in that list. But that doesn't seem to be a problem. So the scrolltrigger gets the html data in the images but the others don't work in sync with it.

[Cassie]

I'm still struggling to understand your goal. Don't explain in terms of scrollTrigger or code! Just a simple explanation as if you're talking to a designer or project manager.

Are you trying to display some data about each image when it hits the line on the screen?

Maybe containerAnimation will help if so?

See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen.

[trevor.ghiam]

Hi Cassie! Serhat is helping me with my project but unfortunately we are completely stuck. Perhaps it might be clearer if i help to explain the goal. Here's the actual site that we are working on. You were right! We just need to display the caption of the image in the centre of the screen. Apart from that, we also need to show the project info from the parent div which the image is nested within. Hope that is clearer!

[Cassie]

Awesome, yeah that's really helpful thanks!

 

ContainerAnimation is definitely what you're after. Here you go, something like this?

See the Pen bGMdJej?editors=0011 by GreenSock (@GreenSock) on CodePen.

 

 

[Cassie]

Sorry it took a while to get there -  I just got back from holiday so my brain's not really in gear yet.

[trevor.ghiam]

Hey no worries! It's amazing that you are able to respond this fast!

 

Yes! That does seem to solve what we have been struggling with for 2 nights!

 

Thank you so much for this!!!!!

 

 

[Cassie]

No problem at all!

[Serhat Düzgün]

@Cassie You are awesome!!!!! Thank you so much!

[Cassie]

No worries pal! Sorry it took me a while to understand ?