لرن سرا

برچسب: Creating

  • Making Animations Smarter with Data Binding: Creating a Dynamic Gold Calculator in Rive

    Making Animations Smarter with Data Binding: Creating a Dynamic Gold Calculator in Rive


    Designing visuals that respond to real-time data or user input usually means switching between multiple tools — one for animation, another for logic, and yet another for implementation. This back-and-forth can slow down iteration, make small changes cumbersome, and create a disconnect between design and behavior.

    If you’ve spent any time with Rive, you know it’s built to close that gap. It lets you design, animate, and add interaction all in one place — and with features like state machines and data binding, you can make your animations respond directly to variables and user actions.

    To demonstrate how we use data binding in Rive, we built a small interactive project — a gold calculator. The task was simple: calculate the price of 5g and 10g gold bars, from 1 to 6 bars, using external data for the current gold price per gram. The gold price can be dynamic, typically coming from market data, but in this case we used a manually set value.

    Let’s break down how the calculator is built, step by step, starting with the layout and structure of the file.

    1. File Structure

    The layout is built for mobile, using a 440×900 px artboard. It’s structured around three layout groups:

    1. Title with gold price per gram
    2. Controls for choosing gold bar amount and weight
    3. Gold bar illustration

    The title section includes a text layout made of two text runs: one holds static text like the label, while the other is dynamic and connected to external data using data binding. This allows the gold price to update in real time when the data changes.

    In the controls section, we added plus and minus buttons to set the number of gold bars. These are simple layouts with icons inside. Below them, there are two buttons to switch between 5g and 10g options. They’re styled as rounded layouts with text inside.

    In the state machine, two timelines define the tab states: one for when the 10g button is active, using a solid black background and white text, and another for 5g, with reversed styles. Switching between these two updates the active tab visually.

    The total price section also uses two text runs — one for the currency icon and one for the total value. This value changes based on the selected weight and quantity, and is driven by data binding.

    2. Gold Bar Illustration

    The illustration is built using a nested artboard with a single vector gold bar. Inside the calculator layout, we duplicated this artboard to show anywhere from 1 to 6 bars depending on the user’s selection.

    Since there are two weight options, we made the gold bar resize visually — wider for 10g and narrower for 5g. To do that, we used N-Slices so that the edges stay intact and only the middle stretches. The sliced group sits inside a fixed-size layout, and the artboard is set to Hug its contents, which lets it resize automatically.

    Created two timelines to control bar size: one where the width is 88px for 10g, and another at 74px for 5g. The switch between them is controlled by a number variable called Size-gram gold, where 5g is represented by 0 and 10g by 1 with 1 set as the default value.

    In the state machine, we connected this variable to the two timelines (the 10g timeline set as the default)— when it’s set to 0, the layout switches to 5g; when it’s 1, it switches to 10g. This makes the size update based on user selection without any manual switching. To keep the transition smooth, a 150ms animation duration is added.

    3. Visualizing 1–6 Gold Bars

    To show different quantities of gold bars in the main calculator layout, we created a tiered structure using three stacked layout groups with a vertical gap -137. Each tier is offset vertically to form a simple pyramid arrangement, with everything positioned in the bottom-left corner of the screen.

    The first tier contains three duplicated nested artboards of a single gold bar. Each of these is wrapped in a Hug layout, which allows them to resize correctly based on the weight. The second tier includes two gold bars and an empty layout. This empty layout is used for spacing — it creates a visual shift when we need to display exactly four bars. The top tier has just one gold bar centered.

    All three tiers are bottom-centered, which keeps the pyramid shape consistent as bars are added or removed.

    To control how many bars are visible, we created 6 timelines in Animate mode — one for each quantity from 1 to 6. To hide or show each gold bar, two techniques are used: adjusting the opacity of the nested artboard (100% to show, 0% to hide) and modifying the layout that wraps it. When a bar is hidden, the layout is set to a fixed width of 0px; when visible, it uses Hug settings to restore its size automatically.

    Each timeline has its own combination of these settings depending on which bars should appear. For example, in the timeline with 4 bars, we needed to prevent the fourth bar from jumping to the center of the row. To keep it properly spaced, we assigned a fixed width of 80px to the empty layout used for shifting. On the other timelines, that same layout is hidden by setting its width to 0px.

    This system makes it easy to switch between quantities while preserving the visual structure.

    4. State Machine and Data Binding Setup

    With the visuals and layouts ready, we moved on to setting up the logic with data binding and state transitions.

    4.1 External Gold Price

    First, we created a number variable called Gold price gram. This value can be updated externally — for example, connected to a trading database — so the calculator always shows the current market price of gold. In our case, we used a static value of 151.75, which can also be updated manually by the user.

    To display this in the UI, we bound Text Run 2 in the title layout to this variable. A converter in the Strings tab called “Convert to String Price” is then created and applied to that text run. This converter formats the number correctly for display and will be reused later.

    4.2 Gold Bar Size Control

    We already had a number variable called Size-gram gold, which controls the weight of the gold bar used in the nested artboard illustration.

    In the Listeners panel, two listeners are created. The first is set to target the 5g tab, uses a Pointer Down action, and assigns Size-gram gold = 0. The second targets the 10g tab, also with a Pointer Down action, and assigns Size-gram gold = 1.

    Next, two timelines (one for each tab state) are brought into the state machine. The 10g timeline is used as the default state, with transitions added: one from 10g to 5g when Size-gram gold = 0, and one back to 10g when Size-gram gold = 1. Each transition has a duration of 100ms to keep the switching smooth.

    4.3 Gold Bar Quantity

    Next, added another number variable, Quantity-gold, to track the number of selected bars. The default value is set to 1. In the Converters under Numeric, two “Calculate” converters are created — one that adds “+1” and one that subtracts “-1”.

    In the Listeners panel, the plus button is assigned an action: Quantity-gold = Quantity-gold, using the “+1” converter. This way, clicking the plus button increases the count by 1. The same is done for the minus button, assigning Quantity-gold = Quantity-gold and attaching the “-1” converter. Clicking the minus button decreases the count by 1.

    Inside the state machine, six timelines are connected to represent bar counts from 1 to 6. Each transition uses the Quantity-gold value to trigger the correct timeline.

    By default, the plus button would keep increasing the value endlessly, but the goal is to limit the max to six bars. On the timeline where six gold bars are active, the plus button is disabled by setting its click area scale to 0 and lowering its opacity to create a “disabled” visual state. On all other timelines, those properties are returned to their active values.

    The same logic is applied to the minus button to prevent values lower than one. On the timeline with one bar, the button is disabled, and on all others, it returns to its active state.

    Almost there!

    4.4 Total Price Logic

    For the 5g bar price, we calculated it using this formula:

    Total Price = Gold price gram + Quantity-gold * 5

    In Converters → Numeric, a Formula converter was created and named Total Price 5g Formula to calculate the total price. In the example, it looked like:

    {{View Model Price/Gold price gram}}*{{View Model Price/Quanity-gold}}*5.0

    Since we needed to display this number as text, the Total Price number variable was also converted into a string. For that, we used an existing converter called “Convert to String Price.”

    To use both converters together, a Group of converters was created and named Total Price 5g Group, which included the Total Price 5g Formula converter followed by the Convert to String Price converter.

    Then, the text for the price variable was data bound by adding the Total Price variable in the Property field and selecting Total Price 5g Group in the Convert field.

    To handle the 10g case, which is double the price, two options are explored — either creating a new converter that multiplies by 10 or multiplying the existing result by 2.

    Eventually, a second text element is added along with a new group of converters specifically for 10g. This includes a new formula:

    Total Price = Gold price gram + Quantity-gold * 10

    A formula converter and a group with both that formula and the string converter are created and named “Total Price 10g Group.”

    Using timelines where the 5g and 10g buttons are in their active states, we adjusted the transparency of the text elements. This way, the total price connected to the 5g converters group is visible when the 5g button is selected, and the price from the 10g converters group appears when the 10g button is selected.

    It works perfectly.

    After this setup, the Gold price gram variable can be connected to live external data, allowing the gold price in the calculator to reflect the current market value in real time.

    Wrapping Up

    This gold calculator project is a simple example, but it shows how data binding in Rive can be used to connect visual design with real-time logic — without needing to jump between separate tools or write custom code. By combining state machines, variables, and converters, you can build interfaces that are not only animated but also smart and responsive.

    Whether you’re working on a product UI, a prototype, or a standalone interactive graphic, Rive gives you a way to bring together motion and behavior in a single space. If you’re already experimenting with Rive, data binding opens up a whole new layer of possibilities to explore.



    Source link

  • Elastic Grid Scroll: Creating Lag-Based Layout Animations with GSAP ScrollSmoother

    Elastic Grid Scroll: Creating Lag-Based Layout Animations with GSAP ScrollSmoother


    You’ve probably seen this kind of scroll effect before, even if it doesn’t have a name yet. (Honestly, we need a dictionary for all these weird and wonderful web interactions. If you’ve got a talent for naming things…do it. Seriously. The internet is waiting.)

    Imagine a grid of images. As you scroll, the columns don’t move uniformly but instead, the center columns react faster, while those on the edges trail behind slightly. It feels soft, elastic, and physical, almost like scrolling with weight, or elasticity.

    You can see this amazing effect on sites like yzavoku.com (and I’m sure there’s a lot more!).

    So what better excuse to use the now-free GSAP ScrollSmoother? We can recreate it easily, with great performance and full control. Let’s have a look!

    What We’re Building

    We’ll take CSS grid based layout and add some magic:

    • Inertia-based scrolling using ScrollSmoother
    • Per-column lag, calculated dynamically based on distance from the center
    • A layout that adapts to column changes

    HTML Structure

    Let’s set up the markup with figures in a grid:

    <div class="grid">
  <figure class="grid__item">
    <div class="grid__item-img" style="background-image: url(assets/1.webp)"></div>
    <figcaption class="grid__item-caption">Zorith - L91</figcaption>
  </figure>
  <!-- Repeat for more items -->
