Create auto scrolling carousel or slide shows functionality using SVGs ( using Gemini AI)

AppSheet Tips & Tricks
, , ,
1

AppSheet currently does not natively support an auto scrolling slideshow or carousel functionality.

This tip shows use of some SVG coding to create a slide show effect in auto scrolling mode in an AppSheet app.

Hopefully, in very near future AppSheet team will implement iframe view and then this tip could become redundant.

The entire code for this tip is given by Gemini AI.

Summary

I kept giving more and more inputs to Gemini and it kept adding the functionality in the code - such as heading fonts, seamless scroll effect from one slide to other and it kept delivering.

So kudos are due to Gemini AI. :clap:

The inspiration from this tip also came from some neat and very innovative SVG options shared by @Syamsudin in his post Animation Template (GALLERY VIEW 1 : 1) for APPSHEET Kudos are due to @Syamsudin :clap:

Summary

I particularly learned the “Animate” attribute in the SVG from his post and thought it can do some magic in auto scrolling and the “Animate” attribute indeed helped in creating scroll effect and continuous looping of the slide show.

Here is the GIF that shows slideshow in action in a GIF file.

Summary

The code below is simple. It purposely does not load any values from the columns in the app, so anyone can copy and paste it in an image type VC and it will run. One can always add AppSheet columns to get text or values to display in the SVG slide show.

Since the free version of GIF maker that use has 10 seconds limitation, there are 2 GIFs uploaded to show the entire SVG based slideshow presentation from the app.

Slide_Show-Final

Second GIF shows from slides 2 to the last slide and again title slide.

slide_show_2

**

Simply copy and paste the SVG code given below in an image type VC and the slideshow will start working.

**
The SVG code block is below.

Summary

So even though the code is large, it is created entirely by AI. AI also helps in maintaining and changing it.

