How To Add Custom Animations to Your Funnel

Identifying the Element to Animate

1. Navigate to the page you wish to edit.
2. Click on the section or element you want to animate.
3. Go to the "Advanced" settings to find the CSS selector for the element. This is crucial as it will be used to apply the custom animation.

Creating the Animation

With the CSS selector in hand, you can now proceed to create the animation. This process is simplified by using AI tools like ChatGPT, which can generate the necessary code for you.

1. Open ChatGPT or a similar AI tool.
2. Input a request for a fade-in animation (or any other type of animation you prefer) for your CSS element, and paste the CSS selector.
3. The AI will generate both HTML and CSS code for the animation. Copy this code.

Applying the Animation to Your CRM Page

Now that you have the animation code, the next step is to add it to your CRM page.

1. On your page, add a new element, specifically a code element, where you want the animation to appear.
2. Click on the code element to open the code editor.
3. Paste the animation code into the editor and save your changes.

Previewing and Adjusting the Animation

After saving the animation code, it's a good idea to preview your page to see the animation in action.

1. Use the "Preview" function to view your page.
2. Scroll to the animated element to observe the animation. If it's a fade-in, you should see the element smoothly appear as you scroll.

Making Adjustments

If you're not satisfied with the animation or wish to try a different style:

1. Return to ChatGPT and request a new animation code, specifying any changes you desire.
2. Replace the old code with the new one in the code editor and save your changes.
3. Preview the page again to see the updated animation.

Troubleshooting and FAQs

• Q: What if the animation doesn't work?A: Ensure you've correctly copied both the CSS selector and the animation code. Also, check that the code element is properly placed on your page.
• Q: Can I animate more than one element?
• A: Absolutely. Repeat the process for each element you wish to animate, ensuring you use the correct CSS selector for each.