learning webflow
resources
- oficial webflow university is the 1st place you should look for solutions
- then webflow community forums is very good
- en webflow marketplace puedes buscar y clonar paginas / componentes.
- Timothy Ricks
- WebBae's webflow resources https://keeganleary.notion.site/004af01c9e5e480a9b53572b6a3f31c7?v=e5a58a4caa6c42f1b640b88828d56876
kits and templates
- relume is a UI kit and ai builder for webflow Relume AI Site Builder: Crash Course (2025) is paid and expensive but there is a free webflow library
- flowbase: lib, components and tools for webflow, figma, framer. expensive, some free components.
- webflow oficial:
- libraries show up as new layouts. Add -> Layout -> NewLib
- templates ask you to create a website but you can open editor and copy whatever
- made in webflow community templates and 'made in webflow' are very similar features.
- 'Protocore' and 'osmo' does crazy advanced stuff
- Lumos
- framework, clonable starter project, style guide (spacing, naming convention..)
- components,
- helper chrome extension ⭐️ must have (px to rem feature)
custom code
there is a custom code embed element.
global custom code is added in the site setting, custom code tab. This affects all pages.
while inside the editor, you can add custom code to each static page.
consider using async or defer attribute to script tags.
custom code (maybe with some exceptions) don't execute in the webflow editor / previewer. This is to not break the editor itself tryint to run custom user code.
To run custom code you have to publish the site and access it via the URL. to debug the code use browser's dev tools.
custom css
- selected elements have a 'custom properties' menu
- Sass app, opens a text editor and saves a css file to the page.
best apps
- flowbase extensions, flowbase boosters (js scripts).
- there is a GSAP animations app that has some free god animations.
- flowbase boosters added gsap animations too for text.
- SEO apps
- icons
- apps to connect to shopify
- Sass app, opens a text editor and saves a css file to the page.
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:
- pageload animation and change the background color on load. this way doesn't need warp divs. example
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
- example site
- another simpler one this one just transitions between 120px->100 px and (0,0,0,0)->(14,14,14) color
- frost nav
- GSAP scroll trigger
forms
similar to nav bar, the form components has unique preprogrammed behaviour. and a few less weird default css.
aren't so good
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:
- toggle the "disable responsive image" setting on the img, this forces the browser to render uncompressed version of img.
- I placed the img as a background of a div instead of being an inline img. ❌
- on Figma I upscaled my image (scaler tool) to a higher res. see figma#exporting assets, exported svg and imported to webflow ❌
- exported higher res img as png and imported to webflow ✔
don't know if last step solved it or combination of 1 and 3
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
- test with lighthouse chrome extension.
- https://pagespeed.web.dev/
- enable all optimizations on site settings (css and js minification, etc...)
resources size
- change imgs format to webp or avif
- clean unused interactions and css classes
script blocking and execution time
- try putting the analytics code on footer and add async. lazy load google tag manager (GTM). finally check if analytics still work as expected
https://www.youtube.com/watch?v=0K_r6AkqrDo
he adds all custom scripts of his site as tags (custom vid player, disable scroll...)
for trigger he uses all pages, he doesn't care on which specific page he needs to run the script but if he did he would use 'GTM URL expressions'.
js needs to be ES5 and remember to minify it. toptal minify tool
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
-
optimize GTM.
make some scripts load after page load, disable some features or analytics you don't actually use
https://stackoverflow.com/questions/77668991/huge-processing-time-for-gtag-making-the-site-unresponsive
https://dexecure.com/blog/optimizing-google-tag-manager/
https://www.analyticsmania.com/post/google-tag-manager-impact-on-page-speed-and-how-to-improve/
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:
- https://discourse.webflow.com/t/eliminate-render-blocking-resources-page-speed-mobile/154115/17
- https://discourse.webflow.com/t/options-for-render-blocking-resources/168978/34?page=2
**safari choppy animations
counting up animations and accordions on FAQ and product page have choppy animations on safari/ios, very slow
possible solutions:
-
expect change property will-change: transform, will-change:filter
-
try having animation in a block, not flexbox.
-
wrapping in some div ? https://discourse.webflow.com/t/move-animations-choppy-on-safari/256743
-
the page overall might be intensive to render. I read on a forum post that css blur filter can be big hit in performance on safari. (the background color blurs use that filter)
-
try another animation solution. could be another lib or search the webflow marketplace
-
advanced image optimization / caching with cloudflare https://www.milkmoonstudio.com/post/supercharge-your-webflow-project-with-cloudflare-a-deep-dive-into-our-image-optimization-script
particular effects
colored blur background
blur effect
blur tutorial
blur example
blur animation example
blur components issue:
- use % or vw for positioning relative to screen size.
- for smaller screens move the blurs a bit out of the way and decrease the opacity, maybe even change the size and make it smaller.
horizontal scrolling
overflow
- flex horizontal, with scroll overflow
card slider
- swiper js lib, tutorial
- oficial guide
- https://webflow.com/made-in-webflow/website/Responsive-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
- slot machine trigger animations, hardcoded hidden html elements.
all other ones use added js
I'll use this one. modified the code a bit so it triggers animation when elements are closer to the center of screen. also so numbers starts on 00.
count up animation conv chatGPT https://chatgpt.com/c/670eefbf-0964-800e-b172-72621c9cd60c
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:
- https://webflow.com/made-in-webflow/website/video-scroll-interaction
- https://webflow.com/made-in-webflow/website/Video-on-scroll-Without-lottie
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
- https://webflow.com/made-in-webflow/website/Automatically-Play-Videos-On-Horizontal-Scroll?ref=made-in-webflow-search&searchValue=play video on scroll
- https://webflow.com/made-in-webflow/website/test-video-on-scroll?ref=made-in-webflow-search&searchValue=play video on scroll
lazy loading videos
- https://webflow.com/made-in-webflow/website/lazy-load-autoplay-videos?ref=made-in-webflow-search&searchValue=video autoplay
- https://github.com/Webflow-Examples/lazy-load-bg-video
hosting >30mb vids on aws or dropbox
https://www.youtube.com/watch?v=pEDd54dLv3E
multiple languages
polyflow
weglot
payments
memberstack