Curious if people have tried Webstudio. Looks like a direct Webflow clone that fixes some of its onerous problems – tokens instead of classes (add/remove your classes in any order), dedicated unnamed styling, self-host, source your CMS in Notion or AirTable or or). Also:

• Works with Relume
• Open source
• Active, open development
• Insane pricing (free for 1 project, including custom domain; $20/mo for unlimited sites and…everything?)

It’s back! ✨

I’ve been working through a wireframe for an hour or so and suddenly the AI wouldn’t pull up a different component. Now my project won’t load. 😞

I can’t start in Relume and move a Relume site to Webflow AND Figma? And then update designs in Figma (or Webflow) and push to Webflow (or Figma)?

I have a client who requires me to design in Figma so his developers can recreate the dumb static Figma designs in static code. I’m inclined to build it in Webflow, export it, and provide them with static code. But they’re likely to flinch, so I’m hoping to be able to do both… womp womp.

Anyone know how to find Webflow templates that use Relume?

I’ve built a few sites in Relume, and I’m addicted. I have a lawyer friend for whom I’m building a site for free, so I don’t wanna spend much time on it. I wanna start with a lawyer-centric Webflow template, but know that I can fall back to Relume if I need to add modules or something.

I was working with Layout 484 (the big text animation). It triggers on page load, so unless it’s at the top of your page, you won’t even notice the nice animation. I wanted it to trigger (and re-trigger) when scrolled into view.

I went to Claude, and after just 50 exchanges, I settled on this updated code (to replace in the code block that comes with the component).

Refer to the top of the code for a list of features. Note in the attached gif that the debug markers are on, and I’m showing how it animates from zero, scrolling away mid-animation, and resetting when it’s out of view. Your mileage may vary. Good luck!

Features:

• Words fade in one-by-one when scrolled into view
• All words instantly fade out (reset) together when scrolled out of view
• Prevents animation overlap during rapid scrolling
• Configurable timing, opacity levels, and trigger points
• Includes helpful debug markers (REMEMBER TO DISABLE FOR PRODUCTION!)

<!--
GSAP Word-by-Word Scroll Animation
Features:
- Words fade in one-by-one when scrolled into view
- All words instantly fade out (reset) together when scrolled out of view
- Prevents animation overlap during rapid scrolling
- Configurable timing, opacity levels, and trigger points
- Includes helpful debug markers (REMEMBER TO DISABLE FOR PRODUCTION!)

Created by:
- Claude-3.5-Sonnet (Anthropic)
- Lee Fuhr (hi@leefuhr.com)
(I should say: I'm no developer. I provide no support. For support, go where I went: Claude.ai.)

Version 1.0 - January 2024
-->

<!-- Include GSAP library first -->
<script src="<a target="_blank" rel="noopener noreferrer" href="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js">https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js</a>"></script>
<!-- Include ScrollTrigger plugin -->
<script src="<a target="_blank" rel="noopener noreferrer" href="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js">https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js</a>"></script>
<!-- Include Split-Type library -->
<script src="<a target="_blank" rel="noopener noreferrer" href="https://unpkg.com/split-type">https://unpkg.com/split-type</a>"></script>

<script>
window.addEventListener('load', function() {
  // CONFIGURATION SETTINGS
  const config = {
    // CLASSES FOR TARGETING ELEMENTS
    triggerClass: ".section_layout484", // The section that triggers the animation
    textClass: ".layout484_text",  // The text that will be split and animated

    // SCROLL TRIGGER POINTS
    startTrigger: "top 80%",  // Animation starts when top of section reaches 80% up from bottom of viewport
    endTrigger: "bottom 20%", // Animation ends when bottom of section reaches 20% up from bottom of viewport
    showMarkers: true,        // Visual indicators for trigger points (SET TO 'FALSE' FOR PRODUCTION!)

    // ANIMATION PARAMETERS
    initialOpacity: 0.3,      // Starting opacity of words (0 = invisible, 1 = fully visible)
    finalOpacity: 1,          // Ending opacity of words
    animationDuration: 0.8,   // How long the fade takes (in seconds)
    staggerTime: 0.1,         // Delay between each word's animation (in seconds)
    easeType: "power1.out"    // Animation easing function (controls acceleration/deceleration)
  };

  // REGISTER SCROLLTRIGGER PLUGIN
  if (typeof ScrollTrigger !== "undefined") {
    gsap.registerPlugin(ScrollTrigger);
  }

  // INITIALIZE TEXT SPLITTING
  const layoutText = new SplitType(config.textClass, { types: "words" });

  // SET INITIAL STATE
  gsap.set(layoutText.words, { opacity: config.initialOpacity });

  // ANIMATION STATE TRACKING
  let isAnimating = false;
  let currentTimeline = null;

  // ANIMATION FUNCTION
  function animate(toFinal) {
    // IF ANIMATION IS RUNNING, LET IT FINISH
    if (isAnimating) return;

    isAnimating = true;
    
    // CREATE NEW TIMELINE FOR THIS ANIMATION SEQUENCE
    currentTimeline = gsap.timeline({
      onComplete: () => {
        isAnimating = false;
        currentTimeline = null;
      }
    });

    if (toFinal) {
      // STAGGERED ANIMATION FOR APPEARING
      currentTimeline.to(layoutText.words, {
        opacity: config.finalOpacity,
        duration: config.animationDuration,
        stagger: config.staggerTime,
        ease: config.easeType
      });
    } else {
      // INSTANT RESET FOR ALL WORDS
      currentTimeline.to(layoutText.words, {
        opacity: config.initialOpacity,
        duration: config.animationDuration / 2, // Faster reset
        stagger: 0, // No stagger - all words together
        ease: "power1.in"
      });
    }
  }

  // SCROLL TRIGGER CREATION
  const st = ScrollTrigger.create({
    trigger: config.triggerClass,
    start: config.startTrigger,
    end: config.endTrigger,
    markers: config.showMarkers,
    onEnter: () => {
      if (!isAnimating) animate(true);
    },
    onLeave: () => {
      if (!isAnimating) animate(false);
    },
    onEnterBack: () => {
      if (!isAnimating) animate(true);
    },
    onLeaveBack: () => {
      if (!isAnimating) animate(false);
    }
  });
});
</script>