Summary 
CONCATENATE("data:image/svg+xml;utf8,<svg viewBox=""0 0 300 150"" xmlns=""http://www.w3.org/2000/svg"" style=""font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;"">

<rect width=""300"" height=""150"" rx=""15"" ry=""15"" fill=""rgb(15, 35, 65)"">

<animate attributeName=""fill"" dur=""15s"" repeatCount=""indefinite""

values=""rgb(15, 35, 65); rgb(40, 40, 40); rgb(15, 35, 65); rgb(15, 35, 65); rgb(40, 40, 40); rgb(15, 35, 65); rgb(15, 35, 65); rgb(40, 40, 40); rgb(15, 35, 65); rgb(15, 35, 65); rgb(40, 40, 40); rgb(15, 35, 65); rgb(15, 35, 65); rgb(40, 40, 40); rgb(15, 35, 65)""

keyTimes=""0; 0.2; 0.25; 0.35; 0.4; 0.45; 0.55; 0.6; 0.65; 0.75; 0.8; 0.85; 0.95; 0.98; 1"" />

</rect>



<g opacity=""0"">

<animate attributeName=""opacity"" dur=""15s"" repeatCount=""indefinite"" values=""0; 1; 1; 0; 0"" keyTimes=""0; 0.05; 0.17; 0.19; 1"" />

<rect x=""75"" y=""85"" width=""150"" height=""2"" fill=""rgb(255, 165, 0)"" />
<rect x=""45"" y=""45"" width=""200"" height=""2"" fill=""rgb(255, 255, 255)"" />

<text x=""150"" y=""35"" fill=""rgb(255, 255, 255)"" font-size=""18"" font-weight=""bold"" text-anchor=""middle"">Apex Machines Company</text>

<text x=""150"" y=""70"" fill=""rgb(255, 165, 0)"" font-size=""16"" font-weight=""bold"" text-anchor=""middle"">🚀 Strategic Review 2025/2026</text>



<text x=""150"" y=""110"" fill=""white"" font-size=""11"" font-weight=""normal"" text-anchor=""middle"">2025 Review | 2026 Roadmap</text>



</g>



<g opacity=""0"">

<animate attributeName=""opacity"" dur=""15s"" repeatCount=""indefinite"" values=""0; 0; 1; 1; 0; 0"" keyTimes=""0; 0.21; 0.23; 0.37; 0.39; 1"" />

<text x=""275"" y=""22"" fill=""white"" font-size=""13"" font-weight=""bold"" text-anchor=""end"">1</text>

<text x=""135"" y=""25"" fill=""rgb(255, 165, 0)"" font-size=""16"" font-weight=""bold"" text-anchor=""middle"">📈 2025 Performance</text>

<circle cx=""30"" cy=""52"" r=""3"" fill=""rgb(0, 150, 255)"" />

<text x=""45"" y=""56"" fill=""white"" font-size=""11"">Revenue Growth: +15% YoY</text>

<circle cx=""30"" cy=""72"" r=""3"" fill=""rgb(0, 150, 255)"" />

<text x=""45"" y=""76"" fill=""white"" font-size=""11"">Customer Retention at 92%</text>

<circle cx=""30"" cy=""92"" r=""3"" fill=""rgb(0, 150, 255)"" />

<text x=""45"" y=""96"" fill=""white"" font-size=""11"">Market Share Expansion in Q3</text>

<circle cx=""30"" cy=""112"" r=""3"" fill=""rgb(0, 150, 255)"" />

<text x=""45"" y=""116"" fill=""white"" font-size=""11"">Operational Efficiency up 10%</text>

<circle cx=""30"" cy=""132"" r=""3"" fill=""rgb(0, 150, 255)"" />

<text x=""45"" y=""136"" fill=""white"" font-size=""11"">Successful Product Beta Launch</text>

</g>



<g opacity=""0"">

<animate attributeName=""opacity"" dur=""15s"" repeatCount=""indefinite"" values=""0; 0; 1; 1; 0; 0"" keyTimes=""0; 0.41; 0.43; 0.57; 0.59; 1"" />

<text x=""275"" y=""22"" fill=""white"" font-size=""13"" font-weight=""bold"" text-anchor=""end"">2</text>

<text x=""135"" y=""25"" fill=""rgb(255, 165, 0)"" font-size=""16"" font-weight=""bold"" text-anchor=""middle"">⚙️ Machinery Sales 2025</text>

<text x=""55"" y=""142"" fill=""white"" font-size=""11"" text-anchor=""middle"">Q1</text>

<text x=""120"" y=""142"" fill=""white"" font-size=""11"" text-anchor=""middle"">Q2</text>

<text x=""185"" y=""142"" fill=""white"" font-size=""11"" text-anchor=""middle"">Q3</text>

<text x=""250"" y=""142"" fill=""white"" font-size=""11"" text-anchor=""middle"">Q4</text>

<rect x=""40"" y=""100"" width=""7"" height=""30"" fill=""rgb(255, 100, 100)"" /> <rect x=""48"" y=""90"" width=""7"" height=""40"" fill=""rgb(100, 255, 100)"" /> <rect x=""56"" y=""110"" width=""7"" height=""20"" fill=""rgb(100, 100, 255)"" /> <rect x=""64"" y=""95"" width=""7"" height=""35"" fill=""rgb(255, 200, 50)"" />

<rect x=""105"" y=""80"" width=""7"" height=""50"" fill=""rgb(255, 100, 100)"" /> <rect x=""113"" y=""100"" width=""7"" height=""30"" fill=""rgb(100, 255, 100)"" /> <rect x=""121"" y=""70"" width=""7"" height=""60"" fill=""rgb(100, 100, 255)"" /> <rect x=""129"" y=""85"" width=""7"" height=""45"" fill=""rgb(255, 200, 50)"" />

<rect x=""170"" y=""110"" width=""7"" height=""20"" fill=""rgb(255, 100, 100)"" /> <rect x=""178"" y=""60"" width=""7"" height=""70"" fill=""rgb(100, 255, 100)"" /> <rect x=""186"" y=""90"" width=""7"" height=""40"" fill=""rgb(100, 100, 255)"" /> <rect x=""194"" y=""100"" width=""7"" height=""30"" fill=""rgb(255, 200, 50)"" />

<rect x=""235"" y=""70"" width=""7"" height=""60"" fill=""rgb(255, 100, 100)"" /> <rect x=""243"" y=""80"" width=""7"" height=""50"" fill=""rgb(100, 255, 100)"" /> <rect x=""251"" y=""50"" width=""7"" height=""80"" fill=""rgb(100, 100, 255)"" /> <rect x=""259"" y=""90"" width=""7"" height=""40"" fill=""rgb(255, 200, 50)"" />

</g>



<g opacity=""0"">

<animate attributeName=""opacity"" dur=""15s"" repeatCount=""indefinite"" values=""0; 0; 1; 1; 0; 0"" keyTimes=""0; 0.61; 0.63; 0.77; 0.79; 1"" />

<text x=""275"" y=""22"" fill=""white"" font-size=""13"" font-weight=""bold"" text-anchor=""end"">3</text>

<text x=""135"" y=""20"" fill=""rgb(255, 165, 0)"" font-size=""16"" font-weight=""bold"" text-anchor=""middle"">🎯 SWOT Analysis</text>

<rect x=""10"" y=""25"" width=""138"" height=""53"" fill=""rgb(46, 125, 50)"" rx=""5"" />

<text x=""79"" y=""45"" fill=""white"" font-size=""11"" font-weight=""bold"" text-anchor=""middle"">Strengths</text>

<text x=""79"" y=""62"" fill=""white"" font-size=""9"" text-anchor=""middle"">Core Competency</text>

<rect x=""152"" y=""25"" width=""138"" height=""53"" fill=""rgb(198, 40, 40)"" rx=""5"" />

<text x=""221"" y=""45"" fill=""white"" font-size=""11"" font-weight=""bold"" text-anchor=""middle"">Weaknesses</text>

<text x=""221"" y=""62"" fill=""white"" font-size=""9"" text-anchor=""middle"">Resource Gaps</text>

<rect x=""10"" y=""83"" width=""138"" height=""53"" fill=""rgb(21, 101, 192)"" rx=""5"" />

<text x=""79"" y=""103"" fill=""white"" font-size=""11"" font-weight=""bold"" text-anchor=""middle"">Opportunities</text>

<text x=""79"" y=""120"" fill=""white"" font-size=""9"" text-anchor=""middle"">Market Growth</text>

<rect x=""152"" y=""83"" width=""138"" height=""53"" fill=""rgb(230, 81, 0)"" rx=""5"" />

<text x=""221"" y=""103"" fill=""white"" font-size=""11"" font-weight=""bold"" text-anchor=""middle"">Threats</text>

<text x=""221"" y=""120"" fill=""white"" font-size=""9"" text-anchor=""middle"">New Regulations</text>

</g>



<g opacity=""0"">

<animate attributeName=""opacity"" dur=""15s"" repeatCount=""indefinite"" values=""0; 0; 1; 1; 0"" keyTimes=""0; 0.81; 0.83; 0.97; 1"" />

<text x=""275"" y=""22"" fill=""white"" font-size=""13"" font-weight=""bold"" text-anchor=""end"">4</text>

<text x=""135"" y=""25"" fill=""rgb(255, 165, 0)"" font-size=""16"" font-weight=""bold"" text-anchor=""middle"">📅 2026 Strategic Plan</text>

<circle cx=""30"" cy=""52"" r=""3"" fill=""rgb(100, 255, 100)"" />

<text x=""45"" y=""56"" fill=""white"" font-size=""11"">Expand Market Reach</text>

<circle cx=""30"" cy=""72"" r=""3"" fill=""rgb(100, 255, 100)"" />

<text x=""45"" y=""76"" fill=""white"" font-size=""11"">Optimize Operational Costs</text>

<circle cx=""30"" cy=""92"" r=""3"" fill=""rgb(100, 255, 100)"" />

<text x=""45"" y=""96"" fill=""white"" font-size=""11"">Launch AI-Driven Features</text>

<circle cx=""30"" cy=""112"" r=""3"" fill=""rgb(100, 255, 100)"" />

<text x=""45"" y=""116"" fill=""white"" font-size=""11"">Enhance User Experience</text>

<circle cx=""30"" cy=""132"" r=""3"" fill=""rgb(100, 255, 100)"" />

<text x=""45"" y=""136"" fill=""white"" font-size=""11"">Strengthen Data Security</text>

</g>

</svg>")
11 Likes
2

Thanks for sharing @Suvrutt_Gurjar .:+1::+1::+1:

2 Likes
3

Try this, maybe it suits what you want Carousel effect (I tried it with Gemini earlier and got this result), only the graphics are removed.

…Excel
CONCATENATE(
“data:image/svg+xml;utf8,”,ENCODEURL(“<svg viewBox=”“0 0 300 150"” xmlns=““SVG namespace”” style=““font-family:‘Segoe UI’,sans-serif;””><animateTransform attributeName=““transform”” type=““translate”” values=““0,0;0,0;-300,0;-300,0;-600,0;-600,0;-900,0;-900,0;0,0"” keyTimes=”“0;0.22;0.25;0.47;0.5;0.72;0.75;0.97;1"” dur=““16s”” repeatCount=““indefinite””/><g id=““H1"”><rect width=”“300"” height=““150"” rx=”“15"” fill=““rgb(15,35,65)””/><text x=““150"” y=”“60"” fill=““white”” font-size=““18"” font-weight=”“bold”" text-anchor=““middle””>Apex Machines Company<text x=““150"” y=”“90"” fill=““orange”” font-size=““14"” text-anchor=”“middle”“>🚀 Strategic Review<g id=”“H2"” transform=““translate(300,0)””><rect width=““300"” height=”“150"” rx=““15"” fill=”“rgb(40,40,40)”“/><text x=”“150"” y=““50"” fill=”“orange”" font-size=““16"” font-weight=”“bold”" text-anchor=““middle””>📈 2025 Performance<text x=““150"” y=”“85"” fill=““white”” font-size=““12"” text-anchor=”“middle”“>Revenue Growth: +15% YoY<text x=”“150"” y=““110"” fill=”“white”" font-size=““12"” text-anchor=”“middle”“>Customer Retention: 92%<g id=”“H3"” transform=““translate(600,0)””><rect width=““300"” height=”“150"” rx=““15"” fill=”“rgb(20,60,20)”“/><text x=”“150"” y=““35"” fill=”“orange”" font-size=““16"” font-weight=”“bold”" text-anchor=““middle””>🎯 SWOT Analysis<rect x=““20"” y=”“60"” width=““120"” height=”“45"” fill=““rgb(46,125,50)”” rx=““5"”/><text x=”“80"” y=““88"” fill=”“white”" font-size=““11"” font-weight=”“bold”" text-anchor=““middle””>STRENGTHS<rect x=““160"” y=”“60"” width=““120"” height=”“45"” fill=““rgb(198,40,40)”” rx=““5"”/><text x=”“220"” y=““88"” fill=”“white”" font-size=““11"” font-weight=”“bold”" text-anchor=““middle””>WEAKNESSES<g id=““H4"” transform=”“translate(900,0)”“><rect width=”“300"” height=““150"” rx=”“15"” fill=““rgb(80,20,20)””/><text x=““150"” y=”“50"” fill=““orange”” font-size=““16"” font-weight=”“bold”" text-anchor=““middle””>📅 2026 Roadmap<text x=““150"” y=”“85"” fill=““white”” font-size=““13"” text-anchor=”“middle”“>Expand Market Reach<text x=”“150"” y=““110"” fill=”“white”" font-size=““13"” text-anchor=”“middle”“>Launch AI Features”))
…

2 Likes
4

Thank you @Syamsudin .

The code I shared already has Carousel effect.

3 Likes
5

A practical use case of the above suggestion.

AppSheet apps are definitely being used in hospitality industry. A scrolling restaurant menu can be displayed on a screen using the above technique.

Restaurant_Menu

Since the free version GIF creating tool I use has 10 seconds limit, the other part of scrolling menu is captured below.
Restaurant_Menu_2

Entire code including the coffee shop name, the tagline , menu items has been suggested by Gemini AI. :slightly_smiling_face: :+1:

4 Likes
6

Thank you @Suvrutt_Gurjar for sharing..

3 Likes
7

Thank you for sharing this.

3 Likes