Streaming live at 10am (PST)

GoPro New Website - How?


#1

Hey all,

Can someone please take a stab at the “hero7” section of GoPro website https://www.gopro.com and show me the read-only link or help me understand how they did this??

I understand the hero section, footer, transparent pngs with scroll animations…, I just can’t figure out how they positioned the image of the hero7 camera to scroll into view after scrolling down from hero and then it stays there during the duration of scrolling and then scroll out of view once you get to the footer.

I tried fixed positioning but obviously, that didn’t work because it shows the camera in the hero, I tried some absolute and overflow :scroll ideas and none of those worked either

Please help? I don’t have a read-only link because I frustratingly deleted everything after hours of trying.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

They imported third-party custom code libraries

https://assets-aem.gopro.com/etc.clientlibs/gopro/homepage/v3/components/base/clientlibs.min.js

and wrote additional code on top of those libraries to do the animations

https://assets-aem.gopro.com/etc.clientlibs/gopro/homepage/v3/components/base/modulelibs.min.js


#3

Challange for you @PixelGeek ? :sweat_smile:


#4

Thanks for replying! Yea I saw that however, Webflow’s website has the same type of features.
Is this not possible to do in Webflow with out custom code?


#5

Couldn’t you control the camera separately by giving it it’s own scroll into view/scroll out of view interaction?

I know others (and myself) have requested a sticky scrolling function that currently doesn’t exist natively in Webflow. Some day hopefully.