ScrollTrigger: Pinned Lateral Sections Expanded

[JustAChart]

Hi,

This codepen was create by Rodrigo and it's exactly the behavior I need.  However, on the left I'm not sure how to implement with different divs / no images. For example, instead of img 1 I would like a red square, img 2 would be blue circle, img 3 would be a green triangle.  Ultimately, which I believe is beyond the scope of the forum, is to insert a D3 chart and have THAT transition opacity 0 to 1.  For now, baby steps. I'll settle on 3 different divs to animate. 

Thanks! 

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

[alig01]

Hey,

 

Rodrigo refers to the img tag in the CSS and JS. If you want to remove it, then create your new divs with the same unique class name so that you can replace the reference to the img tag with it.

 

Add a shape name to your new divs and copy the styling from this page.

<div class="content box"></div>
<div class="content circle"></div>
<div class="content triangle"></div>

After that the first step should be finished.

 

It would be beneficial if you tried it first yourself and only look in the codepen if you encounter any difficulties.

 

Hope this helps and good luck

[Rodrigo]

Hi,

 

Indeed @alig01 is right, is just about changing the DOM elements from images to anything you want/need.

 

In this fork I changed every image for an SVG element, each with a different shape in it:

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

 

Hopefully this helps.

Happy Tweening!

[JustAChart]

Thank you for your quick assistance.  Clearly I need to spend some time with CSS.  I was unfamiliar with the syntax of a two word class with the same first name (content) and different second name (shape name). Furthermore, I changed img to content (not .content) so that was a problem too. 

 

I also changed img to .content in the .forEach statement which didn’t work so I looked at your answer and see it still says img.  Rodrigo’s version has the word: shape. I see I can put any word there as long as it doesn't start with a period so I will study more about .forEach.

Thank you both so much for the speedy reply. Have a great day.