Jump to content
GreenSock

Serhat Düzgün

Getting data attributes with ScrollTrigger

Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

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

Thanks so much.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • Solution

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

 

 

  • Like 3
Link to comment
Share on other sites

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

  • Like 1
  • Haha 2
Link to comment
Share on other sites

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!!!!!

 

 

  • Like 2
Link to comment
Share on other sites

No problem at all!

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×