angelokeirsebilck

Hi, I'm using FLIP plugin to animate the transitions tabs content. The onEnter animations work fine, cards slide in from the bottom. However the onLeave animation does not work. The items disappear straight away. What am I doing wrong here? Thanks!

Hi, Ok, thanks I will need to pin the whole wrapper. I have an extra question (updated the pen). I made another scrolltrigger on the next block triggering when the top of that block hits top of viewport but the start position is not correct because of the pinned section. I read in the common mistakes docs that this can happen when you set the scrolltriggers in wrong order but here the second scrolltrigger gets initialized after the first one so this should not be a problem, right? What is the best way to reposition the starting point? Thanks!

Hi, Thanks for the reply. Yes that is the effect I want to create but without pinning the whole body. If i go with this approach the whole body is wrapped with a pin-spacer element and this seems a little dirty. Is there a way to do this without pinning the whole body? Thanks!

Hi All, I am trying to achieve some basic Scrolltrigger functionality with a pinned section while one image is fading in, however I am facing a problem. The small codepen will illustrate my problem/question better. pinSpacing is set to true so my pinned section does not overlap the next block while the animation runs. This all works fine but the problem is because the section (.Slider) is pinned, it creates a white space. The effect that I want to create is that the green section (.Slider) is pinned at it's place but no white space is created above this section. Is my approach in the right direction? Or should I try to achieve this in a different way? Thanks!

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? Any advice is appreciated!

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 scroll postition (scroller-start and scroller-end is always center of window) is between the 2nd timeline or last timeline the first timeline is bugged (does not go up anymore, or goes down). However if i resize window when scroll position is between first timeline everything seems to readjust fine. Any idea on this? https://codepen.io/AngeloKeirsebilck/pen/MWbbvMO?editors=0010 Using MotionPath plugin also came to my mind. Lets say i'd use this plugin to create the animation. How can I manage the svg path when my windows resizes? On the side got another question. I am using gatsby + a page transition plugin . I read on most common problems for scrollTrigger I need to destoy and re-create the scrolltriggers manually. This worked, killed all scrolltrigger instances on page leave and enabled all on page enter. Problem is that the global ScrollTrigger.addEventListener 'initRefresh' (the one i used above) does not get destroyed and re-created. Btw, greensock is amazing. Thanks

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 over the projects and check wether its the first, even, odd or last project. In each part I set different start and end trigger properties on the scrollTrigger. Example: for the first project i set the start trigger on the bottom of the project and end trigger on the bottom of the first ghost divs. The y value here is the top of the first ghost div (calculated from <ProjectsContainer>) When the animation is finished, i run the goRight function where i move the rectangle to right and on EnterBack i run goLeft function. This all seems to work but problems start when I resize the window. When resize triggers i run reCalclate function where i set the timelines array to zero and recalculate the ghost divs height + run timeline again. This is the moment where it bugs. Can't seem to find how to fix this. Does anyone have a idea of how to do this? Or a different approach for this kind of animation? Thanks in advance

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 advance! (rotation only seems to work on codepen website itself, not embedded pen)