Intersection Observers || Motion Framer || GSAP

[violet bough]

Hi everyone,
I'd like to implement some animations on a one page site. Wondering if you had any feedback / preferences between native Intersection Observers, Motion Framer or GSAP.
I've never used any of these before.
Thank you!

[unique moth]

I personally love native approaches so I would follow the following path: css -> intersection observer -> library

If an animation is very simple and can be done using CSS only, I would do that instead of using a library.
eg.: simple button animation, fade in animation, loaders etc...

If I need to trigger animation based on some coordinated and it can be done using css + intersection observer then I would use those.
eg.: fade in a top to page button on certain a coordinate, fade in a component on a certain coordinate etc...

BUT if the animation I need to implement is something that is not something "simple" I would probably use Motion Framer or GSAP depending on the complexity of the animation.

[violet bough]

I've animated my above the fold with CSS, and am now looking to animate on scroll. Simple fade in effects.
Thanks for your input!

[unique moth]

I would use intersection observer in that case.
It's always good to practice native approaches and refresh our knowledge, but if you prefer a library then go with that. 🙂

[violet bough]

So, I started by using "native" intersection observers, got something working. it is however a LOT of code for one bit of animation.
Then, I tried gsap. Amazing! Took me a bit to realize that it required useContext to work well on React, and some learning curve to understand the syntax. Easy to read, short snippets of code ; transitions/fade effects are quite easy as you can set CC directly from the gsap snippet.

Anyway, my portfolio is well animated now 😄
https://geoffrey-le-meur.netlify.app/

[unique moth]

looks very nice 🙂

I wouldn't think it's a lot of code with intersection observer 🤔
You can listen to a list of elements by reference then you just need to add the correct css class to the element to make it appear. Of course is you have multiple animations/classes you would need to store there element's reference with the relevant animation/class so in your observer you can add the correct class to the correct element.

In overall does it really matter what path you've chosen? not really! It works, and it looks very nice and smooth so well done!!! : 👏 🙂

[violet bough]

Thanks for the feedback!
I'd never worked with useRef, and I found that quite difficult to understand. gsap made that very easy. Give it a go for your next project 🙂

[unique moth]

I agree, useRef could look difficult to use and now there is a question why would you use it and what for?

I looked at gsap-s documentation once, their API is not too bad and easy to use.

I never had to do any crazy animations but I will definitely give this library a try if we need something at work. Either gsap or framer motion 🙂

[violet bough]

I used it to reference the element that would trigger the animation ; It became too difficult for me when:

• there were multiple references
• I had to reference something in a child component