Hi,
I made a component for scrolling pages with some animated header effects.
It has sort of the same effect as the twitter app. I really like the result, so why not share it 
Here an example as animated gif (don’t worry, it’s very smooth when running live)
It’s a mix of some css-transitions and ionScroll.
If anyone’s interested I’ll make the component public on github. Even better if someone wants to collaborate/improve it.
Let me know.
Cheers, JJ
Hey! Nice effects! Great job! 
Please, I am interested on this.
Many thanks!
Hi TomCosta,
Thanks!
I’ll do some refactoring and add some more comments and then put it on github if you like. Let me know.
Cheers, JJ
I will be grateful.
Many thanks!
Looks really cool.
Please let me know the gihtub repo address when ready. Would be happy to collaborate!
Thanks.
Ok, so I put it up on github. My first public repository, so all tips welcome 
Here is the url: https://github.com/jjdeu/animated-header-component
Just clone it and install the node-modules. Then serve it for a first preview.
Looking forward to what you guys think.
Wow that’s great. I didn’t test it out so far but I think there is no problem using it in a Ionic 3 am I right?
And is it possible to expand the header again as soon as I start scrolling up? Not only when I reach top?
Hi Felix, I build it with Ionic 3 so no problem there
I’m not sure what you mean with expanding the header again. Could you elaborate?
Cheers, JJ
imagine a list with big amount of items (~30).
Now you scroll down to the 20th item. Meanwhile the Header shrinked like it should.
Now I’m not sure how it already behaves…what if I scroll up only 1or 2 items, without reaching the top of the list? Will the Header stay shrinked or will it expand? (Show the img or whatever it contains)
Ok, so you want the animation reversed as soon as you scroll up again, right? In the current
implementation the header expands again when the first item gets visible.
The way you want it should be possible. Maybe we can work on it together? We can make an extra parameter or something for both behaviors.
Maybe try to get the current version working first and look how the implementation works now. Let me know if you need help …
Cheers, JJ
Thank you for this.
But the problem is this component is not responsive for different devices.
Hi there,
Thanks for your reply. Could you be more specific about what’s not working?
Also, I haven’t updated this component for over a year now, for lack of interest in it.
Are you interested in working on it together to fix any issues / make it better?
Cheers, JJ
I just tested it in browser and resized to see if the image is responsive. The image will not resize on different screens like big screens. and also Can you tell me how can I resize the height of the header to make it bigger?
Sorry, I need to update the component to the latest version of Ionic. I have installed a new version of Node and the component is not compatible.
This will take some time (which I don’t have at the moment).
Monitor the git-repo to get a notification when I’ve got it running again.
Cheers, JJ
I used version 3.20.1 and it’s working.
Hi @jjdeu,
How can i implement this beautiful animation in my ionic project? i’m new in ionic.
Thanks 
Nice component, i really like that, great job!