Parallax scrolling & animations in Webflow

While Webflow's visual interface makes animations and parallax effects accessible, adding a touch of code can unlock more creative possibilities and optimize performance. Here are some examples:

1. Basic Parallax Scrolling:

• Trigger Scroll Interaction: Set a scroll trigger on a div containing your elements.
• Transform Elements: In the “Actions” tab, add a “Set Attribute” action for the transform property on each element you want to scroll with parallax.

Example:

JavaScript
// Scroll factor (adjust for desired effect)
const scrollFactor = 0.5;

function updateParallax(event) {
  const scrollTop = window.scrollY;
  for (const element of document.querySelectorAll('.parallax-element')) {
    const yOffset = element.dataset.offset * scrollFactor;
    element.style.transform = `translateY(${yOffset}px)`;
  }
}

window.addEventListener('scroll', updateParallax);

// Set data-offset attributes on parallax elements
// (e.g., data-offset="2" for twice the scroll speed)

2. Animated Parallax with Intersection Observer:

• Observe Elements: Use an Intersection Observer to track when parallax elements enter the viewport.
• Trigger Animations: Within the observer callback, trigger Webflow's built-in animations on the element.

Example:

JavaScript
const options = {
  root: null,
  threshold: 0.5,
};

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      entry.target.classList.add('parallax-animation');
    } else {
      entry.target.classList.remove('parallax-animation');
    }
  }
});

const parallaxElements = document.querySelectorAll('.parallax-element');
parallaxElements.forEach((element) => observer.observe(element));

3. Microinteractions with JavaScript:

• Hover Effects: Bind mouse events to trigger subtle animations on hover using Webflow's Interactions panel.
• Scroll-based Animations: Combine scroll triggers with custom JavaScript to create dynamic microinteractions based on scroll position.

Example:

JavaScript
const element = document.getElementById('micro-target');

element.addEventListener('mouseenter', () => {
  element.classList.add('hover-animation');
});

element.addEventListener('mouseleave', () => {
  element.classList.remove('hover-animation');
});

window.addEventListener('scroll', () => {
  // Update element styles based on scroll position
});

Need Help?

Need custom Webflow Development?