how to make this animation in this website?
BTS22_admin
BTS
BTS Bioengineering | Motion Capture Systems for Sport & Healthcare
Capturing human body movement since 1986. We connect the world of healthcare and sport with cutting-edge motion capture technologies.
15 Replies
GSAP
I tried but couldn't , so I thought its something else 😦
I mean, under the hood it's all just javascript and CSS, but those look like a nightmare to reproduce from scratch, especially so many in sequence
should I link you my pen ?
you can, though I'm not going to be able to look at it. I suck at animations like this
here it seems glitchy
can anybody fix my animations ? 😦
I see 2 options: either 1) go with an
intersectionObserver JS construct to direct when an element reacts to the scroll position reaching the position of another element as the page scrolls, 2) attempt to comprehend what the gsap is actually doing, that involves breaking down each method/function call so it's clear why what happens is happening.
Which is your choice?
proper containment of the images is really important to produce the desired effect.i did it with intersection observer but the elment doesnt stay pinned at dead center
and I would like the gsock approach more
Just my 2 cents but if you're doing it for a business oriented website that don't. Fancy animations like those do more harm then good.
Howerver if you're doing it just for the heck of it then here's another one i wanted to share
https://kprverse.com/
KPR | Story
KPR | Story
Agree a lot. Those animations are annoying. Animations should have a purpose like giving feedback. Animations purely for the looks should be scarse. Unless the whole page is purely intended to make "an experience"
the use of
intersectionObserver doesn't have anything to do with how/why it doesn't stay pinned in the center. the positioning is entirely a result of the DOM structure of the images/containers and the CSS applied to them before/during/after the scrolling action.@i_lost_to_loba_kreygasm @i_lost_to_loba_kreygasm
yes?