For Each section animate figure in, and animate figure out

[Alexander K]

Hi,

 

I am trying to make it so, that each of my sections figure elements (containing images or video), rotateX in, from -90deg to 0. And animate out from 0 - 90deg.

But I am struggling to understand which way to do so. 

 

This is what I am doing so far

 

I would also like to have no extra white-space between the sections when I am animating the transform (rotateX). Hence I was thinking it would be a good Idea to add a different transformOrigin to the different states to and from. But it seems glitchy and maybe there is a better way to do so.

Also I am thinking my method above is probably just wrong right... perhaps I should only have one to or from, or fromTo... but with sort of all animations in one, with onEnter and onLeave. But yeah. Just can't get my head around it.

 

Would be super happy for any points in the right direction

 

See the Pen OJWEaKd by akmalmo (@akmalmo) on CodePen

[mvaneijgen]

Is something like this what you are looking for?

 

See the Pen JjEZxGx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

I had to delete some of your css to make sure there was no conflict with your GSAP animation. 

 

I've set your animation to a timeline to make it play on a timeline between the scrollTrigger. Also I've moved the perspective to the css, I always forget how perspective works in css, but would think it would be smoother to just set it in css and don't animate it with GSAP, but don't quote me on that. 

[Alexander K]

Thank you so much for your response @mvaneijgen! I think you are definitely right regarding the perspective.

 

But more simply put; I wish to do one type of animation when something enters the viewport, and another when it exits the viewport. In this case rotate in from -90, rotate out to 90. But imagine it being whatever... fade in x-300, fade out x+300. 

 

Perhaps I would be better off making just ONE transition from let's say -90deg in the bottom of the screen to 90deg to the top, in just one .from or .to? If that makes sense.

[akapowl]

 

Hello there @Alexander K and welcome to the forums.

 

When it comes to this, you might be at least doing one of the most common ScrollTrigger mistakes here, creating .to() logic issues.

 

As the linked article suggests, [t]o work around this either use set immediateRender: false ([...]) or use .fromTo()s for the later tweens ([...]) or set a ScrollTrigger on a timeline and put the tweens in that timelines instead ([...]).

 

Personally I would in most cases opt for the .fromTo() version for something like this (or depending on the usecase the timeline), to have full control over what's happening, espacially when it comes to it working as expected on resizes.

 

Also, I would probably wrap the images and use that wrap as the trigger instead because using transforms on the trigger element itself can often lead to unexpected results related to the triggers shifting into places where you don't want them - especially with resizes.

 

See the Pen 849904ce8f90f7276fca8bd0e0187c5d by akapowl (@akapowl) on CodePen

 

 

I suppose something like this is what you were after? (I am no expert when it comes to perspective, so don't mind if what I did with that looks odd 😅)

 

Hope this helps. Cheers.

[Alexander K]

Hi @akapowl! Thank you, this right here helps a lot! A ton actually. It makes a lot more sense seeing your code and how you have separated the different things, from one state to another.

 

Many many many thanks!