I'm trying to figure how Apple did it

[christineavatar]

Hello, I've had a customer ask me to replicate an effect he saw on Apple's website:

https://www.apple.com/airpods-3rd-generation/

He would like me to copy the effect to use on his new website.  Does anyone know how to do that?

[Nancy OShea]

Not sure which effect you mean. Are you asking about the image that starts small and scales up in size on page load?

Or perhaps you mean something else?

[osgood_]

Thats just crazy that animation effect - how the heck is that being achieved! Got to love clients, they see something and think it can be achieved at the click of a button. Thats a bespoke bit of animation and would most likey cost high 100's if not 1000's to produce. I'm pleased if I can get a div to fade in and out lol.

[Nancy OShea]

Yes.  It's no doubt custom.  Apple has plenty of resources to throw around.

[christineavatar]

The one I'm talking about is how the earpod grow bigger until they turn into something else. I stumbled around the source page but I can't figure out how they did it. Or any of the other effects they have. As you go down the page the pictures stay centered but change completely - wow! How do they do that? 

[Nancy OShea · Accepted solution]

See if this helps you.

https://scrollsequence.com/how-to-make-scroll-image-animation/

[christineavatar]

Thank you so much. I'll take a look at it (and hope I can do it!).