The webtales Studio Collection

Search for anything

CONTENTS

Introduction

Code environment setup

Overview

Core animation concepts

Using gsap to animate the bounce back using the elastic easing

Wrapping up

TROUBLESHOOTING

Hover variants in Framer

How to handle component variants

LIVE PREIVEW

COPY COMPONENT

KEEP GOING :)

Wanna create some more amazing stuff?

EXPLORE ALL TUTORIALS

TUTORIAL

ADDING USER AUTHENTICATION IN FRAMER, FOR FREE

Create gated experiences and member areas in Framer without relying on third-party plugins. A complete step-by-step guide.

TUTORIAL

ANIMATE TEXT BACKGROUND GRADIENT ON SCROLL

Recreate that eye-catching gradient text effect from Apple's website that responds to scrolling. Fully explained in Framer.

TUTORIAL

MASTERING SMOOTH WEB ANIMATIONS IN

Some websites feel smooth as butter, and I’ve spent an unreasonable amount of time looking at them. Here is everything I learnt.

TUTORIAL

UNLOCK MIND BLOWING SCROLL ANIMATIONS IN FRAMER

Learn how to use our ScrollTrigger plugin to create professional scroll-based animations previously impossible in Framer.

TUTORIAL

A GUIDE FOR CREATIVE LAYOUTS

Create websites that make visitors say 'wow' from the moment they load. Practical layout techniques for maximum impact.

GIVE THE RIGHT TOOLS TO YOUR CREATIVITY

Bring your Framer Website

to the next level

ALRIGHT, I’M IN

DON’T MISS OUT ON NEW STUFF

YOUR NAME

YOUR EMAIL

SUBMIT

We'll only use your email for Webtales updates. You can unsubscribe anytime. See our Privacy Policy for details.

NAVIGATE

NAVIGATE

NAVIGATE

NAVIGATE

NAVIGATE

HOME

THE ARCHIVE

FAQ

ARCHIVE

COMPONENTS

TUTORIALS

ANIMATIONS

OVERRIDES

UI ELEMENTS

SOCIALS

TWITTER

INSTAGRAM

BEHANCE

© 2025 WEBTALES STUDIO

TERMS OF SERVICE

PRIVACY POLICY

CONTACTS

BUILT IN FRAMER BY @EMANUELE