</div>

    Inside the grid, we have many .grid__item figures, each with a background image and a label. These will be dynamically grouped into columns by JavaScript, based on how many columns CSS defines.

    CSS Grid Setup

    .grid {
  display: grid;
  grid-template-columns: repeat(var(--column-count), minmax(var(--column-size), 1fr));
  grid-column-gap: var(--c-gap);
  grid-row-gap: var(--r-gap);
}

.grid__column {
  display: flex;
  flex-direction: column;
  gap: var(--c-gap);
}

    We define all the variables in our root.

    In our JavaScript then, we’ll change the DOM structure by inserting .grid__column wrappers around groups of items, one per colum, so we can control their motion individually. Why are we doing this? It’s a bit lighter to move columns rather then each individual item.

    JavaScript + GSAP ScrollSmoother

    Let’s walk through the logic step-by-step.

    1. Enable Smooth Scrolling and Lag Effects

    gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

const smoother = ScrollSmoother.create({
  smooth: 1, // Inertia intensity
  effects: true, // Enable per-element scroll lag
  normalizeScroll: true, // Fixes mobile inconsistencies
});

    This activates GSAP’s smooth scroll layer. The effects: true flag lets us animate elements with lag, no scroll listeners needed.

    2. Group Items Into Columns Based on CSS

    const groupItemsByColumn = () => {
  const gridStyles = window.getComputedStyle(grid);
  const columnsRaw = gridStyles.getPropertyValue('grid-template-columns');

  const numColumns = columnsRaw.split(' ').filter(Boolean).length;

  const columns = Array.from({ length: numColumns }, () => []); // Initialize column arrays

  // Distribute grid items into column buckets
  grid.querySelectorAll('.grid__item').forEach((item, index) => {
    columns[index % numColumns].push(item);
  });

  return { columns, numColumns };
};

    This method groups your grid items into arrays, one for each visual column, using the actual number of columns calculated from the CSS.

    3. Create Column Wrappers and Assign Lag

    const buildGrid = (columns, numColumns) => {

  const fragment = document.createDocumentFragment(); // Efficient DOM batch insertion
  const mid = (numColumns - 1) / 2; // Center index (can be fractional)
  const columnContainers = [];

  // Loop over each column
  columns.forEach((column, i) => {
    const distance = Math.abs(i - mid); // Distance from center column
    const lag = baseLag + distance * lagScale; // Lag based on distance from center

    const columnContainer = document.createElement('div'); // New column wrapper
    columnContainer.className = 'grid__column';

    // Append items to column container
    column.forEach((item) => columnContainer.appendChild(item));

    fragment.appendChild(columnContainer); // Add to fragment
    columnContainers.push({ element: columnContainer, lag }); // Save for lag effect setup
  });

  grid.appendChild(fragment); // Add all columns to DOM at once
  return columnContainers;
};

    The lag value increases the further a column is from the center, creating that elastic “catch up” feel during scroll.

    4. Apply Lag Effects to Each Column

    const applyLagEffects = (columnContainers) => {
  columnContainers.forEach(({ element, lag }) => {
    smoother.effects(element, { speed: 1, lag }); // Apply individual lag per column
  });
};

    ScrollSmoother handles all the heavy lifting, we just pass the desired lag.

    5. Handle Layout on Resize

    // Rebuild the layout only if the number of columns has changed on window resize
