Jump to content
Search Community

Getting data attributes with ScrollTrigger

Serhat Düzgün test
Moderator Tag

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

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

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.
  • Create New...