Jump to content
Search Community
pixelbakery test
Moderator Tag

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

  • 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 5
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

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

  • 6 months later...

Again, it's hard for me to understand exactly what you're trying to do, but it looks to me like you've got logic problems in your code and CSS issues. 


Why are you using a stagger? That offsets the timing of all the tweens, so they're not synchronized. I assume you want them synchronized. 


And you're offsetting the y position of all the elements from their NORMAL position in the document flow. I assume you wanted them to be 50px apart instead (absolute)? So set your position: absolute and top: 0 and make sure the container is wide enough. 


Maybe you're looking for something like this?:

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

Link to comment
Share on other sites

  • 1 year later...

Hi there @codechirag


I don't understand your question. Here are some tips that will increase your chance of getting a solid answer:

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

Also, please don't @ tag lots of people to try to get more attention here. It's also usually best to create a new thread for your question rather than hijacking a thread from a long time ago. 

  • Like 1
Link to comment
Share on other sites

That logic doesn't work. To do seamless looping, you have to do a lot of other calculations to figure out exactly how far to move each element before looping back to the initial position and wire all that up in animations for each, or use a modifier that accomplishes something similar. It's not an easy task which is why we created the helper function to make it much, much easier for people. Is there some reason why you don't want to use that? 

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