Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Go to solution Solved by GreenSock,

Recommended Posts

Hi. I was trying to reverse engineer this demo using the Modifiers plugin: 

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


I got it to go downwards on the Y access okay, but I'm running into issues getting to get it to go up. Any help? Also, if you could explain how the % mod works, that would be great. Please no jquery.

See the Pen MWoMXgr by pixelbakery (@pixelbakery) on CodePen

Link to comment
Share on other sites

I figured out that I can set it to reversed:true, but I feel like that's not the cleanest solution

Link to comment
Share on other sites

  • Solution

Here ya go: 

See the Pen OJgeKMG?editors=0010 by GreenSock (@GreenSock) on CodePen


I'm just using gsap.utils.wrap() to set up a wrapper function. You feed any value in and it'll wrap it between those values, so -101 would become 399 since it's wrapping from -100 to 400. 


Read about the modulus operator here.


Does that help? 

  • Like 3
Link to comment
Share on other sites

Okay, next question. How do I make the height responsive? Obviously I know how to stretch the box responsively, but I'm not certain on how to get GSAP to respond accordingly.

Link to comment
Share on other sites

If you know that you've got enough boxes to fill the area that the container expands to, then you can simply adjust your wrapper function accordingly. 


If you need some help with GSAP-specific questions, please provide a very clear minimal demo - I'm not really sure how exactly you're making the box "responsive", like which direction it's growing, what the problem is, etc. 

Link to comment
Share on other sites

Okay so this is where I'm at:


See the Pen JjJgvZL?editors=1111 by pixelbakery (@pixelbakery) on CodePen


(I'm using Tailwind for the css, but that shouldn't be too important)


Known variables:

- The height of each box will always be 24px.

- The max height of the box column will be 144px.

- The min height of the box column will be 24px.


Unknown Variables: 

- The number of boxes

- The actual height of the box column while within the bounds of 24 to 144.


I have two goals:

1. have the wrap respond dynamically since I don't know how many boxes will be within it.  

2. Make sure the number of boxes stays the same, but show less of them at once on smaller screens. i.e a phone should only have 3 boxes visible in the column at a time whereas a large screen could fit up to 6.


Where am I going wrong? 

Let me know if that example is not simple enough - I tried to cut out a lot of the bloat.


edit: I left overflow visible for debugging


Link to comment
Share on other sites

Hi pixelbakery,


Notice in the original demo that the boxes are positioned absolute, and have their initial position set by GSAP. That's pretty important if plan on using the same wrap function for every box. Also, your dimensions aren't correct. 24 appears to be in rem, so the actual height is like 96 with the border.




  • Like 3
Link to comment
Share on other sites

hmmmm... I still can't figure out what i'm doing wrong. Thank you for your help so far. This community is amazing. StackOverflow would have ripped me to shreds by now.


See the Pen JjJgvZL by pixelbakery (@pixelbakery) on CodePen

  • Like 1
Link to comment
Share on other sites

Wait, I think I might have fixed it. Hold off on helping me

  • Like 1
Link to comment
Share on other sites

Boom. Nailed it. The culprit was in trying to pass a variable to the initial y height of the timeline. I fixed this by creating the following string and passing that instead:


const yheight = "+=" + totalHeight*-1


I think a lot of other people will find this useful, so I'm going to fork my pen from here so others can reference it.


Can you double check my work really fast though to make sure everything is clean and done correctly?

Link to comment
Share on other sites

Looks good for the most part. It might worth it to add will-change: transform; to CSS of your boxes as it can help with performance. 


To pause at the start, you can pass in a time value to the pause method.

reset.onclick = function(){


You could also write your yheight like this...

const yheight = "-=" + totalHeight;



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