[FLIP onLeave Animation with display: none;]

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!

See the Pen oNdNYjO by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen

[Scrolltrigger white space generated by pinned element]

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!

[Scrolltrigger white space generated by pinned element]

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!

[Scrolltrigger white space generated by pinned element]

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!

See the Pen bGapejV by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen

[Pinned sections with items coming from the right]

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.

 

 

[Staggered fade in]

Hi shozo,

 

See the Pen YzpZqQM by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen

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.

[Pinned sections with items coming from the right]

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!

See the Pen BaQpbmJ by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen

[Problem recalculating scrollTriger values on resize window]

28 minutes ago, ZachSaucier said:

You have a bit going on... I'm a bit surprised why you need four gsap.timeline()s inside of your timeline function for only three sections... My guess is that there's a logical issue somewhere in that function.

Indeed.. I refactored the code to using only 1 timeline and now the animation is much smoother and without bugs.

 

31 minutes ago, ZachSaucier said:

That's what .removeEventListener() is for. But you might not even need to remove it, you might just avoid re-creating it, if your variable references inside of the function still work.

 

Ah yes, makes sense. Thanks for the help!

[Problem recalculating scrollTriger values on resize window]

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?

See the Pen MWbbvMO?editors=0010 by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen

 

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 
 

[Problem recalculating scrollTriger values on resize window]

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

 

See the Pen MWbbvMO by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen

[Diagonal lines changing direction with scrollTrigger]

Ah yes, I see. Thanks for the tip !

[Diagonal lines changing direction with scrollTrigger]

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:

See the Pen BaQzGre by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen

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!

[Diagonal lines changing direction with scrollTrigger]

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)

See the Pen rNWLOQz by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen