Copy to Clipboard
.svg)
Cloneable tags
Description
The Copy to Clipboard button is a useful tool that allows users to easily copy any piece of text to their clipboard. This can be especially helpful when you want to allow your users to easily copy blocks of text, URLs, or even color codes in a style guide. The Copy to Clipboard button can be added to any website using the Webflow platform, and it's easy to customize to fit your specific needs. This cloneable, created by Refokus, is categorized under the categories of Button and Text Effects. With the Copy to Clipboard button, you can give your users the ability to quickly and easily copy any text they need with just a few clicks. So if you want to add this useful feature to your website, check out this cloneable today and start using the Copy to Clipboard button to make your website even more user-friendly.
Several different text reveal on scroll animations for Webflow. These techniques use a paid GSAP plugin called SplitText was used to achieve this effect. You can find the plugin here: https://greensock.com/club/ There are three different animations demonstrated here, line animation in which each line is animated as the user scrolls into the viewport, word animation in which each word is animated on scroll, and letter animation in which each letter individually animates.
A method to highlight text on page scroll in Webflow. A unique a fun interaction in which the text on the page begins to highlight as you scroll down the page. Each letter even partially highlights depending on where you've scrolled on the page. This effect uses GSAP and Scrolltrigger.js to create the effect. You'll need to add the custom code found on page settings for this to work properly.
An animated timeline scrolling effect perfect for about pages, historical pages and many others. As the user scrolls down the page a fun native interaction is applied that allows users to visit historical timelines with a unique Webflow interaction. The current date and item that is in view increases brightness while others out of view are faded out. The user can scroll down the page and have historical information provided in a unique and interactive fashion. This interaction uses while scrolling in view and while page is scrolling page trigger interactions.
A huge selection of premade Webflow animations, including animated buttons, click buttons, circular hover buttons, scroll down animations, nav link animations, tab animations, search bars, social media buttons, text animations, contact cards, blog cards, product cards and more.
A fun GSAP text hover image span effect created for Webflow. When hovering over a specific text or link, images appear on the screen. Perfect for dynamic and playful interactions powered by GSAP. This script is powered by GSAP and you can find the custom code found in the page settings. This allows you to signify images that appear when a user hovers over a native Webflow text span item. This is also mobile friendly as the code allows you to set media resolution settings and customizing the effect on the non-selected text span. You are able to customize the easing, zindex position, colors and much more.
Featuring 10 different text and typography scroll effects powered by GSAP, ScrollTrigger, Lenis.js, splitting.imin.js and Scrolltype.js. Keep in mind that these effects are great but you will need to have some understanding of code in order to modify these significantly as they rely on simply the JS libraries and data attributes to apply each effect. The first effect rotates the text and highlights each letter as the paragraph comes into view. This is achieved via the data attributes as mentioned previously. The second text effect showcases each letter coming into view from a different rotation and then all combines together to make the visible text. The third effect has each word come in at different positions from out of view and then into view on page scroll. The third version unwraps each word letter by letter as you scroll down the page. The fourth effect takes each letter and has it fold up at random intervals as you scroll into view. The fifth demonstration shows each letter rotating into place upon scrolling into view. The next demonstration creates a rolling hills effect for the letters as you scroll into view. The next one showcases a paragraph in which each letter is grown from the initial position as you scroll down the page. An appear example follows this one in which each letter of a word appears to be blurry and come into focus as you scroll down the page. The next and final variation has each word come in from random directions to create the paragraph.
An exploding text particles animation using Three.js in Webflow. A good demonstration of how to add Three.js to your Webflow site. In this cloneable the text begins to morph and explode as you move the cursor over it. Please note that this uses custom code found in the head and closing body tags of the page settings.
An add to cart hover button animation for Webflow. When a user hovers over the Add to Cart button a shopping cart icon slides in from the right side. This helps users understand the action taking place on the button and helps add a new level of dynamic buttons to your Webflow site.
Want to add a copy to clipboard button in Webflow? Here's a way to create a copy to clipboard button that will copy any piece of text that you want, including links, to the clipboard. This is great when you want to allow your users to copy blocks of text, URLs, or even color codes in a styleguide.
An easier way to create custom slides in Webflow. Includes animations with static elements or CMS collection lists. This is powered by SlickJS, allowing you to use all of the slider functionality offered without writing any code.
