In this tutorial, we'll create an interactive image slider with smooth animation effects using LiveCode. The slider will feature three image groups that can expand and contract when clicked, with only one expanded at a time.
This tutorial focuses on creating a professional-looking animation effect using LiveCode's built-in animation capabilities. You'll learn how to create smooth transitions, manage object positioning, and handle user interactions.
We'll build a stack with three image groups positioned along the right side of the card. When a user clicks on one of these groups:
The animation will be smooth, and all groups will maintain their relative positioning.
Tip: Choose images with similar dimensions for the best visual effect. Landscape-oriented images typically work best for this type of slider.
Open the stack script editor and add the following code:
/***************************************************************** * SlotImageGroups.livecodescript * * DESCRIPTION: * This script manages expanding and contracting image groups in a LiveCode stack. * It implements an animation effect where clicking on a group will expand * or contract it, while maintaining proper positioning of all groups relative * to the right edge of the card with consistent margins. * * CREATED BY: Your Name * CREATION DATE: April 29, 2025 * VERSION: 1.0 * * LICENSE: * MIT License * * Copyright (c) 2025 Your Name * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * *****************************************************************/ -- Constants for animation and positioning constant kSpeed = 1 constant kMargin = 10 constant kRightMargin = 22 -- Margin from right edge of card local gInitialPositionSet = false -- Initialize the groups when the stack opens on preOpenStack positionGroupsFromRight end preOpenStack -- Position groups from the right edge of the card on positionGroupsFromRight local tGroupOrder, tCurrentGroup, tCurrentRight, tGroupWidth, tImageName -- Define the order of groups (right to left) put "SlotImageGroup3,SlotImageGroup2,SlotImageGroup1" into tGroupOrder -- Start from the right edge of the card minus margin put the width of this card - kRightMargin into tCurrentRight -- Position each group in order from right to left repeat for each item tCurrentGroup in tGroupOrder -- Get the corresponding image name put "image" & char -1 of tCurrentGroup into tImageName -- Ensure group width is 1/4 of image width (contracted state) set the width of group tCurrentGroup to the width of image tImageName / 4 -- Calculate group position put tCurrentRight - the width of group tCurrentGroup into tLeft set the left of group tCurrentGroup to tLeft set the right of group tCurrentGroup to tCurrentRight -- Center the image in the group set the loc of image tImageName to the loc of group tCurrentGroup -- Update right position for next group put tLeft - kMargin into tCurrentRight end repeat -- Record these as the initial positions recordInitialPositions put true into gInitialPositionSet end positionGroupsFromRight -- Handle mouse clicks on groups or images on mouseUp local tTarget, tGroupName, tImageName put the short name of the target into tTarget if tTarget contains "SlotImageGroup" then -- It's a group put tTarget into tGroupName put "image" & char -1 of tGroupName into tImageName else if tTarget contains "image" then -- It's an image put "SlotImageGroup" & char -1 of tTarget into tGroupName put tTarget into tImageName else -- Not a target we're interested in exit mouseUp end if -- Ensure initial positions are set if not gInitialPositionSet then positionGroupsFromRight end if handleImageGroupClick tGroupName, tImageName end mouseUp -- Store the initial positions of groups on recordInitialPositions -- Store the original positions of groups set the cInitialLeft of group "SlotImageGroup1" to the left of group "SlotImageGroup1" set the cInitialLeft of group "SlotImageGroup2" to the left of group "SlotImageGroup2" set the cInitialLeft of group "SlotImageGroup3" to the left of group "SlotImageGroup3" -- Also store information about the card width set the cCardWidth of this card to the width of this card end recordInitialPositions -- Handle stack resizing on resizeStack pNewWidth, pNewHeight, pOldWidth, pOldHeight -- Reposition groups when stack is resized positionGroupsFromRight end resizeStack -- Handle clicking on an image group on handleImageGroupClick pGroupName, pImageName if the width of group pGroupName < the width of image pImageName then -- First check if any other group is expanded and contract it checkAndContractOtherGroups pGroupName -- Then expand the current group expandImageGroup pGroupName, pImageName else contractImageGroup pGroupName, pImageName end if end handleImageGroupClick -- Check and contract any expanded groups except the current one on checkAndContractOtherGroups pCurrentGroup local tGroupsList, tLine, tGroup, tImage -- List of all groups and their corresponding images put "SlotImageGroup1,image1" & return & \ "SlotImageGroup2,image2" & return & \ "SlotImageGroup3,image3" into tGroupsList repeat for each line tLine in tGroupsList put item 1 of tLine into tGroup put item 2 of tLine into tImage -- Skip the current group if tGroup is pCurrentGroup then next repeat -- If this other group is expanded, contract it if the width of group tGroup >= the width of image tImage then contractImageGroup tGroup, tImage end if end repeat end checkAndContractOtherGroups -- Expand an image group with animation on expandImageGroup pImageGroup, pImage local tLeft, tTop, tRight, tBottom put the left of group pImageGroup into tLeft put the top of group pImageGroup into tTop put the right of group pImageGroup into tRight put the bottom of group pImageGroup into tBottom repeat until the width of group pImageGroup >= the width of image pImage -- Lock screen just for this update to reduce flickering lock screen put tLeft - kSpeed into tLeft set the rect of group pImageGroup to tLeft, tTop, tRight, tBottom -- Reposition all groups to maintain order and margins repositionAllGroups set the loc of image pImage to the loc of group pImageGroup -- Unlock to show the frame, then proceed to next iteration unlock screen wait 1 milliseconds end repeat end expandImageGroup -- Contract an image group with animation on contractImageGroup pImageGroup, pImage local tLeft, tTop, tRight, tBottom put the left of group pImageGroup into tLeft put the top of group pImageGroup into tTop put the right of group pImageGroup into tRight put the bottom of group pImageGroup into tBottom repeat until the width of group pImageGroup <= (the width of image pImage)/4 -- Lock screen just for this update to reduce flickering lock screen put tLeft + kSpeed into tLeft set the rect of group pImageGroup to tLeft, tTop, tRight, tBottom -- Reposition all groups to maintain order and margins repositionAllGroups set the loc of image pImage to the loc of group pImageGroup -- Unlock to show the frame, then proceed to next iteration unlock screen wait 1 milliseconds end repeat end contractImageGroup -- Reposition all groups to maintain proper spacing on repositionAllGroups local tGroupOrder, tCurrentGroup, tCurrentRight -- Define the order of groups (right to left) put "SlotImageGroup3,SlotImageGroup2,SlotImageGroup1" into tGroupOrder -- Start from the right edge of the card minus margin put the width of this card - kRightMargin into tCurrentRight -- Position each group in order from right to left repeat for each item tCurrentGroup in tGroupOrder -- Position the right edge of the group set the right of group tCurrentGroup to tCurrentRight -- Update right position for next group put the left of group tCurrentGroup - kMargin into tCurrentRight -- Keep the image centered in its group local tImageName put "image" & char -1 of tCurrentGroup into tImageName set the loc of image tImageName to the loc of group tCurrentGroup end repeat end repositionAllGroups
kSpeed
: Controls animation speedkMargin
: Sets the space between groupskRightMargin
: Sets the distance from the right edge of the cardgInitialPositionSet
: Tracks whether initial positions have been setThe animation is powered by LiveCode's ability to modify object properties in small increments within a loop. Here's how it works:
The lock screen
and unlock screen
commands are used to reduce flickering during animation.
Animation Technique: LiveCode's animation system is built around the concept of incremental changes and screen updates. By making small changes and briefly showing each frame, we create the illusion of smooth motion. The wait
command controls the animation speed.
kSpeed
for faster animationkMargin
to change spacing between groupskRightMargin
to change distance from right edgeAdd a text field to the stack with the following content:
Image Slider Animation This stack demonstrates an interactive sliding image gallery with animated expansion and contraction effects. Click on any of the three image groups to expand it and view the full image. Only one image can be expanded at a time - clicking an expanded image will contract it, while clicking a different image will contract the current one and expand the new selection. The images are intelligently positioned from the right edge of the card, automatically adjusting when the stack is resized. This provides a seamless user experience as images slide smoothly into view with a pleasing animation effect.
This implementation takes advantage of LiveCode's event-driven programming model and its ability to manipulate objects with simple commands. The animation technique is efficient and creates a professional-looking effect with minimal code.
The script is designed to be easily extendable. If you want to add more image groups, simply follow the same naming convention and update the group list in the checkAndContractOtherGroups
handler.
Now that you have a working image slider, you might want to explore these enhancements:
LiveCode Tips: Remember that LiveCode's strength lies in its simplicity and flexibility. You can extend this basic slider in many ways using similar animation techniques. The event-driven nature of LiveCode makes it easy to add interactive elements.