window.addEventListener('resize', () => {
  const newColumnCount = getColumnCount();
  if (newColumnCount !== currentColumnCount) {
    init();
  }
});

    This ensures our layout stays correct across breakpoints and column count changes (handled via CSS).

    And that’s it!

    Extend This Further

    Now, there’s lots of ways to build upon this and add more jazz!

    For example, you could:

    • add scroll-triggered opacity or scale animations
    • use scroll velocity to control effects (see demo 2)
    • adapt this pattern for horizontal scroll layouts

    Exploring Variations

    Once you have the core concept in place, there are four demo variations you can explore. Each one shows how different lag values and scroll-based interactions can influence the experience.

    You can adjust which columns respond faster, or play with subtle scaling and transforms based on scroll velocity. Even small changes can shift the rhythm and tone of the layout in interesting ways. And don’t forget: changing the look of the grid itself, like the image ratio or gaps, will give this a whole different feel!

    Now it’s your turn. Tweak it, break it, rebuild it, and make something cool.

    I really hope you enjoy this effect! Thanks for checking by 🙂



    Source link

  • Creating Social Media Buzz Around a New Holistic Healthcare Clinic


    A robust social media presence is instrumental for any business, including holistic healthcare clinics, to thrive. Effective use of social media can significantly enhance a clinic’s visibility and build a respected reputation. By tapping into the vast online audience, clinics can connect with potential clients, offering educational content and showcasing their unique services in holistic healthcare.

    How to Develop an Engaging Content Strategy

    An engaging content strategy is vital in capturing the audience’s attention and establishing a meaningful connection. With over 60 to 70 million Americans suffering from gastrointestinal diseases, there is a substantial audience seeking alternative health solutions. By tailoring content to address these concerns, clinics can position themselves as valuable resources, providing knowledge and insights into holistic approaches.

    In developing content, quality should always take precedence over quantity. Educating the audience about how holistic methods can aid in alleviating symptoms related to GI disorders can be highly effective. Sharing success stories, informative articles, and expert opinions not only engages but also builds trust, positioning the clinic as an authority in the holistic healthcare space.

    By consistently providing useful, relatable content, clinics can cultivate a loyal following who value their expertise. Utilizing stories of triumph and improvement can humanize the clinic’s brand and foster a community of healing. A well-thought-out content strategy is essential in creating a strong, engaging online presence.

    What Platforms Are Most Effective for Healthcare Promotion?

    The choice of social media platforms can significantly influence the reach and impact of healthcare promotion. Each platform serves different demographics and types of content, making it crucial for clinics to select the most appropriate channels. Facebook, Instagram, and LinkedIn are among the top platforms where healthcare content is highly effective due to their vast and varied audiences.

    Facebook allows clinics to connect with their audience through educational posts, live Q&A sessions, and community-building groups. For example, your practice could use Facebook to promote a free flu vaccine clinic, as it is among the top three most common routine vaccines. Additionally, Instagram is perfect for visual storytelling, showcasing the clinic’s environment, patient testimonials, and holistic lifestyle tips. Meanwhile, LinkedIn can be used to network with other healthcare professionals and share research and professional insights.

    Selecting the right platform enables clinics to engage effectively with their target audience, increasing visibility and interaction. A strategic, multi-platform approach can maximize reach, as different segments of the audience can be engaged through their preferred social media channels. Ultimately, the goal is to build an interconnected online presence that enhances the clinic’s reputation and accessibility.

    How to Measure the Success of Social Media Campaigns

    Measuring the success of social media campaigns requires a strategic approach. Key performance indicators (KPIs) such as engagement rates, reach, and conversion metrics provide insights into the effectiveness of content. Regularly monitoring these metrics helps refine strategies and ensures the clinic remains aligned with its business goals.

    Analytical tools, native to platforms like Facebook and Instagram, offer valuable data on audience interactions and content performance. This data-driven approach enables holistic healthcare clinics to understand what resonates with their audience and adjust their strategies accordingly. A successful campaign enhances audience engagement, boosts brand awareness, and ultimately drives patient appointments.

    Beyond quantitative metrics, social media success is also reflected in qualitative aspects such as brand perception and audience loyalty. Building an online community centered around support and education leads to stronger patient relationships. In essence, the success of social media campaigns is multifaceted, encompassing both measurable outcomes and more intangible benefits such as increased trust and brand credibility.

    How Can Partnerships Amplify Your Reach?

    Forming strategic partnerships is a powerful way to extend a clinic’s reach and impact. Collaborations with wellness influencers, other healthcare providers, or businesses in related fields can amplify messages and broaden audiences. Early on, nearly one million people live with significant mental health disorders, presenting an opportunity for partnerships linking mental health with holistic care.

    By partnering with influencers in the health and wellness space, clinics can tap into established communities that align with their values. These collaborations bring authenticity and credibility, as trusted voices within the community vouch for the clinic’s services. Simultaneously, partnerships with companies offering complementary services facilitate a seamless integration of holistic solutions for clients.

    Successful partnerships are built on shared goals and a mutual understanding of audience needs. They can result in joint content creation, shared events, and cross-promotional strategies that greatly increase the clinic’s business visibility. These partnerships not only expand reach but also enhance the clinic’s reputation as a collaborative and holistic health provider.

    What Role Does Authenticity Play in Creating Trust?

    Authenticity is a cornerstone of building trust with an online audience. Patients are more likely to engage with clinics that present themselves transparently and genuinely. Sharing real stories, challenges, and successes in holistic care creates a relatable narrative that resonates with the audience.

    Authentic content, such as patient testimonials and behind-the-scenes looks at clinic operations, helps potential clients understand and trust the clinic’s mission and values. An honest portrayal of how holistic methods improve patient well-being strengthens the bond between the clinic and its community. This connection fosters a sense of belonging, encouraging patients to choose holistic healthcare for their needs.

    A clinic that consistently demonstrates authenticity is likely to cultivate a loyal following. This leads to positive word-of-mouth recommendations, further solidifying the clinic’s standing in the holistic healthcare business. Ultimately, by prioritizing authenticity, clinics can build lasting relationships with patients and sustain a thriving online presence.

    Crafting an effective social media strategy is essential for holistic healthcare clinics aiming to foster community engagement and elevate their visibility. These insights provide a roadmap for clinics to enhance their online presence, building a trusted and esteemed reputation that resonates with their audience’s needs and values.



    Source link