[Need help to add animation when change dispay none to block]

As far as i know display can not be animated, what you could do is animate opacity to fade in the element.

if you could make a codepen demo that would make it a lot easier for us to help you. 

And i believe it is not a problem to share a link that shows the effect you want. As long as it is relevant to your question.

[scrolltrigger animation reverse]

Is there any particular reason you don't wanna add it to the timeline?

Since that is the easy fix here.

 

See the Pen OJbqdxN by parpar78 (@parpar78) on CodePen

[h1 is not animating]

See the Pen dyOwdeX by parpar78 (@parpar78) on CodePen

 

position the tweens at the correct time like i did here, i also made the duration a bit shorter.

in your version the rotation plays before the sections start sliding, that caused it to delay and for the rotate to not be visible.

 

Is this what you are looking for?

[Width and height check in ScrollTrigger.matchMedia()]

This is strange, in my sass i have to use comma.

because "and" seems to split the media query to be 2 separate queries. but perhaps this is Sass specific.

 

thanks for the help. this seems to work in GSAP.

[h1 is not animating]

See the Pen zYoyEmO by parpar78 (@parpar78) on CodePen

 

Hey there,

 

The animation has already finished before you scroll, you can see the animation if you add a duration like i did here.

But you probably want to look into something like adding a scrolltrigger (https://greensock.com/docs/v3/Plugins/ScrollTrigger) to start the animation at the right time.

 

Take a look at what they did with the other animation in the codepen and check out the docs for more info.

 

Kind Regards,

Patrick Rijkee

[Width and height check in ScrollTrigger.matchMedia()]

Hello everyone,

 

I have an animation that needs to display only above 992px width and 700px height.

however it seems i cant add more than one condition to matchMedia.

 

What is the (proper) way to do this?

 

(I hope you dont mind i used your matchMedia demo as a starting point for my codepen)

 

Thanks,

Patrick Rijkee

See the Pen MWbBLYW by parpar78 (@parpar78) on CodePen

[Collapse menu on scroll]

Wow, that was fast😃,

 

Thank you, this is exactly what i need.

looking forward to using gsap more often.

 

Thanks again,

 

Patrick Rijkee

[Collapse menu on scroll]

Hello, 

 

I'm working on my very first gsap animation and ran into this problem:

 

the animation works perfectly on scroll down, it translates out of view so only the toggle button is visible.

But on scrolling up it does nothing even though it should reverse the animation. 

what am i doing wrong?

 

Thanks in advance,

 

Patrick Rijkee

See the Pen RwaEdZL by parpar78 (@parpar78) on CodePen