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:

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

JavaScript allows for inserting one HTML tag into another by using the `appendChild()` method. This method

My goal is to insert a <div id="all_content"> element into the <sector id="all_field"> element using Javascript <section id="all_field"></section> <div id="all_content"> <h1>---&nbsp;&nbsp;Meeting Room Booki ...

javascriptjqueryhtml

Change TouchStart event handler for SVG in React

Using SVGs as buttons for an app presents a challenge with transitioning between normal and pressed states. When onTouchStart is triggered, the pressed SVG should be displayed, and onTouchEnd should return it to its normal state. How can this be effectivel ...

reactjssvg

Leveraging LESS variables within media queries

After inputting the less code below into : @item-width: 120px; @num-cols: 3; @margins: 2 * 20px; @layout-max-width: @num-cols * @item-width + @margins; @media (min-width: @layout-max-width) { .list { width: @layout-max-width; } } The resul ...

cssless

What is the best way to calculate the total number of results using ajax?

Encountering an issue with the total count of ajax search results. Getting an error message "Method Illuminate\Database\Eloquent\Collection::total does not exist." when using directives, for example: <div class="searched-item"&g ...

javascriptjqueryajaxlaravelcount

Dynamic page url redirection involves creating search-engine friendly URLs for dynamic

After successfully incorporating URL rewriting into my PHP website, I am facing an issue with displaying the links as desired. mydomain.com/komet-india/Best-Indian-Hill-Stations-1/Delhis-Hotel The elements Best-Indian-Hill-Stations,1,Delhis-Hotel in the ...

phphtmlurl-rewriting

Having trouble retrieving the full HTML code with the execute_script function in Python while web scraping

Currently, I am in need of HTML code to perform web scraping using Python. The particular website I am working with is that of a real estate agency. Prior to executing the onclick event for a button that changes pages, it is crucial for me to first obtain ...

javascriptpythonseleniumweb-scraping

How can I design a versatile button in HTML/CSS3/jQuery/Javascript that utilizes images for borders and corners for maximum scalability?

Is there a way to create a completely scalable button in HTML/CSS3/jQuery+Plugins using images for borders and corners? I have attempted a messy method, but I am confident that there are more effective solutions available. The approach I considered invol ...

javascriptjqueryhtmlcss

Implement CSRF protection for wicket ajax requests by adding the necessary header

I'm currently working on a website created with Apache Wicket and we're looking to enhance its security by implementing CSRF protection. Our goal is to keep it stateless by using a double submit pattern. For forms, we are planning to include a h ...

javascriptajaxwicketwicket-1.5

Obtain an Array Following the For Loop

Struggling with grasping the concept of for loops in arrays. I'm attempting to develop a Thank You card generator and here are the steps I am endeavoring to execute: Initialize a new empty array to store the messages Loop through the input array, con ...

javascriptarraysfunctionloopsfor-loop

Utilizing AJAX POST requests from JavaScript to a Rails 4 controller while implementing Strong Parameters

As a newcomer to Rails, I am looking to insert song_id and title received from JavaScript via AJAX POST into a MySQL database. In my JavaScript file: var song_id = "23f4"; var title = "test"; $( document ).ready( function() { jQuery.ajax({ ...

javascriptmysqlruby-on-railsrubyajax

Utilizing ASCII art in React: A guide to incorporating textual designs into your

I'm having trouble displaying ASCII images correctly on my React app. I've tried various methods, but nothing seems to maintain the form when rendered in the browser. <Grid container id="terminal_banner"> <Grid item ...

javascripthtmlreactjsmaterial-uiascii-art

Maximizing Jest's potential with multiple presets in a single configuration file/setup

Currently, the project I am working on has Jest configured and testing is functioning correctly. Here is a glimpse of the existing jest.config.js file; const ignores = [...]; const coverageIgnores = [...]; module.exports = { roots: ['<rootDir&g ...

javascriptnode.jstypescriptamazon-dynamodbjestjs

Tips for embedding Javascript code within the window.write() function

I have a JavaScript function that opens a new window to display an image specified in the data variable. I want the new window to close when the user clicks anywhere on it. I've tried inserting some JavaScript code within window.write() but it doesn&a ...

javascriptphphtmlwindow.open

Acquire Formik Validation for the Current Year and Beyond

How can I ensure that the input in Formik is restricted to the currentYear and later years only? const currentYear = new Date().getFullYear(); expiryYear: yup .string() .required('Please select an expiry year') .min(4, `Year format must be grea ...

javascriptreactjsmaterial-uiformikyup

Struggling to keep text aligned to the left?

Check out the image at in my jsfiddle. It remains fixed in its position regardless of the screen width. However, the adjacent text does not behave in the same way. I aim to have the text positioned DIRECTLY next to the icon without any movement even if ...

htmlcsscss-position

Step-by-step guide to implementing a user-friendly search input field using the powerful AngularJS material design framework

I am searching for an effortless method to implement a feature similar to the expandable search text field in angular-mdl. By clicking on a search button, it will expand into a text field. <!-- Expandable Textfield --> <form action="#"> < ...

javascripthtmlcssangularjsangular-material

Double invocation of useEffect causing issues in a TypeScript app built with Next.js

My useEffect function is set up with brackets as shown below: useEffect(() => { console.log('hello') getTransactions() }, []) Surprisingly, when I run my app, it logs "hello" twice in the console. Any thoughts on why this might be ...

javascriptreactjsnext.jsfrontend

Trouble with Background Image Display in Internet Explorer 8

I have been attempting to set a background image for the . element, but it is not displaying correctly. The image shows up in Firefox and Chrome, but not in Internet Explorer. I have included a link to my website and relevant CSS code below. Can anyone pro ...

javascriptjqueryhtmlcss

Centered buttons placed right next to each other

Having trouble getting my buttons centered and aligned side by side on the screen. I've managed to achieve one or the other but not both simultaneously. Currently, the buttons are next to each other but positioned at the top left corner of the screen. ...

htmlcss

Having trouble adjusting the width of a Material-UI modal in React?

I'm having trouble adjusting the width of the dialog box to show all of the content without adding a horizontal scroll bar. I noticed that the blur effect is applied to most of the page, so why isn't the form extending with it? Any assistance on ...

cssreactjsmaterial-ui