Creating Stunning CSS Animations for a Slider Using SVG

Looking for help to create an SVG CSS animation for a slider using a mockup image. The animation will feature a balloon with a number value that zooms in and out from left to right or right to left.

Currently stuck at the starting point and unsure how to proceed, particularly struggling with how to make the front balloon overlap the two balloons in the background during the zoom effect.

If anyone has a similar sample or can provide guidance on how to approach this challenge, it would be greatly appreciated!

Updated:

Apologies for my subpar drawing skills, but hopefully these images clarify the concept better:

https://i.sstatic.net/yRhgD.png

https://i.sstatic.net/Q8YNq.png

javascripthtmlcsssvg

Answer №1

I followed the instructions given in the question

The challenge I'm facing is how to adjust the size of this balloon to overlap the two balloons behind it.

By hovering over the middle ball, it expands and covers the adjacent balls

#middle {
transform-origin:center;
transform-box:fill-box;

}
#middle:hover {
animation:scaled  0.8s linear forwards;
fill:#CDA349;
} 

@keyframes scaled {
100%{transform:scale(2.1);}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="440" height="440" viewBox="-50 -50 550 550">
    <g fill="#F1C056">
  
  <path d="M311.4 157.5c14.2-4.3 34.3 6.6 46.1 18.2a44.3 44.3 0 0 1 12.6 30.3c.1 23.4-14.8 44.8-26.1 65.3-7.4 13.4-15.2 22.8-27-37.3-8.1-11-18.4-23.8-27.6-40.1 5.9-14 14.6-27.6 19.6-42.2 3.8-11 7.5-22.2 8-33.8.4-11.8-2.7-18-5.6-35z"  />
  <path d="M125.6 160.8c-9.6-5.8-23.1-4.8-33.8-1.2a55.7 55.7 0 0 0-35.4 58.5c3.1 14.2 11 27.1 17.8 40a277 277 0 0 0 16.4 26.5c5.6 8.3 11 17 18 24 14.5-20.6 22-30.4 33-51.3-4-12.9-13-26.4-16.7-40.6a111.2 111.2 0 0 1-4.3-33.3c.3-7.7 3-12.7 5-22.6z"   />
  <path id="middle"  d="M218.6 355.2a469 469 0 0 1-46.5-69.5c-15-28.4-32.4-52.7-38.3-79.7a89.4 89.4 0 0 1 20-73.6 89 89 0 0 1 65.7-28.5 91.2 91.2 0 0 1 64.4 29.4c14.9 16.7 25 41.8 21 63.9-6 32.4-24.9 60.1-40.6 88.5a492.4 492.4 0 0 1-45.7 69.5z" />
   </g>
</svg>

Answer №2

@Alexandr_TT

Excellent progress in the right direction! I've coded a carousel slide animation in JavaScript, but now I aim to transform it into a single SVG animation similar to the image in the original post for visualization purposes only.

Below is the code snippet:

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Animation</title>
        <link rel="stylesheet" href="<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">" media="screen">
        <style>
            * { box-sizing: border-box; }
    
            body { font-family: sans-serif; }
    
            .carousel {
                background: white;
            }
    
            .carousel-cell {
                width: 70%;
                height: 200px;
                display: -webkit-box;
                display: -webkit-flex;
                display:         flex;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-align-items: center;
                align-items: center;
            }
    
            .carousel-cell svg {
                display: block;
                max-width: 100%;
                max-height: 100%;
                opacity: 1;
                -webkit-transform: scale(0.85);
                transform: scale(0.85);
                -webkit-transition: opacity 1s, -webkit-transform 0.8s, transform 0.8s, -webkit-filter 0.8s, filter 0.8s;
                transition: opacity 1s, transform 0.8s, filter 0.8s;
            }
    
            .carousel-cell.is-selected svg {
                opacity: 1;
                -webkit-transform: scale(2);
                transform: scale(2);
                -webkit-filter: none;
                filter: none;
            }
    
            @media screen and ( min-width: 768px ) {
                .carousel-cell {
                    height: 400px;
                }
            }
    
            @media screen and ( min-width: 960px ) {
                .carousel-cell {
                    width: 10%;
                }
            }
            .flickity-prev-next-button {
                width: 60px;
                height: 60px;
                background: transparent;
                opacity: 1;
            }
            .flickity-prev-next-button:hover {
                background: transparent;
                opacity: 1;
            }
            /* arrow color */
            .flickity-prev-next-button .arrow {
                fill: white;
            }
            .flickity-prev-next-button.no-svg {
                color: white;
            }
            /* closer to edge */
            .flickity-prev-next-button.previous { left: 0; }
            .flickity-prev-next-button.next { right: 0; }
            /* hide disabled button */
            .flickity-prev-next-button:disabled {
                display: none;
            }
        </style>
    </head>
    <body>
    
    <div class="carousel js-flickity">
        <div class="carousel-cell">
            <svg width="440" height="440" viewBox="-50 -50 550 550" xmlns="http://www.w3.org/2000/svg">
                <g fill="#F1C056" transform="matrix(0.464127, 0, 0, 0.464127, 108.349289, 107.221474)" style="">
                    <path id="left" d="M218.6 355.2a469 469 0 0 1-46.5-69.5c-15-28.4-32.4-52.7-38.3-79.7a89.4 89.4 0 0 1 20-73.6 89 89 0 0 1 65.7-28.5 91.2 91.2 0 0 1 64.4 29.4c14.9 16.7 25 41.8 21 63.9-6 32.4-24.9 60.1-40.6 88.5a492.4 492.4 0 0 1-45.7 69.5z"/>
                </g>
            </svg>
        </div>
        <div class="carousel-cell">
            <svg width="440" height="440" viewBox="-50 -50 550 550" xmlns="http://www.w3.org/2000/svg">
                <g fill="#F1C056" transform="matrix(0.464127, 0, 0, 0.464127, 108.349289, 107.221474)" style="">
                    <path id="middle" d="M218.6 355.2a469 469 0 0 1-46.5-69.5c-15-28.4-32.4-52.7-38.3-79.7a89.4 89.4 0 0 1 20-73.6 89 89 0 0 1 65.7-28.5 91.2 91.2 0 0 1 64.4 29.4c14.9 16.7 25 41.8 21 63.9-6 32.4-24.9 60.1-40.6 88.5a492.4 492.4 0 0 1-45.7 69.5z"/>
                </g>
            </svg>
        </div>
        <div class="carousel-cell">
            <svg width="440" height="440" viewBox="-50 -50 550 550" xmlns="http://www.w3.org/2000/svg">
                <g fill="#F1C056" transform="matrix(0.464127, 0, 0, 0.464127, 108.349289, 107.221474)" style="">
                    <path id="right" d="M218.6 355.2a469 469 0 0 1-46.5-69.5c-15-28.4-32.4-52.7-38.3-79.7a89.4 89.4 0 0 1 20-73.6 89 89 0 0 1 65.7-28.5 91.2 91.2 0 0 1 64.4 29.4c14.9 16.7 25 41.8 21 63.9-6 32.4-24.9 60.1-40.6 88.5a492.4 492.4 0 0 1-45.7 69.5z"/>
                </g>
            </svg>
        </div>
    </div>
    
    
    <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
    </body>
    </html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery and Laravel framework to handle a POST request

Could someone assist me with troubleshooting a jQuery post request issue? I suspect there may be an error with the routes or controller. Here is my JavaScript code for the post request: $.post('http://localhost:8000/ajax', { ...

javascriptphpjqueryajaxlaravel-5

Are these objects enclosed within a JavaScript array?

Are square brackets used to define arrays and curly brackets used for objects? Can you explain the following data structure: Some.thing = [ { "swatch_src" : "/images/91388044000.jpg", "color" : "black multi", "inventory" : { "F" : [ 797113, 797 ...

javascriptjquery

Tips for displaying all documents within a MongoDB collection using the sharedb-cli command line tool

My client-demo is not working as expected. I am trying to retrieve all documents from the "file" collection, but I am getting null results. https://i.sstatic.net/Pw6sA.png When testing with the mongo shell, I can see that the document data actually exist ...

javascriptnode.jsmongodbsharedb

Restrict the number of rows in a real-time search JSON data by utilizing the $.each method

Is there a way to limit the number of rows returned in live search JSON data through URL? I attempted to count the table rows and return false, but it did not work. Any suggestions on how to achieve this? $(document).ready(function() { $.ajaxSetup ...

javascriptphpjqueryjsonajax

Is there a way to activate a Superfish jQuery Menu with a click instead of a hover?

After doing some research on the internet, I came across an implementation of Superfish menu by Joel Birch that functions based on onclick instead of hover. I found a link on Github by Karl Swedberg which seems to be what I need. https://gist.github.com/ ...

javascriptjquerymenusuperfish

Using Ajax to trigger JSON-formatted HTML output

Issue with Populating Modal Window I am encountering difficulties while trying to populate a modal window dynamically with extended information retrieved from a mySQL database. Despite attempting various methods such as nested arrays, while loops, and for ...

phpjqueryhtmlmysqljson

Rendering text with three.js in the scene

I'm just starting out with three.js. For my project, I need to create a 3D graphical website. After doing some research on Google, I discovered that three.js is a great tool for manipulating WebGL with ease. In the three.js documentation(), TextGe ...

javascriptthree.js

data-abide is flagging all fields as incorrect

Recently, I encountered an issue with a specific form I have created: <%= form_for(@building_shared_space, data: {abide:''}) do |f| %> ... <div class="field"> <%= f.label :room_type, 'Room Type' %> <%= ...

htmlruby-on-railsrubyzurb-foundation

AngularJS - Viewless and Issue-Free

I'm currently working on a project that involves using AngularJS and PHP. I made some changes, but now it's not functioning properly... The issue is that there are no errors in the console, Angular works (I can retrieve its version), but my vi ...

javascriptphpangularjs

Error code TS7053 occurs when an element implicitly has an 'any' type because a string expression cannot be used to index an empty object

I have implemented a code snippet that sorts items into groups based on their first character. For example, if the array of item looks like this: {name: 'Foo'} {name: 'Bar'} {name: 'Baz'} The expected result should be: B: ...

javascripttypescriptvue.jsvuejs3

What could be causing the mousewheel event in my code to remain active?

Whenever I try to scroll on Google Chrome, an error occurs on my website. jquery-3.3.1.min.js:2 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See To resolve this issue: $(document).ready(f ...

javascriptjqueryhtmlasp.net-mvcgoogle-chrome

What is the best way to bring a single object from Django into an HTML template?

Currently, I am working on a Django website project that involves two models: Gifi (which contains .gif images) and Categorite. My goal is to navigate to another HTML template with specific image information when a .gif image is clicked. Although I have ma ...

pythonhtmldjangowebdjango-queryset

Best method for distributing components across nextjs zones?

Scenario: I am currently working on a project using Next.js and taking advantage of its multi zones feature. This feature allows us to run multiple independent NextJS applications as a unified app, managed by different teams. The Issue: One challenge I fa ...

javascriptreactjsnext.jsmicro-frontend

Next.js presents a challenge with micro frontend routing

In the process of developing a micro frontend framework, I have three Next.js projects - app1, app2, and base. The role of app1 and app2 is as remote applications while base serves as the host application. Configuration for app1 in next.config.js: const ...

javascriptwebpacknext.jsmicro-frontendwebpack-module-federation

Arranging columns in a row with some breathing room using Bootstrap's grid system

On my webpage, I have multiple repetitive product listings displayed. <div class="col-lg-12 col-md-12 col-sm-12 "> <div class="row"> @foreach (var item in Model.Products) { ...

htmlcssbootstrap-4

Looking for assistance in using JavaScript to determine the percentage of a DIV's width in pixels

Using PHP, I am generating boxes whose width is set to 100% of a container in CSS. Now, I want to determine the equivalent pixel value of that box... HTML <div class="masonry" > <? while($row = $stmt->fetch()){ ?> <div class="i ...

javascripthtmlcss

Is VS Code highlighting compatible with template string CSS in Emotion?

Is there a way to enable syntax highlighting for emotion's template string css in VS Code? I've been looking for plugins, but all of them seem to focus on snippets. I have tried using css({ camelCaseCssProps:...}), which works. However, I am att ...

cssvisual-studio-codestyled-componentssyntax-highlightingemotion

Unfinished card or cut-off content within a bootstrap accordion

Greetings to the StackOverflow community! I am facing an issue with my accordion and card setup, where the card is not fully displayed within the button at the bottom. The following image illustrates the problem: https://i.sstatic.net/aSFsc.png Here is ...

jquerycssbootstrap-4

Retrieve the current width and height of an image after the maximum width and height constraints have been applied

Check out this example The HTML: <div class="container"> <img src="http://placehold.it/500x500" alt="500x500" /> </div> <div class="container"> <img src="http://placehold.it/100x500" alt="100x500" /> </div> < ...

jqueryhtmlcss

click event not triggering custom hook

I have developed a custom hook for fetching data and am struggling to implement it successfully. Below is my custom hook: import { useReducer } from "react"; import axios from "axios"; const dataFetchReducer = (state, action) => { ...

javascriptreactjsaxiosreact-hooks