Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

hg.wells

macrumors 65816
Apr 1, 2013
1,066
789
The LoveFrom site animation is coded in JavaScript if you look at the website sourcecode.
 

scottrichardson

macrumors 6502a
Jul 10, 2007
714
292
Ulladulla, NSW Australia
I’ll take a look when I get back to my studio. One can often tell what underlying platform is used IF it’s using a common one. Otherwise if it’s fully custom coded, and coded properly, you won’t know what language they used. It could be PHP, Python, or plain HTML. Or it could be fully JavaScript powered. Like I said I’ll take a look when home.
 

tis100

macrumors member
Jun 27, 2022
51
92
It's using the GSAP framework. I've never tried this.
I'm not seeing any evidence of that in the source code.

Instead, what they are doing is animating in Adobe After Effects and converting it to the web using Lottie.

For example, the comma animation javascript file has text like "ADBE Vector Graphic - Stroke" and "ADBE Vector Shape - Group", which means they are using an Adobe product.

Then in the main javascript file there is code like:

JavaScript:
s = [].concat([].slice.call(document.getElementsByClassName("lottie")[].slice.call(document.getElementsByClassName("bodymovin")))

Which matches the description of Lottie:

Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile and on the web!
 
Last edited:

redheeler

macrumors G3
Oct 17, 2014
8,583
9,180
Colorado, USA
I'm not seeing any evidence of that in the source code.

Instead, what they are doing is animating in Adobe After Effects and converting it to the web using Lottie.

For example, the comma animation javascript file has text like "ADBE Vector Graphic - Stroke" and "ADBE Vector Shape - Group", which means they are using an Adobe product.

Then in the main javascript file there is code like:

JavaScript:
s = [].concat([].slice.call(document.getElementsByClassName("lottie")[].slice.call(document.getElementsByClassName("bodymovin")))

Which matches the description of Lottie:
Plenty of hits when searching for "gsap" in the code so they're both in the dependency tree somewhere, although I looked for any dependency of Lottie on GSAP and vise-versa but couldn't find it.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.