angelokeirsebilck

Hi @akapowl First I want to say thank you for putting the time and effort in making this. After checking out the code, I got a better understanding off how to achieve these sort of animations! Will start from your example and finetune it. Thanks again, really appreciate it.

Hi shozo, https://codepen.io/AngeloKeirsebilck/pen/YzpZqQM I would do it like this, not sure if this meets your requirements? As I made three separate grids now. But it surely works like this.

Hi All, I am trying to setup this animation where my pin-items come in from the right. Got it working for 80% but problem is that if i set pinSpacing to false (what i want, becasuse if I set it to true i get this whitespace between the section) the sections overlap eachother. I nowhardcoded each section's height, but will make this dynamic later so that it will always have the height of the biggest pin-item. Also I now set the body height to 4000px so I can scroll, is there a way to 'fake' the height? So I am able to scroll without making the actual page's height bigger? An

Indeed.. I refactored the code to using only 1 timeline and now the animation is much smoother and without bugs. Ah yes, makes sense. Thanks for the help!

Hi Zach, Thanks for the fast reply! With your tips I kinda got it semi-working. Things I did: Removed window on resize function and replaced with initRefresh Removed calling the timeline() function again in this initRefresh Added invalidateOnRefresh: true in all scrollTriggers Added functional values for y and x Most important part I think here was removing calling the timeline() function again . Because resizing window automatically recalculates scrolltrigger values. Only problems that occurs now, if I resize window when my scrol

Hi, So basically I have this animation that moves a rectangle alongside text from left to right and vice versa. The space between the text blocks are 'ghost' divs so the rectangle has space to move to the other side without overlapping the text. The code might seem abit much to understand at first so here is a little explanation: At start in the useEffect hook i set the height for the ghost divs by calculating the projects container width and deviding by 2. So these ghost divs can be recalculated later when resizing window. After I init the timeline function where I loop o

Ah yes, I see. Thanks for the tip !

Hi Zach, Thanks, I'm still new to GSAP but really enjoying it so far! So with your advice (thanks by the way) i made a new codepen with multiple lines: https://codepen.io/AngeloKeirsebilck/pen/BaQzGre Problem here is that i can't figure out how to restart a single line animation. I Tried several approaches with different repeat methods but can't seem to find the right solution. Is there maybe a way to let a tween replay himself in the onComplete callback function? Thanks!

Hi, I am trying to animte a diagonal moving line together with the scrollTrigger plugin. Wanted scenario: if the users scrolls down, the line should move down vertically at 50% of scrollTrigger animation and move to left and also down at 100% of the scrollTrigger animation. I know made 2 timelines, 1 with the scrolltrigger and one without, both on the same .line class. In the timeline with scrollTrigger i animated the rotate property, but the x value does not seem to work + it seems to flicker on scrolling down. Any ideas of how to do this? Thanks in