learning webflow

resources

like list with my personal account:

inspiration made in webflow
that I could realistically do as well.

kits and templates

webflow page templates and slots

there is a new page template feature
you can have a template with nav, footer, cookie consent banner, and page interactions.
slots?
there is a default page slots that only allows for components to be inside of it

workflow

when starting a new webflow project from scratch first set up the design framework.
Decide to use or not Lumos which is very complete but adds a lot complexity to the project.

custom code

multiple ways to add custom code:

To run custom code before you had to publish the site and access it via the URL. Now you can compile and run the code in preview mode.

custom css

best apps

responsiveness

style changes made on desktop breakpoint automatically apply to all screen sizes
styles applied to smaller screen size do not affect larger screen sizes.
styles cascade down; tablet breakpoint changes apply to mobile, but not desktop.

components

to create variations on components you have to add new component properties
to create a new property select the elements you want to change that is part of the component > go to settings > "element settings" > Create & connect new property.
once the property is created we can override that element in any instance of the component and it won't affect the default component.

currently components don't support style properties (changing background color or position of independent instances). I think they are working on it but not available now.

solutions for this could be to wrap the instance in a parent div that handles the positioning. you can also make the child div width and height 100% and make the parent div handle the size.

another option for color change:

animations

select element > interactions > page trigger on page load (or other) > animation

states

in the class selector there is a tiny button that shows a dropdown menu to select the state of the element. most commonly you can edit the css properties of the element on hover.

to edit the transition time you have to add a transition (not an interaction/animation). on the element's style editor to the bottom. you have to select the specific property you edited and then adjust the time it takes to transition.

I think in CSS it is not possible to do background color gradient transitions.

change hover state of children elements

I did it with interactions (animations) but could also try this html style embed solution https://www.youtube.com/watch?v=YCsu9W2VwxU

misc

webflow is not very well optimized on firefox, use chrome.

nav bar

https://www.youtube.com/watch?v=-k2c-jfhoEs&t=548s
great vid to understand finnicks of the default webflow nav bar.
the default nav bar component is a good starting point to not have to build the whole thing from scratch (triggers and animations, like this vid) but it has some finnicky stuff that is good to understand.

custom close nav btn. can duplicate the default one and I'll function correctly, or I can add a button with empty # href link and it'll close the nav and scroll to top

blending nav and hero background (transparent nav)

To make a navbar that blends with the background of the hero section I need to wrap both the nav and hero in the same container that sets the background. nav is transparent on desktop and on mobile I need nav is positioned fixed and try to copy the gradient as best as possible

forms

similar to nav bar, the form components has unique preprogrammed behaviour. and a few less weird default css.
aren't so good

finsweet form submit js script to customize what happens after a webflow form submit. I've used this to trigger a zapier webhook.

Zapier also has webflow integration and you can listen to webflow events to trigger automations. I can listen to specific form (by id) submittions.
When this triggers are set up, they show up on webflow as an "app" on every form's settings

image resolutions

relevant: image & video formats
webflow does img optimization by default, serving different img for different screen sizes. also lazy load is enabled by default

so I had a problem where imgs on safari looked very blurry. what I did:

google analytics and tag manager

analytics
tag manager
the extension ' Google site tools' does not automatically add google tag manager to my site.

the purpose of the extension is to view analytics and search console troubleshooting while inside the site editor. having that context while inside the editor can be useful.

inside the site settings there is an option to integrate google analytics by adding the measurement ID. this injects GA js to the site

Stivent sent me a GTM script that I need to add to all of my site's pages. this doesn't directly add GA to do so GTM would need to have a GA tag that triggers on all page views. I think both hotjar and GA are set up as tags on GTM, so I just add the GTM code to the site and I'm good.

performance

resources size

script blocking and execution time

you can still use script tags on site or page settings and use the defer and async attributes. this method delays the loading of JS but still loads it. with GTM it lazy loads only if user interacts with page.

will not impact metrics, get analytics inside only when user interacts with page. if you need to have analytics that load with the page keep them outside of GTM.
GTM debug tool won't work unless you interact with page first.

other optimization guides that I haven't finished watching

changing images to webp didn't improve overall score significantly. blocking GTM improves score a lot.

render blocking resources and css
can't do anything about render-blocking resources and unused css on webflow unless you export code and host somewhere else.
here is a solution guide using cloudflare CDN and still hosting on webflow. he uses a purify css feature of cloudflare CDN.

relevant discussions on forum:

**safari choppy animations

possible solutions:

custom features

Document / PDF embed

https://webflow.com/made-in-webflow/website/pdfembed

stop page scroll when nav open

<style>
body:has(.w-nav-button.w--open) {
	overflow: hidden
}
</style>

Cookies#cookies consent
paid:

These use the free finsweet deprecated free solution under the hood:

