Animation

About GemPages Animations

Animations involve introducing motion or movement to elements on a webpage, ranging from subtle effects like fading or sliding to more dynamic transitions and interactions. You have the flexibility to apply animations to any element within GemPages. Follow the steps below to add animations to GemPages elements. 

How to add animations to GemPages’ elements

Step 1: Go to Shopify Admin > Apps and select GemPages Builder to access GemPages Dashboard. Click on your preferred template to access the Editor. 

Step 2: Click on the element you would like to add animation. The element configuration will be revealed on the left sidebar. Next, switch to the Advanced tab. 

Step 3: Scroll down to the Animation and toggle on the switch. 

Scroll down to Animation and toggle the switch on. Animations are categorized into appearing and hovering effects. Choose your preferred one and configure it to align the animation with your expectations. Configuration details will be discussed in the next section.

Configure the GemPages animation settings.

Speed

Use the slider to adjust the speed of the animations. The further the slider is positioned to the right, the faster the animation will be.

Delay

Set a delay for the animation if needed.

Easing

At this step, you can choose from different types of easing functions to control the pace of transitions between keyframes. Selecting the right easing function depends on the specific characteristics you want for your animation and the overall user experience you aim to achieve. 

• Ease in:  The animation moves more slowly, and the speed gradually increases.
• Ease out: The animation begins with a burst of speed and gradually slows down towards the end. 
• Ease in out: The animation starts slowly, accelerates in the middle, and then decelerates towards the end.
• Linear: The animation maintains a consistent speed, producing steady and predictable movement.

Preview 

Click the Preview button to see how the animation works on the live page. Remember this step to ensure the desired effect is achieved.