Jump to content
Search Community

ScrollTrigger: Pinned Lateral Sections Expanded

JustAChart test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts


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. 


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

Link to comment
Share on other sites



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

  • Like 2
Link to comment
Share on other sites

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.

  • Like 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...