GSAP really usefull to create animation and transition, I’m inspired by Seamless slider transition. I Try to recreate and add some custom animation like staggered transition image.
See the Pen Portfolio Browser by Rio Chandra (@Rio-Chandra) on CodePen.
I will not go to detail and explain code-by-code. But I will explain what obstacle I face when recreate this transition.
First, the staggered image, it’s bit hard to make seamless transition stagger between image. When the transition start it will create some panel with the same image background, by using fixed image position in background we could create continues image side-by-side.
Moreover, I face obstacle on tools part—shown technology it has been used—, it should staggered when it show up, but it couldn’t animated—Maybe because stored memory of previous state of component— so I leave it as it is.
Although I face some problem, but now I learn about gsap and their API. It’s easy and intuitive—AI help me too.
Thanks for your reading! Subscribe this small blog to get my latest news everyday!
