Support: Explore Webflow University's library for comprehensive video lessons on getting started.
‍

Useful links from Webflow University:
‍

Before Publishing: Delete unused sections/pages, clean up CSS classes, clean up unused interactions and delete unused components.

Breakpoints: Check how your changes behave on different devices by clicking on the top bar of the viewport.

Backups: Restore previous versions from the Backups section in the left sidebar and clicking Settings in case of accidental deletions.

Editing Images and Text: Edit text by double-clicking on static content or use the CMS section for dynamic text. Replace images easily by clicking on them and choosing "Replace Image."

Editing Font Icons: To edit static content, you can replace fonts by clicking on them and entering the correct name of the icons. If you're using the CMS, you can only replace text for font icons in the CMS Collection list. Explore various font icon choices at Material Symbols & Icons - Google Fonts .

Dynamic Content (CMS): Learn how to manage and update dynamic content using the CMS, which instantly updates referenced content across pages.

Components: Utilize reusable components for efficient editing and consistency across layouts.

GSAP Classes

Hero Section

Hero 01 Container

Hero Thumb

How to customize

This fades in the image from 0 opacity to 1 over a 0.3 duration.

To make the fade in longer set a longer duration.

tl.to(imageClone, {
    opacity: 1,
    duration: 0.3
});

This fades out the image from 1 opacity to 0 over a 0.3 duration and scales it smaller to 0.5.

tl.to(imageClone, {
    opacity: 0,
    scale: 0.5,
    duration: 0.3
});

How to turn Off

Comment out the code between the <script> and </script> tags in the Home 01 settings.