payments

memberstack

localization / multiple languages

particular effects

colored blur background

blur effect
blur tutorial
blur example
blur animation example

blur components issue:

horizontal scrolling

overflow

card slider

horizontal scroll effect
oficial guide, examples 1 2 3

hiding scrollbar
https://discourse.webflow.com/t/hide-scroll-bar/92705/4
https://www.gemeosagency.com/en/gemeos-academy/customize-the-design-of-dot-sliders-in-webflow
https://discourse.webflow.com/t/how-do-i-hide-the-browser-scrollbar-from-appearing-when-a-user-scrolls/59643/9

single open accordion

next time use JS
https://www.youtube.com/watch?v=7FUFY-oKel8
https://finsweet.com/attributes/accordion#script
https://webflow.com/made-in-webflow/website/faqs-from-rich-text-cms?ref=made-in-webflow-search&searchValue=faq cms
or try this one with buttons https://preview.webflow.com/preview/faq-no-code?utm_medium=preview_link&utm_source=showcase&utm_content=faq-no-code&preview=95f42ccbec97f007e4f79285a4ef5a94&workflow=canvas

count up animation

videos

scrolling animation

animation that plays forward or backwards depending on user scrolling, exaple: apple products pages use them a lot.

could make a video that plays alongside scroll
tutorial oficial: https://www.youtube.com/watch?v=2djbqUOtFgg transforma un video en lottie (secuencia de imgs)
este es una mejora de oficial: https://thelazygod.com/snippets/video-control. produce el mismo efecto usando formato de video, no lottie.

mas ejemplos sin lottie:

xtra https://discourse.webflow.com/t/video-playback-synced-with-scroll-while-page-is-scrolling-interaction/166768/2

autoplay on scroll

to make videos start playing when the user scrolls down to the showcase section.

https://discourse.webflow.com/t/how-to-start-background-video-only-when-it-is-in-view/208636/2

<script>
document.addEventListener("DOMContentLoaded", function() {
  var videoHasBeenPlayed = false; // Flag to check if video has played
  var video = document.getElementById('video'); // Replace 'yourVideoID' with your actual video ID

  function playVideoOnScroll() {
    if (videoHasBeenPlayed) return; // Stop function if video has already played

    var videoRect = video.getBoundingClientRect();
    var videoVisible = (videoRect.top <= window.innerHeight) && ((videoRect.top + videoRect.height) >= 0);

    // Play the video if it's visible
    if (videoVisible) {
      video.play();
      videoHasBeenPlayed = true; // Update flag so video doesn't play again
    }
  }

  window.addEventListener('scroll', playVideoOnScroll);
  playVideoOnScroll(); // Check if video is initially in view
});

</script>

https://www.youtube.com/watch?v=GItHQQF_Q94

<script>
let player = $('video');
let hasReachedVideo = false;

function isInView(elem){
  return $(elem).offset().top - $(window).scrollTop() < $(elem).height();
}

$(window).scroll(function() {
  
  if(isInView($('#vid-container')) && !hasReachedVideo {
     hasReachedVideo = true;
     player.get(0).play();
  }
});
</script>

https://finsweet.com/attributes/auto-video#examples
on head. works but the vissense solution (next one) is more intuitive.

<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-autovideo@1/autovideo.js"></script>

https://discourse.webflow.com/t/targeting-background-videos-for-restart-on-scroll-into-view/178418/2
Take out “myVideo.currentTime = 0;” to have it restart video where it paused ✅✅✅

<script>
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/vissense/0.10.0/vissense.min.js', function() {
  const vids = document.getElementsByTagName('video'); 
  if(vids.length === 0) return;
  Array.prototype.map.call(vids, function(myVideo) {
    VisSense.VisMon.Builder(VisSense(myVideo, {
      fullyvisible: 0.8
    }))
    .on('fullyvisible', function() {
      myVideo.currentTime = 0;
      myVideo.play();
    })
    .on('hidden', function() {
      myVideo.pause();
    })
    .build().start();
  });
});
</script>

https://webflow.com/made-in-webflow/website/playvideoonhover?ref=made-in-webflow-search&searchValue=video autoplay
simple on hover effect. class selector instead of ID

<script>
$(document).ready(function() {
    $(".video-element").hover(function() {
        $('video', this).get(0).play();
    }, function() { // This function is triggered when the mouse leaves the element
        $('video', this).get(0).pause();
    });
});
</script>

https://webflow.com/made-in-webflow/website/magnetic-images-and-video-on-hover?ref=made-in-webflow-search&searchValue=play video on scroll
show/hide triggers on hover. video displayed next to mouse.

autoplay youtube/vimeo video component

lazy loading videos

hosting >30mb vids on aws or dropbox

https://www.youtube.com/watch?v=pEDd54dLv3E