---
title: 'How to Create an Old Soul vs New Gen Slider Effect'
source: 'https://youtube.com/watch?v=ghsVOck_qls'
video_id: 'ghsVOck_qls'
date: 2026-08-01
duration_sec: 799
---

# How to Create an Old Soul vs New Gen Slider Effect

> Source: [How to Create an Old Soul vs New Gen Slider Effect](https://youtube.com/watch?v=ghsVOck_qls)

## Summary

This tutorial demonstrates how to create an 'Old Soul vs New Gen' interactive slider effect using Effect Maker. The video walks through the template structure, visual scripting logic, asset customization, and advanced modifications like vertical layouts and score displays.

### Key Points

- **Template Introduction** [00:02] — The 'Old Soul vs New Gen' effect is a slider-based ranking template allowing users to choose favorites between two categories across five rows.
- **Getting Started** [00:30] — Open Effect Maker on your computer, navigate to the '10 by 5 fashion' section, and select the 'Old vs New Gen' template.
- **Template Structure** [00:44] — The objects panel contains a title card, category titles (new gen and old soul), and five interactive rows, each with a slider, heart, and item icon.
- **Visual Script Logic** [01:12] — The visual script enables sliders to respond to dragging; each heart drag toggles visibility of the selected heart asset.
- **X Bounds Subgraph** [01:38] — The heart movement is constrained along the X axis using subgraphs; default range is -202 to 202, adjustable for different boundaries.
- **Hit Zone Calculation** [02:07] — Slider subgraphs calculate a hit zone by dividing the heart's height by 2 and adding/subtracting it from the X position, so selection works without needing exact center taps.
- **Replacing Assets** [03:29] — To customize the effect, select any asset and use 'replace asset' in the properties panel; rename the new asset to maintain logic references.
- **Adjusting Rows** [04:10] — Rows can be removed by deactivating objects or fully deleting them along with their subgraph logic; new rows require copying a slider subgraph and updating references.
- **Vertical Layout** [06:05] — For a vertical slider, remove sliders, reposition objects, and swap X/Y connections in subgraphs, then update get/set position nodes.
- **Score Display** [08:31] — Create a 'final score' text object and use update/set property nodes to display an average percentage calculated from heart positions.
- **Category Customization** [10:19] — Change default category labels (e.g., throwback vs modern) in the objects panel and reposition text to match the layout.
- **Recording Behavior** [11:43] — Use a record node to hide the title card during recording and reveal the final score and text via duplicate set visible nodes.
- **Publishing** [12:47] — Upload an icon, set a description, set interaction description to 'drag', and submit the effect for review.

## Transcript

soul vs. new gen effect template in Effect Maker to create a fun interactive experience that you can easily change to personalize your effect. The old soul template is a simple slider base ranking [music] template that let users choose
their favorite of two items in five rows. The potential here is huge. You aren't just limited to the difference between generation, but it could be movies. To get started, open up Effect Maker on
your computer. Head over to the 10 by 5 fashion and select old vs. new gen Let's look at how the tablet is structured. In the objects panel, we have the title card, which is the custom graphic for your effect. Then, you'll
see the category titles. By default, these are new gen and old soul. For the interaction, there are five rows, line one through five, each featuring a slider icon, heart one through five, and icon for rigging, like
CD vs. headphone. In the asset panel, you'll find the slider part, which includes line graphic and a button state, along with the icons used for each rows. The logic is handled in the visual
script, which enables the slider when you start dragging and enter the button moves smoothly along the line to track your selection. which means that every time you drag the heart, the visibility of the heart
selected asset will turn on. The vector is being split into sub graphs for the X bounds of the heart and for each slider one through five. Only the X vector is being used in the X bounds sub graph. To see what's inside a
sub graph, simply double click on it. In it, we see that the heart asset can only move along the X axis and is restricted to the range of minus room 202 to 202. Otherwise, it won't work correctly.
You can change these numbers if you want to adjust where the asset is allowed to go. For example, if I put 600, as you can see the heart slides all the way through the screen, through outside the line.
Now let's see what is happening inside one of the slider sub graph. Slider one through five are all identical. The only thing that changes is the heart asset being used. For example, slider one uses heart one, slider three uses
heart three. You can see the input node sending the user's position into a calculation that finds the top and bottom edge of the We need this calculation because the computer doesn't naturally knows how big
the heart is. They only knows its center fight. Without this map the selection will only trigger if your finger touches the exact microscopic center coordinate in the heart, which would feel broken to a user. By taking the height of the
a user. By taking the height of the heart one divided by two and adding or subtracting that from the X position, this group creates a hit zone. When the user's input fall between these two numbers, the node send a signal to
the if condition to turn the selection on. Once that condition is met, the execution flow triggers the set position and the set visibility up. This ensures that the heart selected
asset snaps exactly to the heart's coordinates and becomes visible. Just like the X axis bounds in your other sub graphs, this setup ensures the specific area you've defined for the heart asset. Next, let's give the effect
a unique look. To change the items being ranked, click on the asset you want to replace. Go to the properties panel and select replace asset. For this example, I'll replace the mail icon with a camera asset created using Nano banana on
Gemini. Don't forget to rename your asset to It works the same way if you would like to replace anything else, such as the background titles, slider lines, or icons by uploading your own asset. You
can also replace the heart slider or the line itself in the objects panel to perfectly match your new theme. If five rows are too many or not enough for your fit, we can easily adjust them. To remove a slider, the quickest method is
remove a slider, the quickest method is to simply set line, heart, and associate item to non-visible in the object panel. However, for a cleaner project, you should delete those objects from the object panel and then remove their
corresponding logic from the visual script. Specifically, locate and delete the corresponding sub graph. To add a new row, for instance, I'll use the row I just deleted as an example. Follow these steps.
items. Rename them. Replace the asset in the asset field in the properties panel.
Y axis however you like, ensuring they remain aligned on the same Y axis.
In the visual script, copy a slider sub graph. Ungroup the sub graph and update all object references to the new heart. For example, here, heart five. These outputs connect to less than or
equal to and greater than or equal to comparison node, comparison node, which check with split vector Y input. By feeding both comparison into an end node, you create a combined condition
for the if node. When this is met, it triggers a sequence to snap the heart selected object into place. This involves the set X position driven by heart five's split vector X, the set
position node mapped to heart five's current coordinates, and the set visible current coordinates, and the set visible node. Select all and right click to group the subgraph.
To elevate your effect beyond a basic slider, try adding a unique twist. For instance, you could rotate the sliders to be vertical instead of horizontal for a fresh layout. To switch your slider to a vertical layout, I remove two sliders.
Then I adjust the physical position of the objects in the scene panel.
and Y connections by dragging the split vector Y output into the Y belt, which I just renamed from X bound, and remapping a swap of connections
and remapping a swap of connections accordingly.
going to constrain the heart so it doesn't pass above the line. To achieve this, I've set the coordinates to 140 and minus 180 for either side of the line. As you can see, the heart now stays within the
the heart now stays within the boundaries. the heart's position nodes. Change get Y position to get X position
Change get Y position to get X position and set X position to set Y position. will successfully reorient your slider's logic to match the vertical movement.
result text object that updates based on the slider's position. By using visual the user's choice, you can reveal a personalized message showing your results. To set up your final score, create a text object named final score
and the text content in the properties panel to zero. update node and a set properties node to set text
and a set properties node to set text which is linked to the final score. adding the get Y position or X if you have a horizontal layout of your three
have a horizontal layout of your three heart object.
Connect the three nodes to an add node and divide the total by three.
>> Use a remap node to convert these coordinates. boundaries. Here it would be minus 180 to 140 as the input minimum maximum.
And 0 to 100 as the output minimum maximum to get a percentage. Finally, use a number to text node to plug this value into your set text node.
Reposition the final score towards the top of the screen. the categories. In the object panel, find a text object titled you gen and
You can replace these with any two categories you like. For example, you could compare sweet and salty or summer vs. winter. Simply select a text object and update the text content in the properties panel. For this example,
properties panel. For this example, we'll use throwback vs. modern. To finalize the interface, position the modern text at the bottom. This mirrors the icon placement and flows better with the vertical format. Create a new text
object that reads your vibe percentage is throwback. font. Place the text at the top.
first need a new one. I made mine using Nano Banana on Gemini. Once you have your new card ready, go over to the asset panel and click on title. From there, look at the properties panel, hit replace asset, and import your new
replace asset, and import your new design. title card to disappear when recording. Start by making the final score and
panel. In the visual script, add a record node and a set property node for the title card.
control visibility. Then connect the record trigger to the set visibility node set to false. Duplicate the set visible node twice.
And set them to true. To reveal the final score and final text. hit record, the title card vanishes and your throwback percentage is displayed.
To see what your full effect looks like, use your preview window. You can change the model or even try it yourself in the preview window.
process. Upload your icon. I created mine in the Upload your icon. I created mine in the middle of banana arms and a knife. description for your effect, and set the interaction description to drag.
Finally, submit [music] it for review. That's all there is to it. For more info on how to use a fake maker, check out the links in the description below. to subscribe for even more updates and tutorials.
tutorials. >> [music]